Stylie

Stylie is a barebones CSS framework generator for professionally designed style guides.

Getting started with stylie

Stylie is designed to generate responsive CSS frameworks from professionally designed style guides.

The generated framework uses CSS EM units and 12 column, percentage width based grids.

Other CSS frameworks

There are a lot of excellent comprehensive CSS frameworks to choose from; however, if you already possess a fully featured style guide, it can become rather tedious to roll back the default styles from larger frameworks.

Many large CSS frameworks also come with JavaScript dependencies, which add additional (but in many cases, unnecessary) functionality. The additional JavaScript dependencies can add additional unwanted weight to your application.

Stylie generated style guides are always name-spaced (by default with [ts]), such that styles may be contained within specific elements and will not conflict with other CSS style definitions.

Stylie generated style guides are designed to provide a workstream for generating a comprehensive and bespoke framework suited for your exact specifications.

Methodology

Most CSS class definitions have six different size class modifiers

xs - extra small
sm - small
md - medium
lg - large
xl - extra large
xx - extra huge

Manipulating variables.less can modify the default size and percent values

The CSS class names follow the [namespace]-[property]-[value] naming convention. For example:

.ts-text-xl - extra large text
.ts-text-accent-color - accent colored text
.ts-float-right -
floated right element

The verbose naming convention is intended to make generating composite LESS classes and prototyping HTML element CSS classes extremely efficient.

Colors Standard Palette

There are eight basic colors; they can be customized by modifying variables.less

The color naming convention is based on Google's Material Design pattern (reference palettes: www.materialpalette.com).

Dark Primary Color

Primary Color

Light Primary Color

Text Primary Color

Accent Color

Primary Text Color

Secondary Text Color

Divider Color

Dark Error Color

Error Color

Light Error Color

Borders

The border class names follow the [namespace]-border-[color name] naming convention.

.ts-border-dark-primary-color .ts-border-primary-color .ts-border-light-primary-color .ts-border-text-primary-color .ts-border-accent-color .ts-border-primary-text-color .ts-border-secondary-text-color .ts-border-divider-text-color .ts-border-dark-error-color .ts-border-error-color .ts-border-light-error-color

Backgrounds

The background class names follow the [namespace]-background-[color name] naming convention.

.ts-bg-dark-primary-color .ts-bg-primary-color .ts-bg-light-primary-color .ts-bg-text-primary-color .ts-bg-accent-color .ts-bg-primary-text-color .ts-bg-secondary-text-color .ts-bg-divider-text-color .ts-bg-dark-error-color .ts-bg-error-color .ts-bg-light-error-color

Text

The text class names follow the [namespace]-text-[color name] naming convention.

.ts-text-dark-primary-color .ts-text-primary-color .ts-text-light-primary-color .ts-text-text-primary-color .ts-text-accent-color .ts-text-primary-text-color .ts-text-secondary-text-color .ts-text-divider-text-color .ts-text-dark-error-color .ts-text-error-color .ts-text-light-error-color

Shadows

.ts-shadow .ts-shadow .ts-shadow

Typography fonts, sizes and alignment

The default headings have a serif typeface (lyontext), the body copy uses a sans-serif typeface (potano).

H1 Heading.

H2 Heading.

H3 Heading.

H4 Heading.

H5 Heading.

H6 Heading.

Remove margin from headings with .ts-no-heading-margin

Body and fonts

Body Copy (sans-serif) <p>

Summary & Details Text (serif) <summary>, <details>

Font Classes

.ts-serif

 .ts-serif
      
 font-family: ebgaramond,garamond,Georgia,serif;

.ts-serif-clean


      .ts-serif-clean
        
 font-family: lyontext,garamond,Georgia,serif;

.ts-sans-serif


      .ts-sans-serif
        
 font-family: pontano,"Helvetica Neue",Helvetica,Arial,sans-serif;

Alignment Classes

.ts-text-left

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec.

.ts-text-right

.ts-text-center

.ts-text-justify

