Echlo Foundation

This page demonstrates foundation CSS styles for echlo. Use this as a play ground to see how styles apply or as an overview to the different styles. EF is adapted from Bootstrap for customization and brevity considerations, as such, a lot of the behaviors/terminology will be similar but may be unexpected at places. File a bug.

Grid system

EF contains a flexible 12 column grid system for laying out elements on the page.

Alternatively, use the generic .column class to fit as many columns as required onto a row.

Hierarchy

Use a .container element to setup and contain .row elements. The .container possess two important properties:

1. the .container class is always centered on the page and
2. the .container element is responsive. If you need to stretch out to the full width of the page instead, use .container-fluid.

Use .row elements to organize .col-* column elements. .row elements stack vertically in .container elements and each section does not overlap vertically.

Use .col elements that span multiple columns to set up layouts and wrap content.

Responsive grid

EF define 5 different size classes corresponding to different device screen size. The table below shows off the key features of the size class. Each class applies to the breakpoint size and above.

Example: Compressed or stretched rows

Unlike columns, row can contract or fill, depending on the fill ratio. The class row-* indicates the ratio that can be filled

Example: Row ratios

Foundation provides ratios from 1-6

You can use a fix height row with ratio rows

Example: Stacked to horizontal

Using .col-lg-* classes, create a basic grid system that starts off stacked on mobile and tablets and starts becoming horizontal on desktop devices.

Example: Mobile and desktop

Below is an example of layout that changes width based on whether it's in mobile or tablet sizes or if it's viewed on the desktop.

Example: Mobile, tablet and desktop

To further differentiate, apply different classes for different class sizes.

Example: All size classes

Columns that are over 12 columns overflow to the next line. Here, we demonstrate different layouts for each size class.

Example: Column offset

Use .col-{size}-offset-* classes to give columns an offset and push them from the left.

Alignment classes

Foundation has a set of build in classes to help align grid items within other items. Typically, rows arrange their children horizontally while column and containers arrange their children vertically. In foundation, we always use .start, .center, .end to mean horizontal alignment, while .top, .middle, .bottom .tall means vertical alignments. .reverse, .justify and .around are only applied to it's primary axis.

Example: Column alignment inside rows

The following shows the use of .start, .center, .end, .justify, .around and .reverse.

Here we use .top, .middle, .bottom and .tall.

Example: Content alignment inside columns

Like rows, inline content can be aligned within the containing column. Here we show the use of .top, .middle, .bottom and .around. You can also apply .reverse to start from the bottom

To justify content horizontally, use .start, .center and .end

Example: Size-class based row alignments

Row alignments can be conditional on the size class. All standard row alignment classes, .reverse .start .center .end .justify .around .top .middle .bottom .tall, can be used with a size class prefix like -md to apply only in specific size classes and up.

Example: Size-class based column alignments

Column alignments can also be conditional on size classes. All standard column alignment classes can be applied with a -* prefix to apply to the size class and above.

Example: Nested Columns

.row and .col-* can be nested, and the columns are relative ot the containing element.

Visibility classes

Colors

Foundation uses a simple color system that is comprised of a highlight color and a palette of grayscale colors.

Highlight

Grayscale

Typography

Configuration

$font-base-size: 17px !default;
$font-line-height: 1.5 !default;
$std-bottom-margin: 1rem !default;

$body-font-family: "" !default;
$body-font-weight: 400 !default;
$mono-font-family: "" !default;
$header-font-family: "" !default;

$header-line-height: 1.3 !default;
$header-1-2-font-weight: 300 !default;
$header-3-4-font-weight: 300 !default;
$header-5-6-font-weight: 600 !default;

$body-text-color: $gray-80 !default;
$secondary-text-color: $gray-50 !default;
$inverted-text-color: white !default;
$inverted-secondary-text-color: $gray-20 !default;
$link-text-color: $highlightColor !default;

Text styles

Text colors

Text alignment

Text treatments

Headings

Headings and body

Lists

Forms & Controls

Configuration

$formElementHeight: 40px;
$formHighlightColor: $highlightColor;
$formBackgroundColor: $lightestGray;
$formBackgroundColorActive: darken($formBackgroundColor, 5%);
$formBackgroundColorFocused: white;
$formBorderColor: $lighterGray; 
$formBorder: 1px solid $formBorderColor;

Text input

Radio buttons and check boxes

HTML5 controls

Buttons