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.
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
All headers allow for the use of sub-titles by including text within a <span>
element.
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
Definition lists have been minimally styled.
Ordered and unordered lists have not been modified from their defaults (beyond what Normalize.css does).
Tables span the full width of their container and are fully styled.
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.
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 |
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 [ ] \
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 or
the <del>
element<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
The <q>
element is for a short
inline quotation.<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.
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.
Only images and iframes have been styled. Other embedded elements have been left alone for now.
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:
The iframe element has some basic styling to make it stand out.