From 06a302b3e54d9007be30804a7736cbffae43a4ff Mon Sep 17 00:00:00 2001 From: Chirag <43230070+ChiragKushwaha@users.noreply.github.com> Date: Tue, 1 Mar 2022 08:04:15 +0530 Subject: [PATCH] translated to english --- README_EN.md | 365 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 365 insertions(+) create mode 100644 README_EN.md diff --git a/README_EN.md b/README_EN.md new file mode 100644 index 0000000..4d144ee --- /dev/null +++ b/README_EN.md @@ -0,0 +1,365 @@ + +# Words commonly used in CSS classes + +## Images + +`image`, `img`, `picture`, `pic` - picture + +`icon` — icon + +`logo` — logo + +`userpic`, `avatar` — userpic, a small picture of the user + +`thumbnail`, `thumb` — thumbnail, thumbnail + +## Text + +`title`, `subject`, `heading`, `headline`, `caption` — title + +`subtitle` — subtitle + +`slogan` — slogan + +`lead`, `tagline` — lead paragraph in the text + +`text` - text content + +`desc` — description, text content option + +`excerpt` - excerpt of text, usually used before the "Read more..." link + +`quote`, `blockquote` — quote + +`snippet` - sample code + +`link` — link + +`copyright`, `copy` - copyright + +## Lists + +`list`, `items` - list + +`item` - list item + +## Blocks + +`page` is the root element of the page + +`header` - header (page or element) + +`footer` - footer (of a page or element) + +`section` - content section (one of several) + +`main`, `body` - the main part (of the page or element) + +`content` - element content + +`sidebar` - sidebar (of a page or element) + +`aside` - block with additional information + +`widget` - a widget, for example, in a sidebar + +## Layout + +`wrapper`, `wrap` - wrapper, usually outer + +`inner` - inner wrapper + +`container`, `holder`, `box` — container + +`grid` - layout (page or element) in the form of a grid (usually contains `row` and `col`) + +`row` - string container + +`col`, `column` - column container + +## Controls + +`button`, `btn` — button, e.g. for submitting a form + +`control` - a control element, for example, forward / backward arrows in a photo gallery, slider control buttons + +`dropdown` - dropdown list + +## media expressions + +`phone`, `mobile` — mobile devices + +`phablet` - large screen phones (6-7") + +`table` — tablets + +`notebook`, `laptop` — laptops + +`desktop` - desktop computers + +## Dimensions + +`tiny` - small, tiny + +`small` + +`medium` + +`big`, `large` + +`huge` - huge + +`narrow` - narrow + +`wide` - wide + +## Miscellaneous + +`search` - search + +`socials` — block of social media icons + +`advertisement`, `adv`, `commercial`, `promo` - ad block (cut by Adblock, it is not recommended to use such classes for blocks with internal ads) + +`features`, `benefits` - a list of the main features of the product, service + +`slider`, `carousel` — slider, interactive element with content scrolling + +`pagination` - pagination + +`user`, `author` — user, post or comment author + +`meta` - a block with additional information, for example, a block of tags and dates in a post + +`cart`, `basket` ​​- basket + +`breadcrumbs` - navigation chain, "breadcrumbs" + +`more`, `all` — link to complete information + +`modal` - modal (dialog) window + +`popup` — popup window + +`tooltip`, `tip` — tooltips + +`preview` - an announcement, an excerpt, such as news or a post, may consist of a title, description and picture. Link to full version expected + +`overlay` - an overlay layer, for example, to darken images or create modal windows + +## States + +`active`, `current` - active element, for example, the current menu item + +`visible` — visible element + +`hidden` - hidden element + +`error` — error status + +`warning` — warning status + +`success` — status of successful completion of the task + +`pending` - waiting state, for example, before changing the status to error or success + +## Examples of using + +### Simple list + +```html +