- 01 INTRODUCTION
- 02 GETTING STARTED
- 03 NAMING CONVENTION - BEM
- 04 TECHNOLOGIES
- 05 GRID SYSTEM
- 06 FLEXBOX
- 07 FORMS
- 08 TYPOGRAPHY
- 09 BUTTONS
- 10 ALERTS
- 11 LOGOS
- 12 ICONS
- 13 LISTS
- 14 HELPER CLASSES
- 15 BROWSER SUPPORT
- 16 BEST PRACTICES IN CSS
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.
Install Parasail using npm:
$ npm install parasail
You can include the file parasail.min.css in your header:
<link rel="stylesheet" href="path/to/node_modules/parasail/css/parasail.min.css" >Or you can import the parasail.scss file in your own scss file if you want to use our variables:
<link rel="stylesheet" href="path/to/node_modules/parasail/scss/parasail.scss" >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.
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.
Sass is the most popular CSS pre-processor on the market today. It is a lightweight tool that lets us write fast, reusable CSS by offering key features such as nested selectors, mixins, conditional statements, and variable declarations.
Flexbox is a new layout technique that was introduced in CSS3. One of the most difficult concepts for new CSS users to grasp is how to properly align, scale, and position elements across different screen sizes. With Flexbox, we can address this problem with 1-2 lines of code.
The grid system is based on Flexbox, .grid defines a flex container by setting display to flex. It enables a flex context for all its direct children, which are called flex items.
Different column sizes can be defined by using .grid__col-1 to .grid__col-12, with .grid__col-1 being the smallest column size and .grid__col-12 taking up 100% of its parent container.
.grid__col-auto creates a column that will take up however much space is left in the row. If the row has multiple .grid__col-auto columns, the space gets divided up evenly between the columns.
Offset a column by adding an offset class: .grid_col-offset-x.
The grid system lets you create responsive layouts easily by giving you the option to define different column widths for each viewport. The viewports are determined by 4 different breakpoints:
- Column classes:
.grid__col-lg-1to.grid__col-lg-12 - Column Offset classes:
.grid__col-lg-offset-1to.grid__col-lg-offset-12
- Column classes:
.grid__col-md-1to.grid__col-md-12 - Column Offset classes:
.grid__col-md-offset-1to.grid__col-md-offset-12
- Column classes:
.grid__col-sm-1to.grid__col-sm-12 - Column Offset classes:
.grid__col-sm-offset-1to.grid__col-sm-offset-12
- Column classes:
.grid__col-xs-1to.grid__col-xs-12 - Column Offset classes:
.grid__col-xs-offset-1to.grid__col-xs-offset-12
Using elements with the class .grid__col-lg-x defines column widths for the large viewport (min-width: 1200px) and .grid__col-lg-offset-x will offset those columns. .grid-col-md-x and .grid-col-md-offset-x will affect viewports with a min-width of 992px. Elements with the class .grid__col-sm-x or .grid__col-sm-offset-x will affect the small viewport (min-width: 768px) and .grid__col-xs-x defines columns width for the extra small viewport (max-width: 767px) which can be offset with .grid__col-xs-offset-x.
Flex Direction defines the direction in which the flex items are placed in the flex container. It is influenced by the text direction property.
This is the default value, the direction will be the same as the text direction.
Setting the flex direction to row-reverse will switch the text direction to the opposite.
Direction-column behaves the same way as direction-row but it influences the vertical direction, so top to bottom.
Direction-column-reverse behaves the same way as row-reverse but it influences the vertical direction, so top to bottom.
Flex-wrap defines whether the flex items are forced in a single line or can be flowed into multiple lines if there isn't enough room for them on one flex line.
Default value, the flex items will not wrap.
The flex items will wrap if necessary.
The flex items will wrap if necessary but in reverse order.
Justify-content defines how flex items are aligned along the main-axis (that means by default horizontally, left to right). It helps distribute extra space between the items when they don't use all available space on the main-axis.
Default value, the items are positioned at the beginning of the container.
The items are positioned at the end of the container.
Justify-center will position the items at the center of the container.
Items are evenly spread horizontally, the first item is at the beginning of the container, the last item on the end of the container. The space gets distributed between the items.
The items are positioned with equal space before, between and after them.
This part is one of the best features of Flexbox because before Flexbox it was very painful to properly center elements vertically.
Align-items defines how flex items are aligned along the cross-axis (which is by default vertically, top to bottom) when they don't take up all of the available space in the container. It is the justify-content version for the cross-axis.
Default value, it stretches the height of the flex item to fit the container (still respects min-width/max-width).
Flex items are positioned at the top of the container.
Flex items are positioned at the bottom of the container.
Flex items are positioned at the vertical center of the container (centered in the cross-axis).
Flex items are positioned at the baseline of the container.
Align Self accepts the same 5 values as align items, with the difference that you apply it to individual flex items in order to overwrite align items.
Default value, it stretches the height of the flex item to fit the container (still respects min-width/max-width).
Flex item gets positioned at the top of the container.
Flex item gets positioned at the bottom of the container.
Flex item gets positioned at the vertical center of the container (centered in the cross-axis).
Flex item gets positioned at the baseline of the container.
We added basic styles for form elements, all values for form variables can be changed in the file _variables.scss.
.form__label gives you the option to change the font-size as well as the color.
.form__input lets you change the font-size, text, placeholder, background and border color.
Input fields with type="radio" don't allow you to set a placeholder. To add a placeholder to a radio button, you need to add a label and make the label the actual placeholder. In order to still make it look like a button, wrap the label as well as the input in a div with the class="form__radio-btn".
<div class="form__radio-btn">
<input id="id" name="name" type="radio" />
<label for="id">Great 760+</label>
</div>
Aligns the text on the left.
Aligns the text in the center.
Aligns the text on the right.
Transforms all characters to uppercase.
Transforms all characters to lowercase.
Transforms the first character of each word to uppercase.
The theme currently includes 4 different button styles, you can update the colors as well as the font-size in the _variables.scss file.
<button class="btn--default">Default</button>Use one of these 4 alert classes if you need to display a notification message to the user.
<div class="alert--success">This is a success message</div>By default the theme is loading the Parasail logo and gives you the option to use it in 3 different sizes. Simply go into the _variables.scss file and change the $logo variable to load your own logo. If you want to change the width and height ratio, you can do this by changing the values in the _logos.scss file.
These are some icons we currently use, you can update the colors as well as the font-sizes in the _variables.scss file.
<span class="icon__arrow"></span>
<span class="icon__close"></span>
<span class="icon__question-mark"></span>The list items are marked with numbers.
- Ordered List Item 1
- Ordered List Item 2
- Ordered List Item 3
The list items are marked with bullets.
- Unordered List Item 1
- Unordered List Item 2
- Unordered List Item 3
Aligns block elements to the left.
Centeres block elements.
Aligns block elements to the right.
The Parasail framework uses Flexbox, the included grid system, for example, is based entirely on Flexbox. Flexbox is supported by all major browsers, as well as IE10 and higher, with the exception of Opera mini.
Every project targets a different audience. Therefore, browser support is something that needs to be decided on an individual basis. Parasail focuses on providing a lightweight CSS framework that can be used for any project, for the simple reason that we do not wish to decide between which browsers to support.
For supporting older browsers for your project, we recommend using Autoprefixer. Autoprefixer is an amazing tool that lets you specify which browser version you want to support, and automatically prefixes your CSS with the correct vendor prefixes.
If you are looking to support IE9 and lower, you will need to add a polyfill such as Flexibility.
- Don't nest further than 3 levels deep
- Use 2 spaces for indentation
- When using multiple selectors in a rule declaration, give each selector it's own line
- Put a space before the opening brace { in rule declarations
- In properties, put a space after, but not before, the : character.
- Put closing braces } of rule declarations on a new line
- Avoid using IDs unless that element is suppose to be a Javascript identifier.
- They are not reusable and introduce unnecessarily specificity to your rule declaration.
- Put comment on its own line
- Avoid using end-of-line comments
- Write comments for code that isn't self-documenting (for example Browser hacks)
- When writing comments in SASS, keep in mind that comments using the double slash (
// Double slash comment) will not be compiled to regular CSS while comments using the slash + asterix (/* Comment using slash + asterix */) will be compiled.
.grid,
.grid__col-auto {
// display: inline-block added for IE support
display: inline-block;
}
Licensed under the MIT License.