tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05: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
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.
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
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
We follow the [AirBnB CSS Conventions](https://github.com/airbnb/css)
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
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.
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.
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`).
- The `client/src/styles` folder contains base styles (reset, typography, variables)
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