{"id":18472232,"url":"https://github.com/abvcss/abvcss","last_synced_at":"2025-10-26T04:41:20.568Z","repository":{"id":57246293,"uuid":"170019622","full_name":"abvcss/abvcss","owner":"abvcss","description":"abvCSS - CSS-methodology and framework for creating modern and supported web interfaces","archived":false,"fork":false,"pushed_at":"2019-02-18T20:23:27.000Z","size":178,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T06:55:09.063Z","etag":null,"topics":["abvcss","bem","bootstrap","bulma","css-framework","css-methodology","less","normalize-css","postcss","sass","webpack"],"latest_commit_sha":null,"homepage":"https://abvcss.github.io/abvcss-website/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abvcss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-10T19:51:23.000Z","updated_at":"2023-10-22T14:25:19.000Z","dependencies_parsed_at":"2022-08-24T16:31:43.620Z","dependency_job_id":null,"html_url":"https://github.com/abvcss/abvcss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abvcss%2Fabvcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abvcss%2Fabvcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abvcss%2Fabvcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abvcss%2Fabvcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abvcss","download_url":"https://codeload.github.com/abvcss/abvcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247834228,"owners_count":21003934,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["abvcss","bem","bootstrap","bulma","css-framework","css-methodology","less","normalize-css","postcss","sass","webpack"],"created_at":"2024-11-06T10:19:29.958Z","updated_at":"2025-10-26T04:41:15.498Z","avatar_url":"https://github.com/abvcss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://abvcss.github.io/abvcss-website/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003e\u003cimg src=\"https://abvcss.github.io/abvcss-website/dist/img/abvCSS-logo-black.png\" alt=\"abvCSS\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n# abvCSS\n\nabvCSS is a **CSS-methodology** and **framework** for creating modern, dynamic and supported web interfaces. Thanks to the architecture and rules the development process is accelerated. This methodology makes it easy to re-use styles.\n\nFramework abvCSS out of the box supports CSS preprocessors like Sass and Less, postprocessor PostCSS, normalize.css and UI libraries Bootstrap, Foundation and Bulma.\n\n### [Visit our website](https://abvcss.github.io/abvcss-website/)\n\n## CSS-methodology abvCSS            \n\n### Project architecture      \n\nAccording to abvCSS methodology, all styles are divided into 4 categories:\n\n1. Base.\n2. Layout.\n3. Blocks.\n4. Skins.\n\n**Base** - base styles. In this category you should use tag selectors and attribute selectors like this: \n            \n```css\nbody {\n    font-family: Arial;\n    background-color: #fff;  \n    color: #0e0e0e;\n}\n    \na {\n    color: #1894c4;\n}\n\na:hover {\n    color: #df2e30;\n}\n```\n\n\u003e You do not need to use **!important** modifier or other selectors in base styles.\n\u003e\n\u003e It is good to use popular library [normalize.css] in this category.\n\n**Layout** - layout styles. This type of styles should be applied to the structural blocks that are used on the page once. It is header, footer, menu, sidebar etc.\n\n![layout](https://abvcss.github.io/abvcss-website/dist/img/layout.png)\n\nIn this way, you should use **id selectors**. Typical example of layout styles:\n\n```css\n#container {\n  display: grid;\n  grid-template-columns: auto 900px 99px auto;\n  grid-template-rows: 200px auto auto 200px;\n  grid-template-areas:\n    \"header header header header\"\n    \" . menu menu . \"\n    \" . content sidebar . \"\n    \"footer footer footer footer\";\n}\n\n#header {\n  grid-area: header;\n}\n\n#content {\n  grid-area: content\n}\n```\n\nid selectors can be used as nested or child selectors like this:\n\n```css\n.tablet #content {\n  display: block;\n  padding: 10px 20px; \n}\n\n@media screen and (max-width: 375px) {\n  #content {\n    display: block;\n    padding: 5px 15px;\n  }\n}\n```\n\n**Blocks** - styles of reusable blocks. Usually they are buttons, paragraphs, titles, galleries etc. To design that elements you need to use **class** selectors.\n\n**abvCSS** blocks are fully consistent with blocks of **[BEM methodology](https://en.bem.info/methodology/)**. To learn BEM blocks visit **[this page](https://en.bem.info/methodology/key-concepts/#block)**.\n\nIn this way, you should follow the next rules:\n\n```block-name__elem-name_mod-name_mod-val```\n            \n1. Names are written in lowercase Latin letters.\n2. Words are separated by a hyphen (-).\n3. The block name defines the namespace for its elements and modifiers.\n4. The element name is separated from the block name by a double underscore (__).\n5. The modifier name is separated from the block or element name by a single underscore (_).\n6. The modifier value is separated from the modifier name by a single underscore (_).\n7. For boolean modifiers, the value is not included in the name.\n\n\u003e Elements of elements do not exist in the BEM and abvCSS methodologies. The naming rules do not allow creating elements of elements, but you can nest elements inside each other in the DOM tree.\n\n```css\n.header {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  max-width: 900px;\n  margin: 0 auto;\n}\n\n.header__logo {\n  display: inline-block;  \n  height: 100px;\n  width: 400px;\n}\n\n.header__github {  \n  float: right;\n  margin-top: 40px;\n  margin-right: 15px;\n  color: #fff;\n}\n\n.header__github_dark {\n  color: #0e0e0e;\n}\n```\n\nUnlike BEM, it is fine for abvCSS to separate appearance styles in other class.\n\n**Skins** - skinning styles. Skins are styles that describe appearance of the elements. This styles include text color, background color, shadow, rounded corners, decoration style etc.\n\n![skins](https://abvcss.github.io/abvcss-website/dist/img/skins.png)\n\nFor example, you can notice common decoration of blocks on the picture above: black text color, grey background, grey borders and shadow. It is effective to add that styles to Skin class.\n\nTo recognize Skin classes and Blocks classes, all Skin classes begin with a **capital letter**.\n\n```css\n.Grey-skin {\n  color: #0e0e0e;\n  background-color: #eee;\n  border: 1px solid #ccc;\n  box-shadow: 2px 2px 3px #ddd;\n  border-radius: 4px;\n}\n\n.Dark-skin {\n  color: #fff;\n  background-color: #0e0e0e;\n  border: 1px solid #999;\n  border-radius: 4px;\n}\n```\n\nDue to Skin classes, CSS code is reduced, you can also dinamically change design theme of the page.\n\n### DOM classes rules\n\nAccording to abvCSS, DOM classes should match this formula:\n\n```[Skin_class_1 [Skin_class_2 […]]] [block_class_1 [block_class_2]] [element_class] [modifier_class_1 [modifier_class_2 […]]]```\n            \nYou need to follow the next rules:\n                \n1. There are Skin classes from the beginning (with a capital letter).\n2. Then it is Block class (or two classes for the **[Mix](https://en.bem.info/methodology/key-concepts/#mix)**) or Element class.\n3. Finally, there are some Modifier classes.\n\nIt is typical div block of abvCSS methodology:\n\n```html\n\u003cdiv class=\"Adaptive Dark-skin list list_big\"\u003e\n  ...\n\u003c/div\u003e\n```\n\n## Framework abvCSS\n\nWhile installing abvCSS framework it is creating directories and files for abvCSS methodology.\n\nAdditionally, you can choose your favorite css preprocessor - **[Sass](https://sass-scss.ru/guide/)** or **[Less](http://lesscss.org)**.\n\nYou will also be able to add **[normalize.css]**.\n\nFramework abvCSS supports UI libraries like **[Bootstrap](https://getbootstrap.com/)**, **[Foundation](https://foundation.zurb.com)** or **[Bulma](https://bulma.io)**.\n\nTo transform styles we use **[PostCSS](https://github.com/postcss/postcss)** with plugins **[postcss-preset-env](https://github.com/jonathantneal/postcss-preset-env)**, **[rucksack-css](https://www.rucksackcss.org)**, **[cssnano](https://cssnano.co)** and **[css-mqpacker](https://github.com/hail2u/node-css-mqpacker)**.\n\n**[Webpack](https://webpack.js.org)** bundles all this resources.\n\n### Installing\n\nFor installing abvCSS framework you must have **[Node.js](https://nodejs.org/)** platform.\n\nInstall **[Yeoman](https://yeoman.io)**:\n\n```\nnpm install -g yo\n```\n\nInstall generator abvcss:\n\n```\nnpm install -g generator-abvcss\n```\n\nIn empty folder launch abvCSS installing:\n\n```\nyo abvcss\n```\n\nThen you should answer some questions about configuration.\n\nAfter this, there will be a project with the following structure:\n\n```\nproject\n├── index.html\n├── LICENSE\n├── package.json\n├── README.md\n├── webpack.common.js\n├── webpack.dev.js\n├── webpack.prod.js\n└── abvcss\n    ├── 1-base\n    ├── 2-layout\n    ├── 3-blocks\n    ├── 4-skins\n    ├── _placeholder-classes.sass\n    ├── _settings.sass\n    └── style.sass\n```\n\nYou can bundle the project in two modes.\n\nDevelopment mode:\n\n```\nnpm run build:dev\n```\n\nProduction mode:\n\n```\nnpm run build:prod\n```\n\nAfter bundling visit **dist** folder and find **main.css** file. You can attach this file to a web page.\n \nAll sources are located in **1-base**, **2-layout**, **3-blocks**, **4-skins** directories. Module **settings** includes preprocessor variables and other settings.\n\n## abvCSS + React\n\nReact - one of the most popular frameworks for creating dynamic user interfaces. It is fully compatible with the abvCSS framework.\n\nThis bundle allows you to use the most advanced frontend technologies for today.\n\nIf you use such a **cssinjs** framework as **[styled-components](https://www.styled-components.com)**, you probably will not need to write Blocks styles.\n\nTo install abvCSS + React starter, follow these steps:\n\nInstall **[Yeoman](https://yeoman.io)** (if you have not already done so):\n\n```\nnpm install -g yo\n```\n\nInstall generator abvcss+react:\n\n```\nnpm install -g generator-abvcss-react\n```\n\nIn empty folder launch abvcss+react installing:\n\n```\nyo abvcss-react\n```\n\nThen you should answer some questions about configuration.\n\nAfter this, there will be a project with the following structure:\n\n```\nproject\n├── index.html\n├── LICENSE\n├── .babelrc\n├── package.json\n├── README.md\n├── webpack.common.js\n├── webpack.dev.js\n├── webpack.prod.js\n├── src\n│   └── index.jsx\n└── abvcss\n    ├── 1-base\n    ├── 2-layout\n    ├── 3-blocks\n    ├── 4-skins\n    ├── _placeholder-classes.sass\n    ├── _settings.sass\n    └── style.sass\n```\n\nYou can bundle the project in two modes.\n\nDevelopment mode:\n\n```\nnpm run build:dev\n```\n\nProduction mode:\n\n```\nnpm run build:prod\n```\n\nAfter bundling visit **dist** folder and find **main.css** and **main.js** files. You can attach this files to a web page.\n\n[normalize.css]: https://github.com/necolas/normalize.css","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabvcss%2Fabvcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabvcss%2Fabvcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabvcss%2Fabvcss/lists"}