scss-base A clean style base

This is a selection of styles that provide a clean default look for SCSS projects. The fonts used are Droid Sans and Droid Sans Mono. This also uses Normalize.css as a base style 'reset'.

Everything on this demo page is styled by scss-base, except for a single wrapper div to center the content and the navigation above.

There is no grid system, or any other kind of layout in scss-base. It is purely a set of styles.

In keeping with this, all form inputs are 100% width, so they can be handled by their parent elements.

All colors are set by a few variables, which can be overriden. The two main colors used are defined by the $color-primary and $color-secondary variables. The backgrounds of those code sections are those default colors. If you select text on the page, you will see it uses the primary color for the highlight.

Each section is separated by an <hr> element to demonstrate their styling.


Mixins

There is a clearfix mixin using the standard clearfix in case you need it.

Since I like using them, scss-base also includes some mixins for creating shadows. This is what they look like when used:

shadow-low
shadow-mid
shadow-high
shadow-float

Headers

All headers allow for the use of sub-titles by including text within a <span> element.

Header Level 1 Sub-Title 1

Header Level 2 Sub-Title 2

Header Level 3 Sub-Title 3

Header Level 4 Sub-Title 4

Header Level 5 Sub-Title 5
Header Level 6 Sub-Title 6

Blockquotes

Blockquotes are given a left side border of the primary color to stand out from surrouding text. They also have a slightly smaller font size.

A block quotation, or blockquote, is a quotation which is too long to be included inline.

It is usually indented to distinguish it from surrounding text, and may use a different typeface or size.

Typical Internet Dude

Lists

Definition lists have been minimally styled.

Definition List

Definition List Title
A definition list division looks like this.

Ordered and unordered lists have not been modified from their defaults (beyond what Normalize.css does).

Ordered List

  1. Order list item
  2. Order list item
  3. Order list item

Unordered List

  • Unordered list item
  • Unordered list item
  • Unordered list item

Tables

Tables span the full width of their container and are fully styled.

Table Caption
First Column Heading Second Column Heading Third Column Heading Fourth Column Heading
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 1 Cell 4
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Row 2 Cell 4
Row 3 Cell 1 Row 3 Cell 2 Row 3 Cell 3 Row 3 Cell 4
First Column Footer Second Column Footer Third Column Footer Fourth Column Footer

You can also apply the alternating class to a table for alternating rows.

Alternating Rows
First Column Heading Second Column Heading Third Column Heading
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1 Row 3 Cell 2 Row 3 Cell 3
Row 4 Cell 1 Row 4 Cell 2 Row 4 Cell 3
First Column Footer Second Column Footer Third Column Footer

Code

If you need to show keyboard commands the <kbd> element is styled to stand out. You may also include a title attribute to spell out a key's longer name. For example, pressing Ctrl + Shift + S is usually "Save As" (hover over "Ctrl"!).

All the sections you've seen that look like this are how inline code is styled.

You can also provide sample program output with the <samp> element, which looks like this and is an inline element.

Sometimes you need to show off a few lines of code. Using the nested elements <pre><code> produces this:

pre {
    code {
        display: block;
    }
}

Using the <pre> element alone produces a monospace block of text:

~ ! @ # $ % ^ & * ( ) _ +
` 1 2 3 4 5 6 7 8 9 0 - =
Q W E R T Y U I O P { } |
q w e r t y u i o p [ ] \


Other Text

This is all the inline text, some of which you've seen by now. Links have minimal styling to ensure consistency but are otherwise unchanged.

Important text should use the <strong> element. You can also emphasize important text with the <em> element. The same effect can be had stylistically, by using the <b> element or the <i> element. Underlining with the <u> element does not behave the same as links. Don't forget <s> element for strikethrough.

The same styles can also be achieved with the <del> element or the <ins> element, though these have different semantic meaning, much like the difference between strong and b.

There are also superscripts if you're into math2, and subscripts for you scientists (H2O).

When you need some fine print, just use the <small> element.

Abbreviations are styled to indicate there is something to see: HTML

The <q> element is for a short inline quotation. The <cite> element is used for a citation and can embed a link. To define something, use the <dfn> element. Visually, it ends up the same as the <var> element.

If you want to highlight some text, just use the <mark> element for that as it has been styled to look like highlighter yellow.


Buttons

By default, buttons use the primary color for their background and borders.

Link Button

Adding the class accent will use the secondary color instead.

Link Button

Alternately, you can use the flat class to remove colors and match form inputs.

Link Button

The last button in each example above is a simple link with a btn class applied.


Forms

The <form> element provides a card-like look to stand out from the surrounding page. The <fieldset> and <legend> elements are also styled for a cohesive look.

Note that inputs are styled to use borders and highlights for each state, and not use the browser's default input selection style. Also, labels use a pointer cursor to indicate they can be clicked to select an input.

Inputs
Selections

Checkboxes

Radio Buttons

Customized Checkbox/Radio Inputs

The radio buttons and checkboxes use the primary and accent colors. The toggle colors are defined separately.

Toggle Switches (really just fancy checkboxes)

  After the label...
  ... or before it.

Usage:

<label>
    Your Text Here
    <input type="checkbox" class="hidden">
    <span class="toggle"></span>
    And/Or Text Here
</label>

Checkboxes

Usage:

<label>
    Your Text Here
    <input type="checkbox" class="custom">
    <span class="custom-target"></span>
    And/Or Text Here
</label>

Radio Buttons

Usage:

<label>
    Your Text Here
    <input type="radio" class="custom">
    <span class="custom-target"></span>
    And/Or Text Here
</label>
Textareas
HTML5 Inputs

Only the <color> and <range> elements have been given any additional styles.


Embedded Elements

Only images and iframes have been styled. Other embedded elements have been left alone for now.

Images

Images are left pretty much alone in their default state.

When an image is inside a <figure> element, it is given a border and shadow.

And when there is a <figcaption> element with it, it is styled like so:

This is the caption for the image

Iframes

The iframe element has some basic styling to make it stand out.