Line Height

.ts-line-height-xs

.ts-line-height-sm

.ts-line-height-md

.ts-line-height-lg

.ts-line-height-xl

.ts-line-height-xx

Lists Classes

Ordered List <ol>

Maecenas sed diam eget risus varius blandit sit amet non magna.
Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Unordered List <ul>

Maecenas sed diam eget risus varius blandit sit amet non magna.
Donec id elit non mi porta gravida at eget metus.
Duis mullis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Horizontal Unordered List <ul.ts-ul-inline-block>

Maecenas
Sed
Donec
Duis

Layout Grid System, and positioning

There's a basic 12 column grid that's percent based. Rows and columns can be nested, and the box sizing property is set to: border-box

Basic Grid .ts-row

Example: 12 columns

.ts-col-span1

Example: Mixed column size examples

.ts-col-span2

.ts-col-span4

.ts-col-span2

.ts-col-span3

.ts-col-span6

.ts-col-span3

.ts-col-span8

.ts-col-span4

.ts-col-span9

.ts-col-span3

.ts-col-span7

.ts-col-span5

.ts-col-span10

.ts-col-span2

.ts-col-span12

Nested Grid .ts-row

Example: Nested Rows and Columns

.ts-col-span12

.ts-col-span8

.ts-col-span4

.ts-col-span6

Responsive Grid .ts-row

Example: Responsive grids

.ts-col-span6 .ts-screenmd-col-span8 .ts-screensm-col-span12

.ts-col-span6 .ts-screenmd-col-span4 .ts-screensm-col-span12

.ts-col-span3 .ts-screenmd-col-span4 .ts-screenxs-col-span6

Positioning

Floats

HTML elements can use short hand classes to define the CSS float property

.ts-pull-left / .ts-float-left

.ts-pull-right / .ts-float-right

HTML elements can also use short hand classes to define the CSS clear property

.ts-clear-left - clear left
.ts-clear-right - clear right
.ts-clear-both - clear both

Z-index

.ts-z-index-1 .ts-z-index-10 .ts-z-index-100 .ts-z-index-1000

HTML elements can use short hand classes to define the four preset CSS z-index properties

.ts-z-index-1 - z-index:1
.ts-z-index-10 - z-index:10
.ts-z-index-1000 - z-index:1000
.ts-z-index-10000 - z-index:10000

Positions

The respective CSS position properties have appropriate short-handed class names

.ts-position-absolute
.ts-position-fixed
.ts-position-relative
.ts-display-inline-block
.ts-display-block

There are also short hand classes to absolutely postion elements

.ts-position-top
.ts-position-left
.ts-position-right
.ts-position-bottom

There's one special position helper class to position elements vertically in the center of a parent element (The parent element must be positioned relatively).

.ts-vertical-center

Box sizing

HTML elements grid level elements are border-box sized

Margins

HTML elements can also use short hand classes to define the the size of the CSS margin property

.ts-no-margin

.ts-margin-xs

.ts-margin-sm

.ts-margin-md

.ts-margin-lg

.ts-margin-xl

.ts-margin-xx

Paddings

HTML elements can also use short hand classes to define the the size of the css padding property

.ts-no-padding

.ts-padding-xs

.ts-padding-sm

.ts-padding-md

.ts-padding-lg

.ts-padding-xl

.ts-padding-xx

Height & Width

Height

.ts-height-10

.ts-height-25

.ts-height-33

.ts-height-50

.ts-height-100

.ts-height-90

.ts-height-75

.ts-height-66

Width

.ts-width-10

.ts-width-25

.ts-width-33

.ts-width-50

.ts-width-66

.ts-width-75

.ts-width-90

.ts-width-100

Containers

Height containers

.ts-container-margin-xx

.ts-container-margin-xl

.ts-container-margin-lg

.ts-container-margin-md

.ts-container-margin-sm

.ts-container-margin-xs

Width containers

.ts-container

.ts-text-container

.ts-container-margin-auto

Content containers

