Get the Classic version from Get it section.
You may stop here because .zip file contains ready to use html template.
After downloading and unzipping the file - copy csstetic.css to your project folder.
Link to stylesheet by pasting following code in HEAD of your html file.
Get the Semantic version from Get it section.
You may stop here because .zip file contains ready to use html and scss template.
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.
Import scss files your style.scss file.
Compile style.scss file by using Sass Compiler of your choice.
Link to stylesheet by pasting following code in HEAD of your html file.
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%
.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%
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.
xxs, xs, sm, md, lg, xl, xxl, xxxl, hg
You can also use Scale Properties to create scalable text of custom size.
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 aligned to left
centered text
text aligned to right
Example on table cells. Works on inline-block elements as well.
Floating requires clearfix on parent element;
Resize this demo and see how elements adapt to width of the screen.
xxs, xs, sm, md, lg, xl, xxl, xxxl
Customization is available only in Semantic version, with neccessary mixins.
Pick any of border radius from examples below
Please note this demo uses no Javascript.
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.
This input text will stretch to remaining space.
This input text will stretch to remaining space.
Resize the demo
Resize the demo
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
Paragraph pile
top-left, left, bottom-left, top, center, bottom, top-right, right, bottom-right
Please note that positioning always require "position: relative" on parent element.
top-left-edge, left-edge, bottom-left-edge, top-edge, bottom-edge, top-right-edge, right-edge, bottom-right-edge
top-left-out, left-out, bottom-left-out, top-out, bottom-out, top-right-out, right-out, bottom-right-out
Create custom offset of positioned item by using css translate X and Y.
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.
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)
Paragraph table
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.
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.
Styling for maximum screen size:
Styling for specific device:
xxs, xs, sm, md, lg, xl, xxl, watch, mobile, tablet, laptop, desktop.
Media Queries are available only in Semantic version.
Styling for minimum screen size:
Styling for minimum device size:
Styling for maximum device size:
Styling for custom range begin - end of screen size:
You can scale properties only in Semantic version.
property1: (begin value, end value),
property2: (begin value, end value)...
begin value means size for smallest device while end is for desktop.
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.
px, em, ex, ch, rem, vw, vh, vmin, vmax, %, cm, mm, in, pt, pc
syntax: fw-convert( input value , output unit );