Parasail is a minimalistic CSS framework from Parasail Health using SASS and Flexbox. It's main feature is a Flexbox based grid system which lets you create responsive layouts easily.

We included a file called _variables.scss in the scss folder which by default loads our Parasail styles. By editing this file you can create your own theme in just a few minutes.

Or you can import the parasail.scss file in your own scss file if you want to use our variables:

You can include the file parasail.min.css in your header:

03 - Naming Convention - BEM

BEM stands for Block, Element, Modifier, it is a naming convention for classes in HTML and CSS which assists you to write modular CSS. The goal of BEM is, to help developers better understand the relationship between HTML and CSS by quickly giving them an idea of which element depends on another.

BEM is successful not because it gives you a lot of options but because it limits what you are allowed to do. The problem it's trying to avoid is getting your rules to match the elements you want, without them accidentally matching the elements you don’t want to affect.

Block is a top-level abstraction of a new component. < button class = "btn" > Block </ button >

Element depends upon the block. < button class = "btn" >

< p class = "btn__text" > Element </ p >

</ button >

Modifier changes the style of the block. < button class = "btn--green" > Modifier </ button >

If you want to read more about BEM, check out the Get BEM introduction.