Use a CDN

"Style-Cheat CSS" is available at jsdelivr CDN.

<!-- Use Style-Cheat CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/style-cheat/css@1.0/dist/style-cheat.css" />

<!-- Use Style-Cheat CSS (minified)-- >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/style-cheat/css@1.0/dist/style-cheat.min.css" />
          

System Fonts

"Style-Cheat CSS" is using System Fonts. This should ensure, that a website is integrating well into the OS Environment.

Base Colors

You will find some very basic color information in the base module. You will find the following colors for some default contrast, font and background colors.

Base Borders

Some basic definitions for borders are made to provide a consitent look and feel. A border-radius of .25rem and a border-width of1px are the defaults.

Media Queries

The media query breaking points are defined here, too. "Style-Cheat CSS" is using the rem unit for nearly all definitions. This value is based on the browser default. Most browsers are having a default of 1rem = 16px. With the definitions for the breaking points, you will get the following options.

// Media Query Break Points
// Undefined = 0 - 25.99rem

// Large Phones (416px width)
@sm: 26.0rem;

// Tablets (752px width)
@md: 47.0rem;

// Notebooks and Desktops (1200px width)
@lg: 75.0rem;
          

Headings

Headings are slightly styled for a simpler look.

Heading <h1> 1.75rem = 28px

Heading <h2> 1.50rem = 24px

Heading <h3> 1.375rem = 22px

Heading <h4> 1.25rem = 20px

Heading <h5> 1.125rem = 18px

Heading <h6> 1.00rem = 16px

Inline elements

There are only some very minor changes to margins and font-size for better readability and look.

Strong <strong> 16px

Emphasis <em> 16px

Mark <mark> 16px

Small <small> 12px

Delete <del> 16px

Insert <ins> 16px

_Subscript text <sub> 12px

^Superscript text <sup> 12px

Heading Formats

Sometimes the given <h1> tags are not enough to distinguish one section from another. The heading format will give you some more control over headings.

<!-- A huge heading (3rem) -->
<h1 class="page-heading">Page Heading</h1>

<!-- A heading with a solid bottom border -->
<h2 class="section-heading">Section Heading</h2>

<!-- A heading with a dashed bottom border -->
<h3 class="sub-heading">Sub Heading</h3>
          

Text Format

You can also easily align content with "Style-Cheat CSS".

<!-- Align text left -->
<p class="text-left">Left</p>

<!-- Align text centered -->
<p class="text-center">Center</p>

<!-- Align text right -->
<p class="text-right">Right</p>
          

Example:

Text Box

Sometimes, you want to "box" your content. The class="text-box" can be used for this purpose and can be combinded with the decoration module.

<!-- Simple Textbox -->
<div class="text-box">
  <strong>Standard</strong>
  <p>This is a standard text box.</p>
</div>

<!-- Textbox + decoration -->
<div class="text-box bg-primary">
  <strong>Primary</strong>
  <p>This is a primary colored text box.</p>
</div>
          

Example:

Container (72rem)

You can define a container, that grows to a maximum of 72rem (1200px).

<!-- Will scale to a maximum of 75rem -->
<div class="container">
...
</div>
          

Container Fluid (100%)

You can define a container, that grows to the size of the viewport.

<!-- Will always scale to 100% -->
<div class="container-fluid">
...
</div>
          

Simple Grid

The simplest example of a grid will arrange your content dynamically and adjust the size based on the viewport.

<div class="row">
  <div class="col">
    <div class="box">
      Content One
    </div>
  </div>
  <div class="col">
    <div class="box">
      Content Two
    </div>
  </div>
</div>
          

Example:

Default Buttons

You can use the button for all of your "button neeeds".

<!-- Anchor Button -->
<a href="#" class="button">Anchor Button</a>

<!-- Button -->
<button>Button</button>

<!-- Input Button -->
<input class="button" type="button" value="Input Button"></input>

<!-- Submit Button -->
<input class="button" type="submit" value="Submit Button"></input>

<!-- Reset Button -->
<input class="button" type="reset" value="Reset Button"></input>
          

Example:

Button Sizes

Buttons can have different sizes.

<!-- Large Button -->
<a href="#" class="button-lg">Large Button</a>

<!-- Standard Button -->
<a href="#" class="button">Standard Button</a>

<!-- Small Button -->
<a href="#" class="button-sm">Small Button</a>
          

Example:

Button Colors

The button module can be combined with the decoration module to define colored buttons.

You can change foreground and background colors.

<!-- Standard Button -->
<a href="#" class="button">Standard Button</a>

<!-- Primary Button -->
<a href="#" class="button bg-primary">Primary Button</a>

<!-- Success Button -->
<a href="#" class="button bg-success">Success Button</a>

<!-- Warning Button -->
<a href="#" class="button bg-warning">Warning Button</a>

<!-- Alert Button -->
<a href="#" class="button bg-alert">Alert Button</a>

<!-- Gray Button -->
<a href="#" class="button bg-gray fg-light">Gray Button</a>

<!-- Dark Button -->
<a href="#" class="button bg-dark fg-light">Dark Button</a>
          

