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.

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

Tables

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

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

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 math², and subscripts for you scientists (H₂O).

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.

Button Link Button

Adding the class accent will use the secondary color instead.

Button Link Button

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

Button 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.

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

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

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

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:

Iframes

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