ProntoCSS is a minimalist CSS framework based on flexbox and written in Sass. Although you can use the minified dist version of the framework, we really suggest that you include it as a Sass dependency. There are a lot of comments in the pronto/_variables.scss file and you should use them as much as you can.

Installation

There are multiple ways to get ProntoCSS:

View it on GitHub

Download the most recent version

You can also use your favorite package manager to download the framework:

yarn add prontocss

npm install --save prontocss

bower install --save prontocss

The basics

ProntoCSS has been created to allow a fast usage with standard variables or a completely customizable experience: every property has a class that can be used in Sass or in Html.

The colors

Default colors

Default base colors are #FC585A and #1682FB.

The default color will be the second one (unless you change it in $default-color).

For convenience, we added black, white.

Here is the use for the default color :

.bg will change the background with the default color
.txt will change the text with the default color
.brd will add a border with the default color

You can also add suffixes to all these properties to change the color:

.bg-white will set a white background
.bg-black will set a black background
.bg-1 will set a background with the first color (by default #FC585A)

Custom colors

Black and white will always exist but you can add as many colors as you want, then just refer to them using their index, like .bg-4 if you have 4 colors in the $colors Sass variable.

The grid

Responsive & Fluid by default

The container is fluid by default. It will max up to 1200px until you change $container-max-width to an other value or to none.

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at s & m (by default) viewport widths.

<div class="row">
    <div class="col-s-12 col-m-6">
        ...
    </div>
</div>

Offsets

Offset a column

<div class="row">
    <div class="col-s-offset-3 col-s-9">
        ...
    </div>
</div>

Auto Width

Add any number of auto sizing columns to a row. Let the flexbox grid figure it out.

<div class="row">
    <div class="col-s">
         ...
    </div>
</div>

Nested Grids

Nest grids inside grids inside grids.

<div class="row">
    <div class="col-s">
        <div class="box">
            <div class="row">
                <div class="col-s">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

`.start-`

<div class="row start-s">
    <div class="col-s-4">
        ...
    </div>
</div>

`.center-`

<div class="row center-s">
    <div class="col-s-4">
        ...
    </div>
</div>

`.end-`

<div class="row end-s">
    <div class="col-s-4">
        ...
    </div>
</div>

`.top-`

<div class="row top-s">
    <div class="col-s-6">
        ...
    </div>
</div>

`.middle-`

<div class="row middle-s">
    <div class="col-s-6">
        ...
    </div>
</div>

`.bottom-`

<div class="row bottom-s">
    <div class="col-s-6">
        ...
    </div>
</div>

Distribution

Add classes to distribute the contents of a row or column.

`.around-`

<div class="row around-s">
    <div class="col-s-2">
        ...
    </div>
    <div class="col-s-2">
        ...
    </div>
    <div class="col-s-2">
        ...
    </div>
</div>

`.between-`

<div class="row between-s">
    <div class="col-s-2">
        ...
    </div>
    <div class="col-s-2">
        ...
    </div>
    <div class="col-s-2">
        ...
    </div>
</div>

The variables

Here are all the variables that you can override.

Variable	Default Value	Details
$colors	#FC585A #1682FB	Colors of the page. You can add as many as you want here.
$main-color	nth($colors, 1)	Main color of the page.
$default-color	nth($colors, 2)	Default color of the page. Will be the 2nd color, if not set otherwise.
$black-color	#000000	Black color placeholder
$white-color	#FFFFFF	White color placeholder
$border-size	1px	Size of the border for default components
$border-type	solid	Type of border for default components
$border-radius	2px	How round do you want your components?
$padding	1rem	Padding
$inline-padding	.2rem	Padding between lines
$font-family-headers	'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif	Default font for headers
$font-family	'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif	Default font
$font-size-headers	3rem	Base size for the headers (this will be the biggest, all the smaller headers will be calculated based on this).
$font-size	1rem	Base size for the regular fonts
$container-max-width	1200px	Container width, you can use 'none' if you want a full width page.
$grid-columns	12	Number of columns per row
$gutter-width	1rem	Gutter between columns
$outer-margin	2rem	Margin for the container sides
$breakpoints	s 0em,m 62em	Position of each breakpoints, you can add as many as you like or change the name of the styles ("s" can be "small" for example).