Parasail

Github

Parasail

A micro CSS framework

Table of contents

  1. 01 Introduction
  2. 02 Getting Started
  3. 03 Naming Convention
  4. 04 Technologies
  5. 05 Grid
  6. 06 Flexbox
  7. 07 Forms
  8. 08 Typography
  9. 09 Buttons
  10. 10 Alerts
  11. 11 Logos
  12. 12 Icons
  13. 13 Lists
  14. 14 Helper Classes
  15. 15 Browser Support
  16. 16 Best Practices in CSS

01 - Introduction

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.

02 - Getting Started

Install with npm

Install Parasail using npm:

$ npm install parasail

Install with Github

Clone the Github repo:

Clone

Usage

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:

@import 'path/to/node_modules/parasail/scss/parasail.scss' ;

Create your own theme

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.

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.

04 - Technologies

SASS

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

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.

05 - Grid system

Grid

.grid

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.

Grid columns

.grid_col-x

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-1
  • .grid__col-2
  • .grid__col-3
  • .grid__col-4
  • .grid__col-5
  • .grid__col-6
  • .grid__col-7
  • .grid__col-8
  • .grid__col-9
  • .grid__col-10
  • .grid__col-11
  • .grid__col-12

.grid_col-auto

.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.

  • .grid__col-2
  • .grid__col-6
  • .grid__col-auto
  • .grid__col-auto
  • .grid__col-auto

Grid Column Offset

.grid_col-offset-x

Offset a column by adding an offset class:

  • .grid__col-offset-1
  • .grid__col-offset-2
  • .grid__col-offset-3
  • .grid__col-offset-4
  • .grid__col-offset-5
  • .grid__col-offset-6
  • .grid__col-offset-7
  • .grid__col-offset-8
  • .grid__col-offset-9
  • .grid__col-offset-10
  • .grid__col-offset-11

Responsive Layouts

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:

  • Large: Viewport ≥ 1200px .grid__col-lg-x .grid__col-offset-lg-x,
  • Medium: Viewport ≥ 992px .grid__col-md-x .grid__col-md-offset-x
  • Small: Viewport ≥ 768px .grid__col-sm-x .grid__col-sm-offset-x
  • Extra Small: Viewport ≤ 767px .grid__col-xs-x .grid__col-xs-offset-x

Using elements with the class .grid__col-lg-x defines column widths for the large viewport (min-width: 1200px) and .grid__col-offset-lg-x will offset those columns. .grid-col-md-x and .grid-col-offset-md-x will affect viewports with a min-width of 992px. Elements with the class .grid__col-sm-x or .grid__col-offset-sm-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-x.

06 - Flexbox

Flex Direction

Flex Direction defines the direction in which the flex items are placed in the flex container. It is influenced by the text direction property.

.direction-row

This is the default value, the direction will be the same as the text direction.

  • .grid__col-3
  • .grid__col-4
  • .grid__col-5

.direction-row-reverse

Setting the flex direction to row-reverse will switch the text direction to the opposite.

  • .grid__col-3
  • .grid__col-4
  • .grid__col-5

.direction-column

Direction-column behaves the same way as direction-row but it influences the vertical direction, so top to bottom.

  • .grid__col-3
  • .grid__col-4
  • .grid__col-5

.direction-column-reverse

Direction-column-reverse behaves the same way as row-reverse but it influences the vertical direction, so top to bottom.

  • .grid__col-3
  • .grid__col-4
  • .grid__col-5

Flex wrap

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.

.nowrap

Default value, the flex items will not wrap.

  • .grid__col-4
  • .grid__col-5
  • .grid__col-6

.wrap

The flex items will wrap if necessary.

  • .grid__col-4
  • .grid__col-5
  • .grid__col-6

.wrap-reverse

The flex items will wrap if necessary but in reverse order.

  • .grid__col-4
  • .grid__col-5
  • .grid__col-6

Justify content

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.

.justify-start

Default value, the items are positioned at the beginning of the container.

  • .grid__col-3
  • .grid__col-3
  • .grid__col-3

.justify-end

The items are positioned at the end of the container.

  • .grid__col-3
  • .grid__col-3
  • .grid__col-3

.justify-center

Justify-center will position the items at the center of the container.

  • .grid__col-3
  • .grid__col-3
  • .grid__col-3

.justify-space-between

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.

  • .grid__col-3
  • .grid__col-3
  • .grid__col-3

.justify-space-around

The items are positioned with equal space before, between and after them.

  • .grid__col-3
  • .grid__col-3
  • .grid__col-3

Align items

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.

.align-stretch

Default value, it stretches the height of the flex item to fit the container (still respects min-width/max-width).

  • .grid__col-3
  • .grid__col-4
    Hodor. Hodor HODOR hodor, Hodor; hodor hodor...
    (more text)
  • .grid__col-5

.align-start

