Installation

ClassicSemantic
1

Get the Classic version from Get it section.
You may stop here because .zip file contains ready to use html template.

optional:
2

After downloading and unzipping the file - copy csstetic.css to your project folder.

3

Link to stylesheet by pasting following code in HEAD of your html file.


<link rel="stylesheet" href="./style/csstetic.css">
1

Get the Semantic version from Get it section.
You may stop here because .zip file contains ready to use html and scss template.

optional:
2

After downloading and unzipping the file - copy _csstetic-semantic.scss to your project folder.
If you want to build your own - classic version, also copy the csstetic.scss file.

3

Import scss files your style.scss file.


@import "./_csstetic-semantic.scss"; @import "./csstetic.scss"; // optional (classic version)
4

Compile style.scss file by using Sass Compiler of your choice.

5

Link to stylesheet by pasting following code in HEAD of your html file.


<link rel="stylesheet" href="./style/style.css">

Tiles

Create a rectangle of proportional size.
Tiles can be used to make responsive metro-style layouts,
image thumbnails or galleries.
ColorsWireframePhotosHeights

Do your best

Live, learn, love

Don’t regret decisions

Don’t just think

Read something new

Dream, believe

Life is awesome

height 200%
max-width: 25%

height: 50%
max-width: 50%

height: 100%
max-width: 25%

height: 100%
max-width: 25%

height: 100%
max-width: 25%

height: 50%
max-width: 25%

height: 50%
max-width: 25%

Do your best

Live, learn, love

Don’t regret decisions

Don’t just think

Read something new

Dream, believe

Life is awesome

height 25%

height 50%

height 75%

height 125%

height 150%

height 175%

height 175%

height 200%

