tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-01 13:48:37 +02:00
Code Issues Projects Releases Wiki Activity

Update CSS conventions doc

Browse Source
This commit is contained in:
Saophalkun Ponlu 2017-12-15 16:28:50 +13:00 committed by Christopher Joe
parent 277c129e1e
commit e0e50c79fd
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/en/05_Contributing/13_CSS_Coding_Conventions.md
View File

@ -3,7 +3,7 @@
## Overview ## Overview
This document provides guidelines for code formatting to developers contributing This document provides guidelines for code formatting to developers contributing
to SilverStripe. It applies to all CSS/Sass files in the `framework/` and `cms/` modules. to SilverStripe. It applies to all CSS/Sass files in the SilverStripe core modules.
In 2016, SilverStripe started a rewrite of the styles of the CMS interface. In 2016, SilverStripe started a rewrite of the styles of the CMS interface.
This rewrite is work-in-progress so code written prior to this This rewrite is work-in-progress so code written prior to this
@ -16,20 +16,24 @@ Check our [requirements](/getting_started/server_requirements) documentation.
## Tools and libraries ## Tools and libraries
Styles are written in the [SCSS language](http://sass-lang.com/). Styles are written in the [SCSS language](http://sass-lang.com/).
We use [Bootstrap 4](http://v4-alpha.getbootstrap.com/) styles where possible. We use [Bootstrap 4](https://getbootstrap.com/) styles where possible.
## Conventions ## Conventions
We follow the [AirBnB CSS Conventions](https://github.com/airbnb/css) We follow the [AirBnB CSS Conventions](https://github.com/airbnb/css)
and the [BEM](http://getbem.com/) methodology (block-element-modifier). and the [BEM](http://getbem.com/) methodology (block-element-modifier).
File naming and style include ordering is inspired by
[ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/). Because we use [Bootstrap 4](https://getbootstrap.com/) which
does not follow [BEM](http://getbem.com/) naming convention there will be
a lot of places where class names voilate BEM.
However, please note that they are not a indicator of how to name classes.
Use BEM conventions where possible.
## Linting ## Linting
We use [sass-lint](hhttps://github.com/sasstools/sass-lint) to ensure all new SCSS We use [sass-lint](hhttps://github.com/sasstools/sass-lint) to ensure all new SCSS
written complies with the rules below. It will be provided as an npm dev dependency. written complies with the rules below. It will be provided as an npm dev dependency.
Ther eare also quite a few [sass-lint IDE integrations]https://github.com/sasstools/sass-lint#ide-integration) There are also quite a few [sass-lint IDE integrations]https://github.com/sasstools/sass-lint#ide-integration)
which highlight any linting errors right in your code. which highlight any linting errors right in your code.
We strongly recommend installing one of these into the editor of your choice, to We strongly recommend installing one of these into the editor of your choice, to
@ -51,8 +55,6 @@ via `yarn run lint`.
For example, a `components/FormAction` component has styles named `FormAction.scss`). For example, a `components/FormAction` component has styles named `FormAction.scss`).
- The `client/src/styles` folder contains base styles (reset, typography, variables) - The `client/src/styles` folder contains base styles (reset, typography, variables)
as well as layout-related styles which arranges components together. as well as layout-related styles which arranges components together.
Naming and conventions in this folder follow
[ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/).
## Icons and Graphics ## Icons and Graphics