Flex items are positioned at the top of the container.

  • .grid__col-3
  • .grid__col-4
    Hodor. Hodor HODOR hodor, Hodor; hodor hodor...
    (more text)
  • .grid__col-5

.align-end

Flex items are positioned at the bottom of the container.

  • .grid__col-3
  • .grid__col-4
    Hodor. Hodor HODOR hodor, Hodor; hodor hodor...
    (more text)
  • .grid__col-5

.align-center

Flex items are positioned at the vertical center of the container (centered in the cross-axis).

  • .grid__col-3
  • .grid__col-4
    Hodor. Hodor HODOR hodor, Hodor; hodor hodor...
    (more text)
  • .grid__col-5

.align-baseline

Flex items are positioned at the baseline of the container.

  • .grid__col-3
  • .grid__col-4
    Hodor. Hodor HODOR hodor, Hodor; hodor hodor...
    (more text)
  • .grid__col-5

Align Self

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.

.align-self-stretch

Default value, it stretches the height of the flex item to fit the container (still respects min-width/max-width).

  • .align-self-stretch
  • .grid__col-4
    Hodor. Hodor HODOR hodor, Hodor; hodor hodor...
    (more text)
  • .grid__col-4

.align-self-start

Flex item gets positioned at the top of the container.

  • .align-self-start
  • .grid__col-4
    Hodor. Hodor HODOR hodor, Hodor; hodor hodor...
    (more text)
  • .grid__col-4

.align-self-end

Flex item gets positioned at the bottom of the container.

  • .align-self-end
  • .grid__col-4
    Hodor. Hodor HODOR hodor, Hodor; hodor hodor...
    (more text)
  • .grid__col-4

.align-self-center

Flex item gets positioned at the vertical center of the container (centered in the cross-axis).

  • .align-self-center
  • .grid__col-4
    Hodor. Hodor HODOR hodor, Hodor; hodor hodor...
    (more text)
  • .grid__col-4

.align-self-baseline

Flex item gets positioned at the baseline of the container.

  • .align-self-baseline
  • .grid__col-4
    Hodor. Hodor HODOR hodor, Hodor; hodor hodor...
    (more text)
  • .grid__col-4

07 - Forms

We added basic styles for form elements, all values for form variables can be changed in the file _variables.scss.

Label

.form__label

.form__label gives you the option to change the font-size as well as the color.

Input + Select

.form__input

.form__input lets you change the font-size, text, placeholder, background and border color.

Radio Buttons

.form__radio-btn

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 >

Example:

Label: Input: Select: Radio:

08 - Typography

.text--left

Aligns the text on the left.

  • This text is aligned to the left.
  • This text is aligned to the left.
  • This text is aligned to the left.

.text--center

Aligns the text in the center.

  • This text is centered.
  • This text is centered.
  • This text is centered.

.text--right

Aligns the text on the right.

  • This text is aligned to the right.
  • This text is aligned to the right.
  • This text is aligned to the right.

.text--uppercase

Transforms all characters to uppercase.

  • This text is uppercase.
  • This text is uppercase.
  • This text is uppercase.

.text--lowercase

Transforms all characters to lowercase.

  • This text is lowercase.
  • This text is lowercase.
  • This text is lowercase.

.text--capitalize

Transforms the first character of each word to uppercase.

  • This text is capitalized.
  • This text is capitalized.
  • This text is capitalized.

09 - Buttons

The theme currently includes 4 different button styles, you can update the colors as well as the font-size in the _variables.scss file.

  • .btn--primary

  • .btn--default

  • .btn--secondary

  • .btn--error

Example:

< button class = "btn--default" > Default </ button >

10 - Alerts

Use one of these 4 alert classes if you need to display a notification message to the user.

.alert--success

This is a success message

.alert--info

This is an info message

.alert--warning

This is a warning message

.alert--error

This is an error message

Example:

< div class = "alert--success" > This is a success message </ div >

11 - Logos

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.

  • .logo

  • .logo--md

  • .logo--xs

12 - Icons

These are some icons we currently use, you can update the colors as well as the font-sizes in the _variables.scss file.

.icon__arrow

< span class = "icon__arrow" > </ span >

.icon__close

< span class = "icon__close" > </ span >

.icon__question-mark

< span class = "icon__question-mark" > </ span >

13 - Lists

.ordered-list

The list items are marked with numbers.

  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3

.unordered-list

The list items are marked with bullets.

  1. Unordered List Item 1
  2. Unordered List Item 2
  3. Unordered List Item 3

14 - Helper Classes

Alignment

.align--left

Aligns block elements to the left.

.align--center

Centeres block elements.

.align--right

Aligns block elements to the right.

15 - Browser Support

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.

16 - Best Practices in CSS

Formatting

  • 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

IDs

  • 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.

Comments

  • 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.

Example:

.grid ,

.grid__col-auto {

// display: inline-block added for IE support

display : inline - block ;

}