The content based containers are used to define margins for content layouts

.ts-no-x-overflow

.ts-md-spacing-padding

.ts-xl-spacing-margin

There are two additional overflow constraints

.ts-no-y-overflow: for preventing y-overflow
.ts-no-overflow: for preventing all overflows

Responsive media queries

The screen[xs:xx] naming convention is used to control the responsive elements by media query.

The default size and percent values can be modified by manipulating variables.less

Visibility

It's possible to hide elements based on the size of the screen

.ts-screenxs-hidden - hide element when screen is extra small sized
.ts-screensm-hidden - hide element when screen is small sized
.ts-screenmd-hidden - hide element when screen is medium sized
.ts-screenlg-hidden - hide element when screen is large sized
.ts-screenxl-hidden - hide element when screen is extra large sized
.ts-screenxx-hidden - hide element when screen is extra huge sized

Grid

You can set the size of a column based on the screen size using the screen[xs:xx] naming convention

.ts-screenxs-col-span3 - span 3 columns when screen is extra small sized
.ts-screensm-col-span5 - span 5 columns when screen is small sized
.ts-screenmd-col-span2 - span 2 columns when screen is medium sized
.ts-screenlg-col-span1 - span 1 column when screen is large sized
.ts-screenxl-col-span12 - span 12 columns when screen is extra large sized
.ts-screenxx-col-span8 - span 8 columns when screen is extra huge sized

Layout

You can set the height and width of a column based on the screen size using the screen[xs:xx] naming convention

.ts-screenxs-width-100 - width set to 100% when screen is extra small sized
.ts-screensm-height-33 - height set to 33% when screen is small sized
.ts-screenmd-width-66 - width set to 66% when screen is medium sized
.ts-screenlg-width-10 - width set to 10% when screen is large sized
.ts-screenxl-height-75 - height set to 75% when screen is extra large sized

Nav Elements

The nav links will collapse when the screen is smaller than @navcollapse

Customize default values

The default size and percent values can be modified by manipulating variables.less

EM Size

@sizexs: .1em;
@sizesm: .25em;
@sizemd: .5em;
@sizelg: 1em;
@sizexl: 3em;
@sizexx: 5em;

Percent Size

@percentxs: 70%;
@percentsm: 85%;
@percentmd: 100%;
@percentlg: 115%;
@percentxl: 130%;
@percentxx: 150%;

Colors

@darkPrimaryColor: #455A64;
@primaryColor: #607D8B;
@lightPrimaryColor: #CFD8DC;
@textPrimaryColor: #FFFFFF;
@accentColor: #03A9F4;
@primaryTextColor: #212121;
@secondaryTextColor: #727272;
@dividerColor: #B6B6B6;
@darkErrorColor: #D32F2F;
@errorColor: #F44336;
@lightErrorColor: #FFCDD2;

Typography

@heading-size: 3em;
@maxtextwidth: 36em;
@line-height: 2;

Media Query Screen

@screenxs: 20em;
@screensm: 29em;
@screenmd: 32em;
@screenlg: 50em;
@screenxl: 70em;
@screenxx: 90em;

Media Query Heading

@headingxs: .4em;
@headingsm: .6em;
@headingmd: 1.2em;
@headinglg: 1.2em;
@headingxl: 1.2em;
@headingxx: 1.2em;

Style Guide

Tables

Id	Name	Email	Phone
0928IFJDAOS8FSAJ	John Smith	johnsmith@example.com	555-555-5555
0928IFJDAOS8FSAJ	John Smith	johnsmith@example.com	555-555-5555
0928IFJDAOS8FSAJ	John Smith	johnsmith@example.com	555-555-5555
0928IFJDAOS8FSAJ	John Smith	johnsmith@example.com	555-555-5555
0928IFJDAOS8FSAJ	John Smith	johnsmith@example.com	555-555-5555
0928IFJDAOS8FSAJ	John Smith	johnsmith@example.com	555-555-5555
Id	Name	Email	Phone

Forms