Example:

Unordered lists

Using unordered lists works as always.

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <ul>
    <li>Subitem</li>
    <li>Subitem</li>
  </ul>
  <li>Item</li>
</ul>
          

Example:

• Item
• Item
• Item
• Subitem
• Subitem
• Item

Ordered lists

Ordered lists are working as always.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>
          

Example:

1. Item 1
2. Item 2
3. Item 3
4. Item 4

Description Lists

For a better look, description lists have seen an update. dt elements are bolded. dd has margin-left: 1rem.

<dl>
  <dt>Alice</dt>
  <dd>Who the fuck is ...</dd>
  <dt>Bob</dt>
  <dd>Read it backwards...</dd>
</dl>
          

Example:

Alice

Who the fuck is ...

Bob

Read it backwards...

List Stylings

Sometimes, styling a list is nescessary. Currently 2 styling classes are supported.

You can use class="list-unstyled" to get a list without any styling.

<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
          

Example:

• Item 1
• Item 2
• Item 3
• Item 4

With class="list-inline", you can also have an inline list. It will have no styling, too.

<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
          

Example:

• Item 1
• Item 2
• Item 3
• Item 4

Inline Code

For inline code, Style-Cheat sets background: @gray and padding-left/padding-right: .3rem.

<p>My cool <code>Inline Code</code> goes here.</p>
          

Example:

My cool Inline Code goes here.

Keyboard / User Input

Use the <kdb>to indicate input that is typically entered via keyboard.

<p>You have to press <kbd>Alt</kbd> + <kbd>F4</kbd> to close the application.</p>
          

Example:

You have to press Alt + F4 to close the application.

Code Blocks

Code Blocks can be used to present huge chunks of source code, terminal commands, etc.

<pre><code>
#!/bin/bash
function hello {
  echo Hello!
}
</code></pre>
          

Example:

#!/bin/bash
function hello {
  echo Hello!
}
          

Sample Output

If you want to present some output of a command, you can do this with the <samp> tag. It is slightly adjusted, to differentiate better from the normal text.

<samp>Output of some command</samp>
          

Example:

Variables

The <var> tag can be used to present variables.

Example:

<var>Name=Alice</var>, <var>x=3.141...</var>, <var>int myCoolInteger</var>
          

Example:

Simple Tables

You can add class="table" to your table definitions and you will see an immediate effect.

<table class="table">
  ...
</table>
          

Example:

Striped Table

You can also use class="table-striped" to have a better distinction of the rows.

<table class="table-striped">
  ...
</table>
          

Example:

Decoration Colors

You can colorize your text and elements with some prepared classes.

<!-- Colored Text -->
<p class="fg-alert">Some alert text!</p>

<!-- Colored Buttons -->
<a href="#" class="button bg-alert">Critical button</a>
<a href="#" class="button bg-success">Success button</a>

<!-- Colored Textboxes -->
<div class="text-box bg-warning">
  <strong>Warning</strong>
  <p>This is a warning information.</p>
</div>
          

Example:

Some alert text!

Decoration Elements

The following elemements are handled as decoration.

            <!-- horizontal line -->
            <hr />
          

Example:

There is an <hr /> below.

There is an <hr /> above

Float and Clearfix

Floating content left or right is a very common scenario.

<p>Not floating</p>
<div class="clearfix">
  <p class="float-left">Left floating</p>
  <p class="float-right">Right floating</p>
</div>
<p>Not floating</p>

          

Example:

Not floating

Not floating

Hidden / Visible Elements

Sometimes, it can be handy to make elements visible for larger devices only.

<p>Always visble</p>
<p class="visible-sm">Visible on large phones and above</p>
<p class="visible-md">Visible on tablets and above</p>
<p class="visible-lg">Visible on desktops and notebooks</p>
            

Example:

Always visble

Visible on larger phones and larger

Visible on tablets and larger

Visible on desktops and notebooks

Enable / Disable Modules

If you don't want some modules, because you are having your own styles or they conflict with other elements, you can easily disable modules in the style-cheat.sass file.

// main
@import 'main/base'

// modules
@import 'modules/button'
@import 'modules/code'
@import 'modules/container'
@import 'modules/decoration'
// @import 'modules/figure'
@import 'modules/link'
@import 'modules/form'
@import 'modules/grid'
@import 'modules/list'
@import 'modules/quote'
@import 'modules/table'
@import 'modules/text'
@import 'modules/typography'
@import 'modules/utility'
          

After editing the file, you need to use a sass compiler to generate your new style-cheat.css.

<-- Generate CSS -->
sass src/style-cheat.sass dist/style-cheat.css

<-- Generate minified CSS -->
sass src/style-cheat.sass dist/style-cheat.min.css --style=compressed
          

Customize a Module

Customizing a module to your needs is easy, too. Just open the module file and tune it to your needs. Afterwards, you need to re-compile the code with the sass compiler.

<-- Generate CSS -->
sass src/style-cheat.sass dist/style-cheat.css

<-- Generate minified CSS -->
sass src/style-cheat.sass dist/style-cheat.min.css --style=compressed