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:
- the
.container
class is always centered on the page and - 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.
Extra small devices | Small devices | Medium devices | Large devices | Extra large devices | |
---|---|---|---|---|---|
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
Breakpoints | 0 | 546px | 768px | 992px | 1400px |
Container width | Auto | 576px | 720px | 960px | 1340px |
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg |
.col-xl- |
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
Row
Row-1
Example: Row ratios
Foundation provides ratios from 1-6
Row-1
Row-2
Row-3
Row-4
Row-5
Row-6
You can use a fix height row with ratio rows
Row-1
Row-2
Row, 50 px
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
Hello world
Goodbye world
Hello world
Goodbye world
Hello world
Goodbye world
Hello world
Goodbye world
Hello world
Goodbye world
Hello world
Goodbye world
To justify content horizontally, use .start
, .center
and .end
Hello world
Goodbye world
Hello world
Goodbye world
Hello world
Goodbye world
Hello world
Goodbye world
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 Hello world Goodbye world Hello world Goodbye world Hello world Goodbye world Hello world Goodbye world Hello world Goodbye world-*
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
This is a paragraph. Specifically, this is a leading paragraph. The paragraph has a lead
class applied to it. It can be used to lead into new articles or highlight specific passages.
Use a regular p
tag to wrap paragraphs. This is the default font, which is 17 pixels by default.
This is a slightly smaller paragraph. Use .small
to make the text smaller!
Text colors
Sometimes fate is like a small sandstorm that keeps changing directions. You change direction but the sandstorm chases you. You turn again, but the storm adjusts. Over and over you play this out, like some ominous dance with death just before dawn.
Why? Because this storm isn’t something that blew in from far away, something that has nothing to do with you. This storm is you. Something inside of you. So all you can do is give in to it, step right inside the storm, closing your eyes and plugging up your ears so the sand doesn’t get in, and walk through it, step by step.
There’s no sun there, no moon, no direction, no sense of time. Just fine white sand swirling up into the sky like pulverized bones. That’s the kind of sandstorm you need to imagine.
And you really will have to make it through that violent, metaphysical, symbolic storm. No matter how metaphysical or symbolic it might be, make no mistake about it: it will cut through flesh like a thousand razor blades. People will bleed there, and you will bleed too. Hot, red blood. You’ll catch that blood in your hands, your own blood and the blood of others.
Text alignment
Left alignment
Center alignment
Right alignment
This is justified, and as you can see there are no longer any ragged lines on each side as text gets squished to the column. Here is more text so you can see how there are rivers forming in the paragraph text as the browser attempts to justify them on both sides. Isn't typography fun?
Text treatments
Here are some other text treatments. Here's a link. Here's a site that you've likely visited before. This is what superman is. And a little bit of oomph for those who need them. Or sometimes you just need to strikethrough or delete things.
Headings
h1.loud Use this for headings that need to shout
h1. This is the largest heading, such as the page title but it can flow into a second line
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Headings and body
h1. This is the largest heading, such as the page title but it can flow into a second line
Donec dignissim venenatis nulla. Aenean laoreet, purus vitae hendrerit feugiat, ligula tortor sollicitudin leo, et sagittis tortor libero at lacus. Duis luctus quis lorem vitae vehicula.
h2. Heading 2
Donec dignissim venenatis nulla. Aenean laoreet, purus vitae hendrerit feugiat, ligula tortor sollicitudin leo, et sagittis tortor libero at lacus. Duis luctus quis lorem vitae vehicula.
h3. Heading 3
Donec dignissim venenatis nulla. Aenean laoreet, purus vitae hendrerit feugiat, ligula tortor sollicitudin leo, et sagittis tortor libero at lacus. Duis luctus quis lorem vitae vehicula.
h4. Heading 4
Donec dignissim venenatis nulla. Aenean laoreet, purus vitae hendrerit feugiat, ligula tortor sollicitudin leo, et sagittis tortor libero at lacus. Duis luctus quis lorem vitae vehicula.
h5. Heading 5
Donec dignissim venenatis nulla. Aenean laoreet, purus vitae hendrerit feugiat, ligula tortor sollicitudin leo, et sagittis tortor libero at lacus. Duis luctus quis lorem vitae vehicula.
h6. Heading 6
Donec dignissim venenatis nulla. Aenean laoreet, purus vitae hendrerit feugiat, ligula tortor sollicitudin leo, et sagittis tortor libero at lacus. Duis luctus quis lorem vitae vehicula.
Lists
- This is the first unordered list
- This is the second unordered list. This is how a very long sentence is going to show up in the list. Observe the indentation of the second line.
- This is the third unordered list
- This is the first ordered list
- This is the second ordered list. This is how a very long sentence is going to show up in the list. Observe the indentation of the second line.
- This is the third ordered list
- This is the first unordered list
- This is the second unordered list. This is how a very long sentence is going to show up in the list. Observe the indentation of the second line.
- This is the third unordered list
- This is the first ordered list
- This is the second ordered list. This is how a very long sentence is going to show up in the list. Observe the indentation of the second line.
- This is the third ordered list
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
What is the right number?
What is the right number?