General
Markup
Spark uses HTML5 and many CSS3 properties with graceful fallbacks for older browsers and those browsers that just don’t want to play nice with the rest of the team.
Your doctype must be <!DOCTYPE html>
Mobile First
The growth of mobile web has exploded in recent years. Almost a quarter of all web requests come from mobile devices now and it’s just not acceptable to serve them a subset of content. It’s time to change things up. Spark begins with a stylesheet targeted at mobile devices and shuffles things around for larger screen sizes.
Compatibility
It’s time to leave old browsers in the past. Gone are the days of IE6/7 hacks and several conditional stylesheets. Spark supports all major browsers and a minimum of Internet Explorer 8. With regard to IE8, Spark supports the browser on a functional level and not an aesthetic level. The IE8 browser will be served a layout based on the mobile layout.
LESS
Spark uses the LESS preprocessor language for more control over standard CSS within the framework. Spark uses some easy to use variables and mixins to achieve a very customizable framework. For the most part, you only need to use the variables to achieve more/less columns, different colors, wider/narrower margins etc.
When you download Spark, you’ll see it includes a blank file called custom.less. This file is for you to add your own LESS code if you want to add your own stuff to your version of Spark but don’t want to mess around with the core LESS files.
@import
We’d like to credit the fantastic work by Font Awesome, Normalize.css and HTML5 Shim/Shiv which we use in Spark. Their hard work helps to make Spark a more consistent, beautiful framework. We appreciate all the time and work the creators and contributors put into these projects to advance web design and development.
Base Colors
Spark comes with a selection of predefined colors for things like buttons, alerts, badges etc. The colors currently available are: silver (default), blue, green, orange, red, purple, lime, dragonfruit and the new cosmic.
We’ll be adding a color generator which will allow you to generate LESS code to put in your custom.less file, allowing pretty much instant use of a new color in all elements that use the base colors.
Minimal
The main point behind Spark is that it is designed to be nonintrusively minimal. We only apply default styles to the absolute basics. It may seem like a little more effort to add a class of .form to a form element but it makes overriding much more streamlined, specially if you’re using the full version of Spark and want to quickly restyle your own blockquotes for example.
Typography
Headings
Headings are available from H1 to H6 preformatted. They are sized as percentages with respect to the base font size of 14px.
H1 Heading |
300% (42px) |
H2 Heading |
250% (35px) |
H3 Heading |
220% (28px) |
H4 Heading |
180% (25px) |
H5 Heading |
140% (20px) |
H6 Heading |
110% (15px) |
<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>Super Skinny Headings
Make a heading super skinny by giving it a class of .super-skinny.
Super Skinny Heading
Super Skinny Headings (global)
Super skinny headings can be applied globally by adding class .super-skinny-headings to the <body> tag. This can be overridden on a per-heading basis by using .base-weight, .heavy or .heavier on individual <h> tags.
Be aware that not everyone has Helvetica Neue in font weight 100. Not even everyone has Helvetica Neue! Use with caution.
Heavy Headings
Make a heading heavy by giving it a class of .heavy.
Heavy Heading
<h1 class="heavy">Heavy Heading</h1>Heavy Headings (global)
Globally heavy headings can be applied by adding class .heavy-headings to your <body> tag.
Heavier Headings
Make a heading heavier still by giving it a class of .heavier.
Heavier Heading
<h1 class="heavier">Heavier Heading</h1>Heavier Headings (global)
Globally heavier headings can be applied by adding class .heavier-headings to your <body> tag.
HeroType
Make a headings a bit tighter (poster style kerning, smaller bottom margin) with the .herotype class.
Hero Heading
Heavy Hero Heading
<h1 class="herotype">Hero Heading</h1>
<h1 class="heavy herotype">Heavy Hero Heading</h1>Page Heading
Sometimes you might want a heading in a row but you don’t want to put it inside a column element because it throws off the balance of the elements (the top of adjacent columns would be at the top of the <h> tag). Just take the <h> tag outside of the column and into the root of the .row (or .container) element and give it a class of .page-heading. This gives it a left margin and 100% width so all columns clear it.
Tail
You can add a tail to an h tag using the .alt class on a span within the tag.
H1 Heading with a sub |
<h1>This is an H1 heading <span class="alt">with a tail</span></h1>Underline
Underline a heading by adding the class .underlined
This heading is underlined
Text Shadow
Make a heading jump out a little (useful on backgrounds where readability is not optimal) by adding the class .text-shadow
This heading is casting a shadow
Shadow too strong? Add the extra class .subtle
This heading is casting a shadow
.text-shadow can be applied to any typography.
Copy
Copy text is set at a base font size of 14px with a line height of 1.5, font weight of 400 and left justified.
The LESS variables @base-font-size and @base-line-height set the base font size in px and the line height (unitless) respectively.
Leading Copy
Make copy lead (larger, more prominent) by adding the class .leading
Lorem ipsum dolor sit amet, ei pro suas mollis percipit. Te usu alii molestie, est an omnes scripta iracundia. Ex vis enim debitis percipit, ei quo facilisi iracundia.
<p class="leading">Lorem ipsum dolor sit amet, ei pro suas mollis percipit. Te usu alii molestie, est an omnes scripta iracundia. Ex vis enim debitis percipit, ei quo facilisi iracundia.</p>Copy Weight
Alter copy weight by adding one of the classes .super-skinny, .skinny, .base-weight, .heavy or .heavier.
This paragraph has a mixture of super skinny, skinny, heavy and heavier weights.
<p>This paragraph has a mixture of <span class="super-skinny">super skinny</span>, <span class="skinny">skinny</span>, <span class="heavy">heavy</span> and <span class="heavier">heavier</span> weights.</p>Semantically, if you want to emphasise a section of a paragraph you should use <strong> tags with these classes.
Small Copy
Make copy small by using <small> tags or adding the class .small.
Aligning Copy
Align copy left, right or center by adding one of the classes .left, .right or .center.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit.
Disabled
Give text a gray color with the class .disabled. Use a <span> tag for partially disabled text.
Text can be disabled.
Blockquotes
Blockquotes are styled by adding the class .bq.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="bq">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Blockquotes can be right aligned by adding the class .right. You can give them an alternative style that works better in certain circumstances by adding the class .alt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="bq alt right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer><em>— James Dean</em></footer>
</blockquote>Copy Color
Copy can be quickly made any of the theme colors by applying the color’s name class.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
You do not want to go in there.
<p class="green">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>You do <span class="red">not</span> want to go in there.</p>Tags new!
Little colorful tags. Just give a <span> tag a class of .tag. Then stick them everywhere.
<span class="tag lime">colors</span>The Grid
The basics
The root element of the grid (within the html and body elements, of course) should have a class of .container. Within this, you add rows of columns. To start with, add a child element with the class .row.
The responsive grid system is split up into 12 columns. Classes of .col along with .of-1 to .of-12 can be applied to elements in any number of combinations, adding up to 12. For example, three columns of 4, two columns of 6. Even twelve columns of 1 if you’re completely mental.
<body>
<div class="container">
<div class="row">
<div class="col of-8">
A column of 8 sections
</div>
<div class="col of-4">
A column of 4 sections
</div>
</div>
</div>
</body>
You can add the additional class .reverse-stack to basically reverse the order of the columns in the row. Why would you want to do this? It means that when they "collapse" into a single column on mobile devices, you can control the vertical order. Just keep in mind that if you use this feature, you need to write its child columns in reverse order.
The additional class .flush added to a .row removes any margin from the bottom.
Nesting
Columns can be nested by adding a new element of class .row inside an existing column. You can then add elements with classes .col .of-[n] within the row element.
Nested rows/columns work exactly like their parents - the width of the row is 100% of its parent column. So each nested row is split into 12 columns but only within the parent. For example, you can nest 2 columns of 6 inside one parent column of 6. Margins/gutters are handled automatically. Be careful though, nested column padding/margins are not relative to the parent’s column margins (if the parents have 20px of left margin, so will the children). So nesting 12 columns of 1 inside a parent column of 1 is insane.
<div class="row">
<div class="col of-6">
Some content
<div class="row">
<div class="col of-3">
Some nested content
</div>
<div class="col of-3">
Some more nested content
</div>
</div>
</div>
</div>(8 columns)
Skip
You can offset columns by adding the class .skip-n to the column container, where n is the number of columns you want a gap to the left of the column.
Limit
By default, the grid is completely responsive up to the entire width of the page. Sometimes you might not like this and may want a width limit. You can apply this to .container elements by adding .limit. The page content will be centered once this maximum is reached. The limit is only applied to that container, which allows you to have other containers span the full width.
The default limit is 1200px.
The LESS variable @limit sets the horizontal limit applied to elements with class .limit.
More or LESS columns?
Because Spark is built using the LESS preprocessor CSS language, you only have to change one variable, run your compiler and pow: you instantly have a different number of columns.
The LESS variable @num-cols controls how many columns the grid’s rows are split into.
Navigation
Navigation Bar
The navigation bar is a full-width navigation menu which should ideally be positioned at the top of the page.
The navigation menu is probably the most complex part of the framework (from a markup perspective) so use our example and then build on it from there. It’s pretty straight forward, it just involves quite a bit of markup.
<nav class="bar right limit dark" role="navigation">
<a class="brand" href="#">Spark</a>
<button type="button" href="#" class="nav-link btn-touch cosmic">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<ul>
<li><a href="some/link">Link One</a></li>
<li class="active"><a href="some/link">Link Two</a></li>
<li class="drop">
<a href="some/link">Drop Down</a>
<div class="box">
<ul class="inner">
<li><a href="some/link">Drop One</a></li>
<li><a href="some/link">Another Drop</a></li>
<li><a href="some/link">Third Item</a></li>
<li><a href="some/link">Last One</a></li>
</ul>
</div>
</li>
<li><a href="some/link">Link Three</a></li>
</ul>
</nav>Some extra classes exist which can be added to the nav element:
.right floats the navigation links to the right side in desktop screen sizes (keeping the links in the correct order and respecting margins and padding). It also shifts the brand to the left and the button toggle (on mobile devices) to the right.
.center centers the navigation links. It also centers the brand and the mobile toggle button. You can manually left or right align the brand when using centered nav by applying .force-left or .force-right to .brand
.dark applies the dark theme to the menu.
.limit applies the global max-width limit to the navigation bar requires spark.js
.sticky sticks the navigation bar to the top of the window once scrolled past it requires spark.js
.overhang applies a drop shadow to the navigation bar requires spark.js
.transparent makes the navigation bar transparent requires spark.js (if used with sticky)
The class .active can be applied to the <li> element for the current page for visual identification of the current page.
The class .nav-link on the toggle button is important as it ties into the Javascript mobile navigation functionality.
Don’t apply the class .brand directly to an <img> tag, wrap it in an anchor ideally (or a div if you must) and give the wrapper the class .brand.
The LESS variable @nav-basic-hover is the color navigation menu items change color to on hover and @nav-dark-hover is for the dark version.
“Skip to Main Content” Links new!
It’s a good idea to provide a “skip to main content” at the very top of your pages. The reasoning behind this is that users relying on screen reader technology should not have to tab through your primary navigation just to get to the page content they are looking for. Providing a link like this that is only visible when it has focus ensures that those users hit that link first and can decide whether they want to skip to the main page content or continue into the navigation. Spark provides this functionality built in so just add your link (like below) with the classes .screen-readers and .hide-til-focus.
<a href="#main" class="screen-readers hide-til-focus">Skip to main content</a>
<!-- assuming your main content has an id of 'main' -->Link list
Link lists are a great option for sub-navigation or navigation of pages outside of the primary site navigation.
- App options
- Control Panel
- Statistics
- Account
- My Profile
- Settings
- Log Out
- Help
<ul class="link-list green">
<li class="heading">App options</li>
<li class="active"><a href="#">Control Panel</a></li>
<li><a href="#">Statistics</a></li>
<li class="heading">Account</li>
<li><a href="#">My Profile</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><a href="#">Log Out</a></li>
<li><a href="#">Help</a></li>
</ul>Link lists are available in all theme colors used throughout with additional classes like .green. Also available is a dark option, .dark, compatible with each color.
Breadcrumb Navigation new!
Simple breadcrumb navigation. Start with a <nav> element
<nav class="breadcrumbs green" role="navigation">
<ol aria-labelledby="bc-current">
<li><a href="#" onclick="return false;">Top Tier</a></li>
<li><a href="#" onclick="return false;">Second Tier</a></li>
<li id="bc-current">Current Page</li>
</ol>
</nav>Give breadcrumb navigation round “pill” ends with the class .round.
Forms
Select elements (using the multiple attribute for a multi-select element) are totally broken in iOS (iPhone/iPad) and have been for years, apparantly as far back as 2007. Using <optgroup> elements on these causes Safari to crash and even without them, items get randomly selected. Basically, until Apple fix this issue, avoid using multi selects if possible!
Basic Form
This is a basic form. Each input element is wrapped in a div with class .input-container.
Visually unique elements (checkbox, file, radio and select) require an additional parent class of their type. For example, the container around a checkbox input needs both classes .input-container and .checkbox.
Button areas (that house submit buttons etc.) require an additional class .buttons.
You can size inputs by using classes .input-tiny, .is-small, .is-medium and .is-large to your .input-container.
Inline Form
This is an inline form. Give the form element a class of .inline.
The only changes (optionally) necessary for the inline form
Using class .screen-readers on inline form labels is advised rather than removing them entirely as it helps screen readers recognize what the inputs are for.
You can make buttons fill vertically (as in the above example) by giving them the class .fill.
<form role="form" class="form inline">
<div class="input-container">
<label for="form-text-inline" class="screen-readers">Text</label>
<input type="text" name="form-text-inline" id="form-text-inline" placeholder="username">
</div>
<div class="input-container">
<label for="form-password-inline" class="screen-readers">Password</label>
<input type="password" name="form-password-inline" id="form-password-inline" placeholder="password">
</div>
<div class="input-container checkbox">
<label for="form-checkbox-inline">
<input type="checkbox" name="form-checkbox-inline" id="form-checkbox-inline"> Tick me
</label>
</div>
<div class="input-container buttons">
<button type="submit" class="btn fill cosmic">Log In</button>
</div>
</form>Horizontal Form
This is a horizontal form. Give the form element a class of .horizontal.
Not much needs to change when switching between the basic/inline forms and the horizontal form. Just take checkbox inputs outside of their label (making sure the label element comes above/before the input) and wrap radio buttons (including their label, as nested) in a containing block element with the class .radios. It’s a good idea to add an additional label (outside the .radios container but still inside the .input-container and give it a class of .side. This allows consistency of side-aligned labels in the form. This is done in this example.
<form role="form" class="form horizontal">
<div class="input-container">
<label for="form-text-horizontal">Text</label>
<input type="text" name="form-text-horizontal" id="form-text-horizontal">
</div>
<div class="input-container">
<label for="form-password-horizontal">Password</label>
<input type="password" name="form-password-horizontal" id="form-password-horizontal">
</div>
<div class="input-container checkbox">
<label for="form-checkbox-horizontal">Tick me</label>
<input type="checkbox" name="form-checkbox-horizontal" id="form-checkbox-horizontal">
</div>
<div class="input-container radio">
<label class="side">Radio options</label>
<div class="radios">
<label>
<input type="radio" name="form-radio" id="form-radio" value="option1" checked=""> Option one
</label>
<label>
<input type="radio" name="form-radio" id="form-radio" value="option2" checked=""> Option two
</label>
</div>
</div>
<div class="input-container file">
<label for="form-file">File input</label>
<input type="file" name="form-file" id="form-file">
</div>
<div class="input-container select">
<label for="form-select-horizontal">Option two</label>
<select name="form-select-horizontal" id="form-select-horizontal">
<optgroup label="some set">
<option value="example option">example option</option>
<option value="another option">another option</option>
</optgroup>
</select>
</div>
<div class="input-container buttons">
<button type="submit" class="btn cosmic">Submit</button>
</div>
</form>Tight Form new!
The tight form is new to Spark v2.0. It’s a new style of form, great for registration forms and checkouts where you need a lot of inputs but don’t want to present users with a huge long form. Similar to the basic grid, this type of form uses rows and flexible columns but with slightly different markup and classes.
Begin by giving the form a class of .tight then wrap each row of .input-containers in a container element with class .form-row.
Each .input-container should be given a class of .tight-n where n is an integer between 10 and 100 in increments of 10. For example, .tight-10 or .tight-40. The number denotes the percentage of space allocated to that input so each row should have their ns add up to 100.
<form role="form" class="form tight">
<div class="form-row">
<div class="input-container select tight-10">
<label for="prefix-tight">Prefix</label>
<select name="prefix-tight" id="prefix-tight">
<optgroup label="some set">
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
<option value="miss">Miss.</option>
<option value="msgt">MSgt.</option>
</optgroup>
</select>
</div>
<div class="input-container tight-30">
<label for="first-name-tight">First name</label>
<input type="text" name="first-name-tight" id="first-name-tight">
</div>
<div class="input-container tight-20">
<label for="mid-initial-tight">Middle</label>
<input type="text" name="mid-initial-tight" id="mid-initial-tight">
</div>
<div class="input-container tight-40">
<label for="last-name-tight">Last name</label>
<input type="text" name="last-name-tight" id="last-name-tight">
</div>
</div>
<div class="form-row">
<div class="input-container tight-10">
<label for="flat-num-tight">Flat</label>
<input type="text" name="flat-num-tight" id="flat-num-tight">
</div>
<div class="input-container tight-90">
<label for="address-line-1-tight">Address Line 1</label>
<input type="text" name="address-line-1-tight" id="address-line-1-tight">
</div>
</div>
<div class="form-row">
<div class="input-container tight-100">
<label for="address-line-2-tight">Address Line 2</label>
<input type="text" name="address-line-2-tight" id="address-line-2-tight">
</div>
</div>
<div class="form-row">
<div class="input-container tight-30">
<label for="country-tight">Country</label>
<input type="text" name="country-tight" id="country-tight">
</div>
<div class="input-container tight-10">
<label for="zip-tight">Zip</label>
<input type="text" name="zip-tight" id="zip-tight">
</div>
<div class="input-container radio tight-30">
<label>
<input type="radio" name="account-type-tight" id="account-type-tight-1" value="personal" checked=""> Personal
</label>
<label>
<input type="radio" name="account-type-tight" id="account-type-tight-2" value="business"> Business
</label>
</div>
<div class="input-container checkbox tight-20">
<label for="agree-terms-tight">
<input type="checkbox" name="agree-terms-tight" id="agree-terms-tight"> Agree to terms
</label>
</div>
</div>
<div class="form-row controls">
<div class="input-container buttons">
<button type="submit" class="btn flat green">Submit</button>
</div>
</div>
</form>Form Input Sizing
Elements are sized by adding size classes to their .input-container. The available classes are .is-tiny, .is-small, .is-medium and .is-large.
<div class="input-container is-medium">
<label for="form-size-medium">Medium</label>
<input type="password" name="form-size-medium" id="form-size-medium">
</div>Dark Form new!
A dark version of the form (designed to compliment dark backgrounds without a stark contrast) exists. Just add the class .dark to your form.
<form class="form dark" role="form"></form>Disabled Inputs
Disable an element by giving it (the <input>, not its container) the attribute disabled="".
This works with buttons too.
<div class="input-container">
<label for="form-disabled-pass">Password</label>
<input type="password" name="form-disabled-pass" id="form-disabled-pass" disabled="">
</div>Buttons
Basic buttons
There are two styles of button (gradient and flat) and they come in several colors. To begin, just give any anchor, button or input (submit) a class of .btn which will give a standard, silver gradient button.
You can then customize them by choosing a color with an additional class like .blue or .cosmic.
Technically, they work as anchors, inputs (type submit) and buttons but if it’s supposed to be a button, just make it a <button> for semantics. And because you’ll feel good.
The available colors are:
.blue
.green
.orange
.red
.purple
.lime
.dragonfruit
.cosmic new!
Touch buttons
There are also some touch-style buttons (also known as the “burger button”). They require a little additional markup (shown below).
They also come in all base colors using color classes like .purple
These touch buttons also work on dark backgrounds but the default (and maybe some colors) may be too dark to be visible so there are also .white and .silver options.
<a href="#" class="btn-touch" aria-label="navigation">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>Round Touch buttons new!
New to Spark v2.0, a new type of touch button: the round touch button. These are available in all the same colors as touch buttons but have slightly different markup and the base class .btn-touch-round.
<a href="#" class="btn-touch-round green" aria-label="navigation">
<span class="circle">
<span class="inner-circle"></span>
</span>
</a>Button Groups new!
Button groups allow you to create a block of buttons grouped together with no spacing between them. Useful as a toolbar setup. Just wrap your buttons in a .btn-group container.
<div class="btn-group">
<a href="#" class="btn">Button One</a>
<a href="#" class="btn blue">Button Two</a>
<a href="#" class="btn"><i class="fa fa-cc-visa fa-fw"></i></a>
</div>Disabled Buttons
Disable a button by giving it the disabled="" attribute if the element supports it. In the case of an anchor being used as a button, you’ll need to add the class .disabled instead.
Adding the .disabled class to an anchor does not actually disable it, only give it the appearance of a disabled state. You need to use some JavaScript magic for that. Because of this, you should also include the ARIA attribute aria-disabled="true" to help guide screen reader users.
<a href="#" class="btn disabled" aria-disabled="true">Can’t touch this</a>Button Sizes
Buttons are available in various sizes. Using the additional classes .btn-small, .btn-big and .btn-hero.
Alerts, Badges & Notifications
Alerts
Alerts are full-span, permanent boxes to display user information. Add the class .alert to a block element. They look great when dropped directly into a .container near the top of a page.
Add color classes such as .green and .dragonfruit to change the background color.
You can also use classes .success, .warning and .error - they are aliases for green, orange and red respectively.
Add warning symbols with the classes .warning-light and .warning-dark
Add a ‘close’ button to alerts by including an anchor with class .close requires spark.js
.alert
.green
.red
<div class="alert purple warning-light">
Warning, warning, warning!!
<a class="close" href="#"><i class="fa fa-times"></i></a>
</div>Badges
Badges use the .badge class on a <span> tag and can be colored for example, with an additional class such as .purple.
Badges are also available flat using class .flat.
Badges disappear when empty. As if by magic.
Notifications new! requires spark.notifier.js
Notifications are new to Spark v2.0. They are small alerts that slide in to the bottom left of the screen when triggered. All you need to do is include spark.notifier.min.js, add a container element with class .notifications and attach the notifier plugin to that element. See spark.notifier.js for usage.
Launch test notifications by clicking here.
The markup of the actual notification below is purely to show its structure. You do not need to add this markup manually, only the containing element with class .notifications.
<div class="notifications">
<div class="notification show">
<a href="#" class="close" ><i class="fa fa-times"></i></a>
<div class="thumb">
<img src="thumb.jpg" alt="" />
</div>
<div class="title">New notification!</div>
<div class="summary">Lorem ipsum dolor sit amet, oportere neglegentur no nec. Ei magna omnes est, vis autem labitur no…</div>
</div>
</div>Big Stuff
Hero
A hero area is a nice, big area to highlight some of the key things on your site or direct users to your "take my money" button. Or to just put a picture of your dog. Simple to use, just add a class of .hero to your .container element. You don’t need to use .row and .col setups inside, but you certainly can.
In the spirit of not stamping all over your designs, the hero doesn’t do a huge amount. It adds more padding to the container, removes top margins from <h> tags and makes paragraph text a bit bigger. It’s been included as a starting point for you to make some interesting big spaces.
You can fill it with rows and columns, or just use a nice big <h1> tag.
by default, the hero has a subtle gray background which you can remove by adding the class .trans tag.
Hello, Dave.
Can you hear me, Dave?
Tables
Tables are prestyled in two styles - standard and bordered. Use the class .tbl on a table to give it basic styling and apply .bordered. Give the table a dark style with .dark and alternate the color of the rows with .alternate. Make rows take up less vertical space by giving the table a class of .narrow.
| Column | Column | Column | Column |
|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 |
| Value 5 | Value 6 | Value 7 | Value 8 |
Tables are available in colors too, for example .cosmic and can be centered with .center
| Column | Column | Column | Column |
|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 |
| Value 5 | Value 6 | Value 7 | Value 8 |
<table class="tbl alternate center narrow cosmic">
<thead>
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
</head>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
</tr>
</tbody>
</table>Modals new! requires spark.modal.js
Modals are a good way to present users with an important, required notification or decision. They consist of some relatively simple markup and a super simple plugin.
The modal is made up of 3 sections: <header>, <section> (the body) and <footer> (optional). The modal container element (ideally an <aside> element - don’t forget your ARIA role=""!) needs an id and a class of .modal.
Modals can also be colored with the usual color classes such as .cosmic.
Bring up an example modal by clicking here.
Modals don’t have to be animated in. If you want to just use a static modal as the primary area on a page, you can add a class of .static. For semantics however, you should change the <aside> to something more appropriate. Static modals do not require the plugin to be included.
If don’t like the drop shadow, just add a class of .flat.
<aside id="exampleModal" class="modal" role="note">
<header>
<h3>This is a Modal!</h3>
</header>
<section>
<p>Some content.</p>
<button class="btn flat red" id="exampleModal-close">cancel</button>
<button class="btn flat green float-right" onclick="return false;">go forth!</button>
</section>
<footer>Some footer content <a href="#" onclick="return false;">linked</a> here</footer>
</aside>Utilities
Pagination
Pagination made simple. Simple markup, simple classes.
There are a few extra classes you can use on pagination, to tailor styling based on the look of your page. Use .dark for a dark theme. Use .center to center the pagination links and alternatively .right to align them to the right. Also available are colored pagination links, using the color classes like .green.
Denote the current page by giving its <li> element the class .current.
<div class="paginate">
<ul>
<li><a href="#"><i class="fa fa-angle-left"></i></a></li>
<li><a href="#"><i class="fa fa-angle-double-left"></i></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="current"><a href="#">3</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i></a></li>
<li><a href="#"><i class="fa fa-angle-right"></i></a></li>
</ul>
</div>Responsive Visibility
Use the responsive visibility classes to hide elements on mobile/desktop devices: .hidden-mobile and .hidden-desktop.
You can hide an element completely using .hidden.
Surround
Encapsulate content inside an emphasized, bordered area by enclosing the content in a containing element with class .surround. Make it dark with .dark and add more padding with .spaced.
Also available, is the class .shadowed which adds a subtle inner shadow.
Some leading text that has been placed inside a surrounded area for safe keeping.
<div class="surround spaced dark shadowed">
<p class="leading">Some leading text that has been placed inside a surrounded area for safe keeping.</p>
</div>Pushers
Sometimes you might find Spark’s default vertical margin between elements, rows etc. isn’t enough and you want a bigger gap. For this you can use pushers. There are a selection of pushers in px: 5px, 10px, 15px, 20px, [up to 100px in 10px increments], 150px, 200px and 300px. .push-n where n is the number of px. For example, .push-5, .push-30 or .push-300.
By default, pushers are applied in all device widths. Sometimes though, you might only want to use a pusher in one device width range. For this you can apply the additional classes .push-only-mobile or .push-only-desktop.
Pushers don’t just add margin to the bottom of the element: they override it. So if you have a nested .row giving you too much space, just drop the class .push-20 on it to trim it down.
Special Utilities
Clear fix
Spark includes a popular .clear-fix class (aliased also as .clearfix), useful for containing floated elements. Stick it on any float-containing element. Useful when you don’t want to or can’t use the overflow trick.
Screen Reader Classes new!
Spark includes some special classes just for users of screen reader accessibility tech. Add a class of .screen-readers to hide an element from standard browsers but show it to screen readers. Useful for hiding labels on forms making use of the placeholder="" attribute.
Also available is the class .hide-til-focus which hides the element until it has user focus. This is particularly useful when providing users with no mouse, links to skip over content that they would otherwise have to tab through. Navigation menus, for example.
No Margin
Some of Spark’s predefined margins might cause extra unwanted space depending on placement and you might want to get rid of them. You can easily do this with the self-explanatory classes applied to the margin-producing element: .no-margin, .no-margin-top, .no-margin-bottom, .no-margin-left and .no-margin-right.
Quick Float
Quickly float elements left or right respectively with .float-left and .float-right.
Quick Gutter
Quickly add a gutter to the left or right of an element using .gutter-left and .gutter-right respectively.
Black & White
Quickly force copy/headings to be black or white .black and .white.
Spark doesn’t use jet-black #000000 by default, we use #222222. You can change this with the LESS varable @black and if you need to change white from #ffffff, you can change @white.
Shadow
Give an element a subtle shadow by adding a class of .shadow. You can also invert/inset the shadow by instead using the class .shadow-inset.
Rounded Corners new!
Round the corners of an element by adding a class of .round-corners.
Internet Explorer
General
Spark supports IE8 far more than it should. We place IE-only conditional statements in the example <head> that adds a class of .lt-ie9 to the <html> element when viewed in Internet Explorer 8. This allows you to use some classes to specifically target IE8. Some uses for this include a massive banner telling the user that he/she may want to update their browser to something more modern and secure than a thin piece of plywood.
Spark v2 will be the last version to support IE8
Utilities
You can hide elements from being displayed in IE8 by adding the class .lt-ie9-hidden.
Likewise, you can make certain elements only visible to IE8 by adding the class .ie8.