Short usageSemanticClassic
Semantic
.my-tile { @include fw-tile; @include fw-tile-height(3/4); // or (75%) max-width: 25%; // optional } .my-tile-content { @include fw-tile-content; }
Classic
<div class="fw-tile fw-tile-075"> <div class="fw-tile-content">content...</div> </div>
Classic heights

.fw-tile-1 - 100% (step is every 100%)    ...    up to .fw-tile-4 - 400%

.fw-tile-025 - 25% (step is every 25%)    ...    up to .fw-tile-400 - 400%

<div class="my-tile"> <div class="my-tile-content">content...</div> </div>
.my-tile { @include fw-tile; @include fw-tile-height(3/4); // or (75%) max-width: 25%; // optional } .my-tile-content { @include fw-tile-content; }
<div class="fw-tile fw-tile-075"> <div class="fw-tile-content">content...</div> </div>

Button

Convert inline element into
a button, ready for styling.
Demo buttonDemo without button
Anchor as Button

Paragraph as Button

Span as Button
Styled
Anchor

Paragraph

Span
Short usageSemanticClassic
Semantic
.my-button { @include fw-button; }
Classic
class="fw-button"
<span class="my-button">Hello!</span>
.my-button { @include fw-button; // optional, custom styling @include fw-size-base; @include fw-size(xxl); border-radius: $fw-rounded-md; background-color: fw-color(deeppurple, 500); color: fw-color(white); }
<span class="fw-button">Hello!</span>

Input

Reset styling on input element, ready to apply custom style.
Input demoBrowser default

Unstyled input

Custom styling

Short usageSemanticClassic
Semantic
.my-input { @include fw-input; }
Classic
class="fw-input"
<input class="my-input" placeholder="placeholder text">
.my-input { @include fw-input; // optional, custom styling @include fw-size-base; @include fw-size(xxl); border-radius: $fw-rounded-md; background-color: fw-color(grey, 100); color: fw-color(black); }
<input class="fw-input" placeholder="placeholder text">

Input with custom styling

<input class="fw-input fw-bg-bluegrey-50 fw-size-xxl fw-rounded-md fw-txt-black" placeholder="placeholder text">

Text (size)

Determines size of the text depending on window width.
This utility also comes with a set of presets.
Demo with textDemo without text

XXS Cras semper metus metus, quis scelerisque leo dapibus et. Vestibulum auctor quam vel tellus tincidunt condimentum. Praesent metus ante, vestibulum in eleifend vel, tristique in eros. Ut non vehicula nisi, et cursus tortor. Morbi viverra at leo in ultricies. Vivamus nec massa metus. Fusce ac turpis metus.

XS Cras semper metus metus, quis scelerisque leo dapibus et. Vestibulum auctor quam vel tellus tincidunt condimentum. Praesent metus ante, vestibulum in eleifend vel, tristique in eros. Ut non vehicula nisi, et cursus tortor. Morbi viverra at leo in ultricies. Vivamus nec massa metus. Fusce ac turpis metus.

SM Cras semper metus metus, quis scelerisque leo dapibus et. Vestibulum auctor quam vel tellus tincidunt condimentum. Praesent metus ante, vestibulum in eleifend vel, tristique in eros. Ut non vehicula nisi, et cursus tortor. Morbi viverra at leo in ultricies. Vivamus nec massa metus. Fusce ac turpis metus.

MD Cras semper metus metus, quis scelerisque leo dapibus et. Vestibulum auctor quam vel tellus tincidunt condimentum. Praesent metus ante, vestibulum in eleifend vel, tristique in eros. Ut non vehicula nisi, et cursus tortor. Morbi viverra at leo in ultricies. Vivamus nec massa metus. Fusce ac turpis metus.

LG Cras semper metus metus, quis scelerisque leo dapibus et. Vestibulum auctor quam vel tellus tincidunt condimentum. Praesent metus ante, vestibulum in eleifend vel, tristique in eros. Ut non vehicula nisi, et cursus tortor. Morbi viverra at leo in ultricies. Vivamus nec massa metus. Fusce ac turpis metus.

XL Cras semper metus metus, quis scelerisque leo dapibus et. Vestibulum auctor quam vel tellus tincidunt condimentum. Praesent metus ante, vestibulum in eleifend vel, tristique in eros. Ut non vehicula nisi, et cursus tortor. Morbi viverra at leo in ultricies. Vivamus nec massa metus. Fusce ac turpis metus.

XXL Cras semper metus metus, quis scelerisque leo dapibus et. Vestibulum auctor quam vel tellus tincidunt condimentum. Praesent metus ante, vestibulum in eleifend vel, tristique in eros. Ut non vehicula nisi, et cursus tortor. Morbi viverra at leo in ultricies. Vivamus nec massa metus. Fusce ac turpis metus.

XXXL Cras semper metus metus, quis scelerisque leo dapibus et. Vestibulum auctor quam vel tellus tincidunt condimentum. Praesent metus ante, vestibulum in eleifend vel, tristique in eros. Ut non vehicula nisi, et cursus tortor. Morbi viverra at leo in ultricies. Vivamus nec massa metus. Fusce ac turpis metus.

HG Cras semper metus metus, quis scelerisque leo dapibus et. Vestibulum auctor quam vel tellus tincidunt condimentum. Praesent metus ante, vestibulum in eleifend vel, tristique in eros. Ut non vehicula nisi, et cursus tortor. Morbi viverra at leo in ultricies. Vivamus nec massa metus. Fusce ac turpis metus.

Short UsageSemanticClassic
Size presets

xxs, xs, sm, md, lg, xl, xxl, xxxl, hg

Semantic
.my-text { @include fw-text(md); }
Classic
class="fw-text-md"
<span class="my-text">Hello!</span>
.my-text { @include fw-text(md); }
<span class="fw-text-md">Hello!</span>

You can also use Scale Properties to create scalable text of custom size.

Align

Selectors for align, float and vertical-align.
Example

Please not that each align may require specific element display, width or height.
Vertical-align works best width inline-block or table-cell elements,
while margin: auto align require display block and limited width (such as 50%).

text align

text aligned to left

centered text

text aligned to right

vertical align

Example on table cells. Works on inline-block elements as well.

top
middle
bottom

float

Floating requires clearfix on parent element;

left floated block
right floated block
both: left
and right

center (margin: auto)

centered element
Short usageSemanticClassic
Semantic
.aligned-element { text-right: center; vertical-align: middle; }
Classic
class="fw-text-center"
<span class="my-align">Hello!</span>
// element has to use display inline-block or table-cell and width: 100% .aligned-element { text-right: center; vertical-align: middle; } // VERTICAL ALIGN // element has to be display: inline-block or table-cell .aligned-top { vertical-align: top; } .aligned-middle { vertical-align: middle; } .aligned-bottom { vertical-align: bottom; } // TEXT ALIGN // element has to be wider than it's content, add width: 100% .aligned-text-left { text-align: left; } .aligned-text-center { text-align: center; } .aligned-text-right { text-align: right; } // FLOAT // float removes element from paren't height, use fw-clearfix to fix that .clearfixed-parent { @include fw-clearfix; .aligned-left { float: left; } } .clearfixed-parent { @include fw-clearfix; .aligned-right { float: right; } } // CENTER (MARGIN: AUTO) // centered element has to smaller than parent, for example add width: 50% .aligned-center { margin-left: auto; margin-right: auto; }
<!-- TEXT ALIGN --> <div class="fw-text-left"> <p>text aligned to left</p> </div> <div class="fw-text-center"> <p>centered text</p> </div> <div class="fw-text-right"> <p>text aligned to right</p> </div> <!-- VERTICAL ALIGN --> <div class="fw-top fw-display-table-cell"> top </div> <div class="fw-middle fw-display-table-cell"> middle </div> <div class="fw-bottom fw-display-table-cell"> bottom </div> <!-- FLOAT --> <div class="fw-clearfix"> <div class="fw-left"> left floated block </div> </div> <div class="fw-clearfix"> <div class="fw-right"> right floated block </div> </div> <div class="fw-clearfix"> <div class="fw-left"> both: left </div> <div class="fw-right"> and right </div> </div> <!-- CENTER (MARGIN: AUTO) --> <div class="fw-center" style="max-width: 100px"> centered element </div>

Element Size

Set size of the element. Best for input text, button, select menu.
Size is responsive to browser width and can be customized.
Demo with element sizeDemo without element sizeCustom width proportions

Resize this demo and see how elements adapt to width of the screen.

xxsxssmmdlgxlxxlxxxl
prop 0prop 0.25prop 0.5prop 0.75prop 1prop 2
.custom-prop-1, .custom-prop-2, .custom-prop-3, .custom-prop-4, .custom-prop-5, .custom-prop-6 { @include fw-size-base; } .custom-prop-1 { @include fw-size(50px, no-responsive, 0); } .custom-prop-2 { @include fw-size(50px, no-responsive, 0.25); } .custom-prop-3 { @include fw-size(50px, no-responsive, 0.5); } .custom-prop-4 { @include fw-size(50px, no-responsive, 0.75); } .custom-prop-5 { @include fw-size(50px, no-responsive, 1); } .custom-prop-6 { @include fw-size(50px, no-responsive, 2); }
Short usageSemanticClassicCustomization
Heights

xxs, xs, sm, md, lg, xl, xxl, xxxl

Semantic
.my-elementSize { @include fw-size-base; @include fw-size(md); }
Classic
class="fw-size-lg"
<span class="my-elementSize">Hello!</span>
.my-elementSize { @include fw-size-base; @include fw-size(md); }
<span class="fw-size-lg">Hello!</span>

Customization is available only in Semantic version, with neccessary mixins.

// defaults: // ( // $height: null, // size name or number // $responsive: "no-responsive", // "responsive" or "no-responsive" // $proportion: 0.45 // proportion of width to height, (bigger = wider) // ) // "responsive" - size will be generated for all devices automatically // "no-responsive" - only static size will be generated .my-customSize { @include fw-size-base; @include fw-size(3em, responsive, 0.6); }
Custom breakpoints
.my-customSize { // include size-base only once @include fw-size-base; // set size for biggest screen @include fw-size(50px, no-responsive); // use no-responsive, to generate custom heights for each breakpoint // if you will use responsive - mixin will generate breakpoints // automatically, and you don't have to include the code below at all! // define breakpoints from largest to smallest screen @include fw-media(lg){ @include fw-size(40px, no-responsive); } @include fw-media(md){ @include fw-size(30px, no-responsive); } @include fw-media(sm){ @include fw-size(20px, no-responsive); } }

Material Color

Set color based on material design palette.
Background colorText color

available colors

red
pink
purple
deeppurple
indigo
blue
lightblue
cyan
teal
green
lightgreen
lime
yellow
amber
orange
deeporange
brown
grey
bluegrey
black
white

example: purple shades

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700

available shades

50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
A100
A200
A400
A700
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
50
100
200
300
400
500
600
700
800
900
500
500
indigo 50 Quo modo autem philosophus loquitur? Iam id ipsum absurdum, maximum malum neglegi.
indigo 100 Quo modo autem philosophus loquitur? Iam id ipsum absurdum, maximum malum neglegi.
indigo 200 Quo modo autem philosophus loquitur? Iam id ipsum absurdum, maximum malum neglegi.
indigo 300 Quo modo autem philosophus loquitur? Iam id ipsum absurdum, maximum malum neglegi.
indigo 400 Quo modo autem philosophus loquitur? Iam id ipsum absurdum, maximum malum neglegi.
indigo 500 Quo modo autem philosophus loquitur? Iam id ipsum absurdum, maximum malum neglegi.
indigo 600 Quo modo autem philosophus loquitur? Iam id ipsum absurdum, maximum malum neglegi.
indigo 700 Quo modo autem philosophus loquitur? Iam id ipsum absurdum, maximum malum neglegi.
indigo 800 Quo modo autem philosophus loquitur? Iam id ipsum absurdum, maximum malum neglegi.
indigo 900 Quo modo autem philosophus loquitur? Iam id ipsum absurdum, maximum malum neglegi.
Short usageSemanticClassic
Semantic
.my-element { background: fw-color(deeppurple, 800); color: fw-color(indigo, A100); }
Classic
class="fw-txt-indigo-A100 fw-bg-deeppurple-900"
<span class="my-element">Hello!</span>
.my-element { background: fw-color(deeppurple, 800); color: fw-color(indigo, A100); }
<span class="fw-txt-indigo-A100 fw-bg-deeppurple-900">Hello!</span>

Rounded corners

Example
ellipseroundroundedrounded-smrounded-mdrounded-lgrounded-xlcustom-1custom-2
Short usageSemanticClassicCustom
Semantic
.rounded-element { border-radius: $fw-rounded-md; }
Classic
class="fw-rounded-md"
<span class="rounded-element">Rounded</span>

Pick any of border radius from examples below

.rounded-element { border-radius: 100%; // ellipse border-radius: 100em; // round (circular) edges border-radius: $fw-rounded-sm; // small radius border-radius: $fw-rounded-md; // medium radius border-radius: $fw-rounded-lg; // large radius border-radius: $fw-rounded-xl; // extra large radius }
<span class="fw-ellipse">Rounded</span> <span class="fw-round">Rounded</span> <span class="fw-rounded">Rounded</span> <span class="fw-rounded-sm">Rounded</span> <span class="fw-rounded-md">Rounded</span> <span class="fw-rounded-lg">Rounded</span> <span class="fw-rounded-xl">Rounded</span>
<span class="custom-rounding">Custom Rounded</span>
.custom-rounding { // example (custom 1) // value order: top-left, top-right, bottom-right, bottom-left border-radius: $fw-rounded-xl $fw-rounded-sm $fw-rounded-xl $fw-rounded-sm; // example (custom 2) border-radius: 50% 50% 0 0; // only upper edges rounded }

Bar

Layout divided into side sections.
Height is always adjusted to fit the items.
ExampleVertical alignSelected sidesBreaking sections
center item
center item
left item
left item
right item
right item
center item
left item
right item
top
top
top
middle
middle
middle
bottom
bottom
bottom

Remove sides which are not necessary.

left and right

left item
right item

left

left item

center

center item

right

right item
center with break
left item
right item
Short usageSemanticClassic
Semantic
.my-bar { @include fw-bar; .my-bar-left, .my-bar-center, .my-bar-right { @include fw-bar-side; } .my-bar-left { text-align: left; } .my-bar-center { text-align: center; } .my-bar-right { text-align: right; } .my-bar-item { @include fw-bar-item; } }
Classic
<div class="fw-bar"> <div class="fw-bar-center"> <div class="fw-bar-item"><span>center item</span></div> <div class="fw-bar-item"><span>center item</span></div> </div> <div class="fw-bar-left"> <div class="fw-bar-item"><span>left item</span></div> <div class="fw-bar-item"><span>left item</span></div> </div> <div class="fw-bar-right"> <div class="fw-bar-item"><span>right item</span></div> <div class="fw-bar-item"><span>right item</span></div> </div> </div>
<div class="my-bar"> <div class="my-bar-center"> <div class="my-bar-item"><span>center item</span></div> <div class="my-bar-item"><span>center item</span></div> </div> <div class="my-bar-left"> <div class="my-bar-item"><span>left item</span></div> <div class="my-bar-item"><span>left item</span></div> </div> <div class="my-bar-right"> <div class="my-bar-item"><span>right item</span></div> <div class="my-bar-item"><span>right item</span></div> </div> </div>
.my-bar { @include fw-bar; .my-bar-left, .my-bar-center, .my-bar-right { @include fw-bar-side; } .my-bar-left { text-align: left; } .my-bar-center { text-align: center; } .my-bar-right { text-align: right; } .my-bar-item { @include fw-bar-item; } // optional - break sections for smaller devices @include fw-media(md){ .my-bar-left, .my-bar-center, .my-bar-right { display: block; text-align: left; } } // optional - vertical align items .my-bar-left { &, &.my-bar-item { vetical-align: top; // top | middle | bottom } } }
<div class="fw-bar"> <div class="fw-bar-center"> <div class="fw-bar-item"><span>center item</span></div> <div class="fw-bar-item"><span>center item</span></div> </div> <div class="fw-bar-left"> <div class="fw-bar-item"><span>left item</span></div> <div class="fw-bar-item"><span>left item</span></div> </div> <div class="fw-bar-right"> <div class="fw-bar-item"><span>right item</span></div> <div class="fw-bar-item"><span>right item</span></div> </div> </div>

Fill space

Create container which fills remaining width After or Before element.
Fill space demoDemo without fill space

Please note this demo uses no Javascript.

before fill space
after fill space

This block wil always fill remaining space between elements. Cras semper metus metus, quis scelerisque leo dapibus et. Vestibulum auctor quam vel tellus tincidunt condimentum. Praesent metus ante, vestibulum in eleifend vel, tristique in eros. Ut non vehicula nisi, et cursus tortor. Morbi viverra at leo in ultricies. Vivamus nec massa metus. Fusce ac turpis metus.



before fill space

This input text will stretch to remaining space.

before content

This input text will stretch to remaining space.

Short usageSemanticClassic
Semantic
.my-space { @include fw-space; .my-space-left { @include fw-space-left; } .my-space-right { @include fw-space-right; } .my-space-fill { @include fw-space-fill; } }
Classic
<div class="fw-space"> <div class="fw-space-left">left content</div> <div class="fw-space-right">right content</div> <div class="fw-space-fill">fill space</div> </div>
<div class="my-space"> <div class="my-space-left">left content</div> <div class="my-space-right">right content</div> <div class="my-space-fill">fill space</div> </div>
.my-space { @include fw-space; .my-space-left { @include fw-space-left; } .my-space-right { @include fw-space-right; } .my-space-fill { @include fw-space-fill; } }
<div class="fw-space"> <div class="fw-space-left">left content</div> <div class="fw-space-right">right content</div> <div class="fw-space-fill">fill space</div> </div>

Grid

Slice block into rows, then into responsive columns.
Very useful for building basement for layouts.
Grid demoResponsive gridResponsive grid & tiles
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-2
col-2
col-2
col-2
col-2
col-2
col-3
col-3
col-3
col-3
col-4
col-4
col-4
col-6
col-6

Resize the demo

Resize the demo

Short usageSemanticClassic
Semantic
$my-grid: ( columns: 12, gridWidth: 100% ); .my-grid { @include fw-generate-grid($my-grid); } .my-grid-row { @include fw-grid-row($my-grid); } .my-grid-col { @include fw-column-base($my-grid); } .my-col-6 { @include fw-generate-column(6, $my-grid); } .my-col-12 { @include fw-generate-column(12, $my-grid); }
Classic
<div class="fw-grid"> <div class="fw-grid-row"> <div class="fw-col-6">col-6</div> <div class="fw-col-6">col-6</div> </div> <div class="fw-grid-row"> <div class="fw-col-4">col-4</div> <div class="fw-col-4">col-4</div> <div class="fw-col-4">col-4</div> </div> </div>
<div class="my-grid"> <div class="my-grid-row"> <div class="my-grid-col my-col-6 my-col-md-12">col-6</div> <div class="my-grid-col my-col-6 my-col-md-12">col-6</div> </div> <div class="my-grid-row"> <div class="my-grid-col my-col-4 my-col-md-6">col-4</div> <div class="my-grid-col my-col-4 my-col-md-6">col-4</div> <div class="my-grid-col my-col-4 my-col-md-6">col-4</div> </div> </div>
// define default grid $my-grid: ( // grid size (pick 2 of 3 arguments below, third argument will be calculated): columns: 12, // I [full number] gridWidth: 100%, // II [px, %, 4/5] // columnWidth: 25%, // III [px, %, 4/5] // additional options (not required): spacingX: 10px, // [px] spacingY: 10px // [px] ); // generate style for default grid .my-grid { @include fw-generate-grid($my-grid); } // generate style for default rows .my-grid-row { @include fw-grid-row($my-grid); } // generate base style for columns .my-grid-col { @include fw-column-base($my-grid); } // single column sizing .my-col { @include fw-generate-column(6, $my-grid); // (6/12 = 50%) } // or multi column sizing .my-col { // generate my-col-1 ... 12 @for $col from 1 through map-get($my-grid, columns) { &-#{$col} { @include fw-generate-column($col, $my-grid); } } } // optional // define grid for medium devices $my-grid-md: ( columns: 12, // [full number] gridWidth: 100%, // [px, %, 4/5] spacingX: 0, // [px] spacingY: 0 // [px] ); @include fw-media(md){ // generate my-col-md-1 ... 12 .my-col-md { @for $col from 1 through map-get($my-grid-md, columns) { &-#{$col} { @include fw-generate-column($col, $my-grid-md); } } } // generate base style for medium columns .my-grid-col { @include fw-column-base($my-grid-md); } // generate style for grid on medium devices .my-grid { @include fw-generate-grid($my-grid-md); } // generate style for row on medium devices .my-grid-row { @include fw-grid-row($my-grid-md); } }

Column sizing classes:
default fw-col-1 ... 12 (1 = 1/12), (12 = 12/12 = 100%)

Column size for smaller devices:
extra large fw-col-xl-1 ... 12
large fw-col-lg-1 ... 12
medium fw-col-md-1 ... 12
small fw-col-sm-1 ... 12
extra small fw-col-xs-1 ... 12

<div class="fw-grid"> <div class="fw-grid-row"> <div class="fw-col-6 fw-col-md-12">col</div> <div class="fw-col-6 fw-col-md-12">col</div> <div class="fw-col-6 fw-col-md-12">col</div> </div> <div class="fw-grid-row"> <div class="fw-col-4 fw-col-md-6 fw-col-sm-12">col</div> <div class="fw-col-4 fw-col-md-6 fw-col-sm-12">col</div> <div class="fw-col-4 fw-col-md-6 fw-col-sm-12">col</div> </div> </div>

Justified bar

Use text justify to create bar of equal-spaced elements.
Example
item 1
item 2
item 3
item 4
Short usageSemanticClassic
Semantic
.my-justify { @include fw-justified; .my-just-item { @include fw-just-item; vertical-align: middle; } }
Classic
<div class="fw-justify"> <div class="fw-just-item">item 1</div> <div class="fw-just-item">item 2</div> <div class="fw-just-item">item 3</div> </div>
<div class="my-justify"> <div class="my-just-item">item 1</div> <div class="my-just-item">item 2</div> <div class="my-just-item">item 3</div> </div>
.my-justify { @include fw-justified; .my-just-item { @include fw-just-item; vertical-align: middle; } }
<div class="fw-justify"> <div class="fw-just-item">item 1</div> <div class="fw-just-item">item 2</div> <div class="fw-just-item">item 3</div> </div>

List

Convert elements to list of items with display block.
Demo with listDemo without list
item 1item 2item 3item 4
item 1item 2item 3item 4
Short usageSemanticClassic
Semantic
.my-list { @include fw-list; .my-list-item { @include fw-list-item; } }
Classic
<div class="fw-list"> <span class="fw-list-item">item 1</span> <span class="fw-list-item">item 2</span> <span class="fw-list-item">item 3</span> <span class="fw-list-item">item 4</span> </div>
<div class="my-list"> <span class="my-list-item">item 1</span> <span class="my-list-item">item 2</span> <span class="my-list-item">item 3</span> <span class="my-list-item">item 4</span> </div>
.my-list { @include fw-list; .my-list-item { @include fw-list-item; } }
<div class="fw-list"> <span class="fw-list-item">item 1</span> <span class="fw-list-item">item 2</span> <span class="fw-list-item">item 3</span> <span class="fw-list-item">item 4</span> </div>

Pile of items

ExampleVertical & Horizontal align
pile item
pile item
pile item
pile item

bottom

pile item
pile item
pile item
pile item

middle

pile item
pile item
pile item
pile item

top

pile item
pile item
pile item
pile item

left

pile item
pile item
pile item
pile item

center

pile item
pile item
pile item
pile item

right

pile item
pile item
pile item
pile item

Paragraph pile

Short usageSemanticClassic
Semantic
.my-pile { @include fw-pile; .my-pile-item { @include fw-pile-item; } }
Classic
<div class="fw-pile"> <div class="fw-pile-item"><span>pile item</span></div> <div class="fw-pile-item"><span>pile item</span></div> </div>
<div class="my-pile"> <div class="my-pile-item"><span>pile item</span></div> <div class="my-pile-item"><span>pile item</span></div> </div>
.my-pile { @include fw-pile; text-align: right; // optional: left | center | right .my-pile-item { @include fw-pile-item; vertical-align: middle; // optional: top | middle | bottom } }
<div class="fw-pile"> <div class="fw-pile-item"><span>pile item</span></div> <div class="fw-pile-item"><span>pile item</span></div> </div> <!-- vertical align --> <div class="fw-pile fw-pile-top"> <div class="fw-pile fw-pile-middle"> <div class="fw-pile fw-pile-bottom"> <!-- horizontal align --> <div class="fw-pile fw-pile-left"> <div class="fw-pile fw-pile-center"> <div class="fw-pile fw-pile-right"> <!-- vertical & horizontal align --> <div class="fw-pile fw-pile-center fw-pile-middle">

Position

Set position of the element relatively to it's parent.
Element may be placed in the corner, centered or on the edge of parent.
InsideOn edgeOutsideCustom

inside:

top-left
left
bottom-left
top
center
bottom
top-right
right
bottom-right
Positions

top-left, left, bottom-left, top, center, bottom, top-right, right, bottom-right

Semantic

Please note that positioning always require "position: relative" on parent element.

<div class="my-element"> <div class="positioned-item">item</item> </div>
.my-element { position: relative; .positioned-item { @include fw-position(top-right); } }
Classic
<div class="fw-relative"> <div class="fw-pos-top-right">item</item> </div>

on edge:

top-left-edge
left-edge
bottom-left-edge
top-edge
bottom-edge
top-right-edge
right-edge
bottom-right-edge
Positions

top-left-edge, left-edge, bottom-left-edge, top-edge, bottom-edge, top-right-edge, right-edge, bottom-right-edge

Semantic
<div class="my-element"> <div class="positioned-item">item</item> </div>
.my-element { position: relative; .positioned-item { @include fw-position(top-right, edge); } }
Classic
<div class="fw-relative"> <div class="fw-pos-top-right-edge">item</item> </div>

outside:

top-left-out
left-out
bottom-left-out
top-out
bottom-out
top-right-out
right-out
bottom-right-out

Positions

top-left-out, left-out, bottom-left-out, top-out, bottom-out, top-right-out, right-out, bottom-right-out

Semantic
<div class="my-element"> <div class="positioned-item">item</item> </div>
.my-element { position: relative; .positioned-item { @include fw-position(top-right, out); } }
Classic
<div class="fw-relative"> <div class="fw-pos-top-right-out">item</item> </div>

custom

Create custom offset of positioned item by using css translate X and Y.

Example
Custom offset

This will move item 50% to the left and 100% from top (of it's own width and height) from top-right position.
You can customize all positions listed in "Inside" Tab.

or Semantic
.my-element { position: relative; .positioned-item { @include fw-position(top-right); transform: translateX(-50%) translateY(100%); -webkit-transform: translateX(-50%) translateY(100%); } }

Please note that for old browsers you may also include prefixed translations such as:
-webkit-transform: ... (Chrome, newer versions of Opera.)
-moz-transform: ... (Firefox)
-o-transform: ... (Old versions of Opera)
-ms-transform: ... (Internet Explorer)

Table

Use table rows and columns to build equal height blocks,
present data or vertically align content.
Table demoVertical align content

simple table

column
column
column

nested tables

column
column
column
column
column
column
column
column
column
content top
content middle
content bottom

Paragraph table

Short usageSemanticClassicVertical alignNesting tables
Semantic
.my-table { @include fw-table; } .my-table-row { @include fw-table-row; } .my-table-col { @include fw-table-column; }
Classic
<div class="fw-table"> <div class="fw-table-row"> <div class="fw-table-col">column</div> <div class="fw-table-col">column</div> <div class="fw-table-col">column</div> </div> </div>
<div class="my-table"> <div class="my-table-row"> <div class="my-table-col">column</div> <div class="my-table-col">column</div> <div class="my-table-col">column</div> </div> </div>
.my-table { @include fw-table; } .my-table-row { @include fw-table-row; } .my-table-col { @include fw-table-column; // optional: vertical-align: middle; // top | middle | bottom }
<div class="fw-table"> <div class="fw-table-row"> <div class="fw-table-col">column</div> <div class="fw-table-col">column</div> <div class="fw-table-col">column</div> </div> </div>

Classic align

class="fw-table-col fw-table-top" class="fw-table-col fw-table-middle" class="fw-table-col fw-table-bottom"

Semantic align

.my-table-col { @include fw-table-column; vertical-align: middle; // top | middle | bottom }
// first table <div class="fw-table"> <div class="fw-table-row"> <div class="fw-table-col"> // nested table <div class="fw-table"> <div class="fw-table-row"> <div class="fw-table-col">column</div> <div class="fw-table-col">column</div> </div> <div class="fw-table-row"> <div class="fw-table-col">column</div> <div class="fw-table-col">column</div> </div> </div> </div> </div> </div>

Each table has to be nested in following pattern: table > row > column > table > row ...
Browsers such as Chrome and Firefox work properly with simpler: table > column > table > column ... patterns, but since Internet Explorer(10-) has problems inheriting heights, it's better to use w3c specified table > row > column pattern.

Please not that css has no "colspan" property. Each row has to contain same number of columns, unless you nest another table inside a column.

Clearfix

Restore height to container with floated elements.
Demo with clearfixDemo without clearfix
floated element
floated element
floated element
floated element
floated element
floated element
Short usageSemanticClassic
Semantic
@include fw-clearfix;
Classic
class="fw-clearfix"
<div class="my-container"> <div>floated element</div> <div>floated element</div> <div>floated element</div> </div>
my-container { @include fw-clearfix; }
<div class="fw-clearfix"> <div>floated element</div> <div>floated element</div> <div>floated element</div> </div>

Display

Change element's display property.
Example
inline
block
inline-block
flex
inline-flex
inline-table
list-item
table
table-caption
table-column-group
table-header-group
table-footer-group
table-row-group
table-cell
table-column
table-row
none
Short usageSemanticClassic
Semantic
.my-element { display: inline-block; }
Classic
class="fw-display-inline-block"
<span class="display-inline">Inline block element</span>
.display-inline { display: inline; } .display-block { display: block; } .display-inline-block { display: inline-block ; } .display-flex { display: flex; } .display-inline-flex { display: inline-flex; } .display-inline-table { display: inline-table; } .display-list-item { display: list-item; } .display-table { display: table; } .display-table-caption { display: table-caption; } .display-table-column-group { display: table-column-group; } .display-table-header-group { display: table-header-group; } .display-table-footer-group { display: table-footer-group; } .display-table-row-group { display: table-row-group; } .display-table-cell { display: table-cell; } .display-table-column { display: table-column; } .display-table-row { display: table-row; } .display-none { display: none; }
<div class="fw-display-inline">inline</div> <div class="fw-display-block">block</div> <div class="fw-display-inline-block">inline-block</div> <div class="fw-display-flex">flex</div> <div class="fw-display-inline-flex">inline-flex<br></div> <div class="fw-display-inline-table">inline-table</div> <div class="fw-display-list-item">list-item</div> <div class="fw-display-table">table</div> <div class="fw-display-table-caption">table-caption</div> <div class="fw-display-table-column-group">table-column-group</div> <div class="fw-display-table-header-group">table-header-group</div> <div class="fw-display-table-footer-group">table-footer-group</div> <div class="fw-display-table-row-group">table-row-group</div> <div class="fw-display-table-cell">table-cell</div> <div class="fw-display-table-column">table-column</div> <div class="fw-display-table-row">table-row</div> <div class="fw-display-none">none</div>

Ellipsis

Show three dots at the end of the line if paragraph is too long.
Demo with ellipsisDemo without ellipsis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam accumsan turpis. Phasellus dignissim felis pharetra orci gravida, et egestas mauris venenatis. Phasellus efficitur ligula lorem, eu fermentum nunc commodo at. Duis quis mi nunc. Nunc molestie augue quis felis consequat cursus. Ut accumsan posuere nunc, ut rutrum dolor consectetur et. Nulla malesuada faucibus tincidunt. In lobortis lacus a leo euismod, et mattis turpis sollicitudin. Duis nec erat at augue volutpat tempus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam accumsan turpis. Phasellus dignissim felis pharetra orci gravida, et egestas mauris venenatis. Phasellus efficitur ligula lorem, eu fermentum nunc commodo at. Duis quis mi nunc. Nunc molestie augue quis felis consequat cursus. Ut accumsan posuere nunc, ut rutrum dolor consectetur et. Nulla malesuada faucibus tincidunt. In lobortis lacus a leo euismod, et mattis turpis sollicitudin. Duis nec erat at augue volutpat tempus.

Short usageSemanticClassic
Semantic
.my-paragraph { @include fw-ellipsis; }
Classic
class="fw-ellipsis"
<p class="my-paragraph">Hello!</p>
.my-paragraph { @include fw-ellipsis; }
<p class="fw-ellipsis">Hello!</p>

Media Queries

Apply styling for specific screen size.
Read more about RWD
MediaMedia UpMedia DownCustom Range

Styling for maximum screen size:

size

Styling for specific device:

device

Sizes

xxs, xs, sm, md, lg, xl, xxl, watch, mobile, tablet, laptop, desktop.

Semantic

Media Queries are available only in Semantic version.

.my-element { @include fw-media(tablet){ // ...styling goes here... }; }
Alternative nesting
@include fw-media(tablet){ .my-element { // ...styling goes here... } };

Styling for minimum screen size:

size (and up)

Styling for minimum device size:

device (and up)

Semantic
@include fw-media-up(tablet){ // ...styling goes here... };
Custom breakpoint
@include fw-media-up(200px){ // ...styling for min-width 200px goes here... };

Styling for maximum device size:

device (and down)

Semantic
@include fw-media-down(tablet){ // ...styling goes here... };
Custom breakpoint
@include fw-media-down(200px){ // ...styling for max-width 200px goes here... };

Styling for custom range begin - end of screen size:

range (begin, end)

Semantic
@include fw-media(200px, 400px){ // ...styling goes here... };

Scale Properties

Scale Css properties relatively to width of the browser window.
Example: resizing browser can reduce font-size of the element.
Semantic

You can scale properties only in Semantic version.

.my-element { transition: all 0.25s; // optional - for smooth scaling @include fw-scale(( padding: (0 10px, 0 50px), font-size: (14px, 30px) )); }

property1: (begin value, end value),
property2: (begin value, end value)...
begin value means size for smallest device while end is for desktop.

Convert Unit

Convert css size units.
Some conversions are relative to browser defaults such as 16px for font-size.


10px to [px] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

11px to [em] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

12px to [ex] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

13px to [ch] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

14px to [rem] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

15px to [vw] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

16px to [vh] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

17px to [vmin] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

18px to [vmax] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

19px to [%] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

20px to [cm] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

21px to [mm] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

22px to [in] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

23px to [pt] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

24px to [pc] Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras fringilla ornare commodo. Ut suscipit aliquet quam, ut sodales enim aliquet vel.

Units

px, em, ex, ch, rem, vw, vh, vmin, vmax, %, cm, mm, in, pt, pc

Semantic usage
.my-element { font-size: fw-convert(2rem, px); // returns 32px }

syntax: fw-convert( input value , output unit );