Cascade Style Sheet (CSS)
The style is an important aspect of an application. Anyone can write css, but there are some subtle things that makes the difference between a good written css and a bad one.
We choose not to use a framework, but we are going to guide you throughout the process of building the base css you’ll need in most of your projects.
For this tutorial, we are going to use SASS (SCSS), because it’s an amazing tool that offers some features that plain css misses that could improve your productivity right away and help you modularize your code. For example: variables, mixins, import, functions and many other cool features.
We are using PostCSS because it makes our life easier by using some of it’s plugins:
- Autoprefixer taking out our responsability to prefix our css rules for each browser.
- CSS MQPacker pack some CSS media query rules into one using PostCSS into one and adding them at the end of css file
- CSSO is a CSS minifier that compresses and cleans our code
To configure your newly installed plugins, you need to add this in package json:
This is the basic folder structure we are using and recommend
├── client │ ├── styles │ │ ├── cc-app.scss // Main file where we import all the other scss files │ │ └── _helpers // in this folder we add all files for variables, functions, mixins | │ │ └── _functions.scss // functions that we use in mixins | │ │ └── _helpers.scss // general rules all over the website | │ │ └── _mixins.scss // a group of declarations that you want to re-use | │ │ └── _variables.scss │ │ └── base | │ │ └── _normalize.scss // css reset for the browser | │ │ └── _font.scss // rules for importing external fonts | │ │ └── _general.scss // general rules for elements (html, body, links, a, etc) │ │ └── elements | │ │ └── grid.scss │ │ └── form | │ │ └── _button.scss | │ │ └── _checkbox.scss | │ │ └── _radio.scss | │ │ └── _text.scss | │ │ └── _textarea.scss | │ │ └── _select.scss | │ │ └── _form-helpers.scss │ │ └── layout | │ │ └── header | │ │ └── footer | │ │ └── main │ │ └── pages // a folder in which we add the css files for each page of application │ │ └── plugins // // in this folder we add the files from our external components that we use in the app │ ├── ... ├── imports │ ├── ... └── server └── ...
You can find a pre-installed meteor project with this folder structure, here
To structure our layout model, we are using CSS3 Flexbile Box because it solves some problems that the layout float model have:
- vertical and horizontal centering
- same height columns
You can learn more about it, here
We are using rem size for our fonts because it offers responsiveness, scalability, improved reading experience, and greater flexibility in defining components. To read more about it, click here
It is extremely important to write clean css code so that we have some recommendations for you:
- When you create an application, prefix your classes with something specific and short. For example, we chose for our company “cc” (Cult of Coders). The reason behind it is that if we get an external library, we won’t any have any conflicts
- Use 3 or less levels of css nesting. Most of the time you don’t need more than one level because if you want to override those styles only on a specific elements, you don’t have to recreate the whole nesting levels
- Using !important in your CSS usually means you’re narcissistic & selfish or lazy. Respect the devs to come and don’t use it!
- For each component (or page / section) create a separate file in which you’ll store only the specific styles for that section. This will make the code much cleaner, offering better readability and very easy to modify later
- Naming standard convention. Our current recommendation is BEM
- Be specific in naming your classes. The class names should represent your elements
Variables are simply amazing because you can store some general rules that you want to apply in your stylesheet.
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site
Style the section where we display the donuts. Add to each element from the section, a specific class. Each type of donut, will have a different color.
The creation of a donut needs to be responsive so we can add it from each device we would like