+
+
+
+
+
+ Stop coding non-responsive sites. Let users view sites from anywhere.
+ Try Skeleton +
+ 
+
+
+
+
+
+
+ Percentage of users more likely to purchase on mobile friendly site.
+Most of the world accesses the internet on multiple devices.
+Percentage of users that are frustrated with page load times.
+Skeleton is an amazingly easy place to start with responsive development. If you want to learn more, just visit the documentation!
+ View Skeleton Docs +Skeleton images sit easily in grid with .u-max-full-width class. I suggest exploring solution to serving different images based on device size.
+
+
+ 
+ Light as a feather at ~400 lines & built with mobile in mind.
+ 
+ Styles designed to be a starting point, not a UI framework.
+ 
+ Quick to start with zero compiling or installing necessary.
+ You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has ~200 lines of custom CSS (half of which is the docking navigation).
+Love Skeleton and want to Tweet it, share it, or star it? Well, I appreciate that <3
+ Tweet + + + + +The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
+
+
+
+
+
+
+ One
+ Eleven
+
+
+
+
+ Two
+ Ten
+
+
+
+
+ 1/3
+ 2/3
+
+
+ 1/2
+ 1/2
+
+
+
+
+
+
+
+
+
+
+ Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, Skeleton never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.
The typography base is Raleway served by Google, set at 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.
+Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.
<h1> 50rem<h2> 42rem<h3> 36rem<h4> 30rem<h5> 24rem<h6> 15rem
+
+Heading
+Heading
+Heading
+Heading
+Heading
+Heading
+
+
+The base type is 15px over 1.6 line height (24px)
+
+
+Bolded
+Italicized
+Colored
+Underlined
+
+
+
+
+
+ Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a .button class.
+
+Anchor button
+
+
+
+
+
+Anchor button
+
+
+
+
+
+
+
+
+ Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Item 1
+ -
+ Item 2
+
+ - Item 2.1
+ - Item 2.2
+
+
+ - Item 3
+
+
+
+
+
+
+
+ Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.
.some-class {
+ background-color: red;
+}
+.some-class {
+ background-color: red;
+}
+
+
+
+
+
+
+ Be sure to use properly formed table markup with <thead> and <tbody> when building a table.
| Name | +Age | +Sex | +Location | +
|---|---|---|---|
| Dave Gamache | +26 | +Male | +San Francisco | +
| Dwayne Johnson | +42 | +Male | +Hayward | +
+
+
+
+ Name
+ Age
+ Sex
+ Location
+
+
+
+
+ Dave Gamache
+ 26
+ Male
+ San Francisco
+
+
+ Dwayne Johnson
+ 42
+ Male
+ Hayward
+
+
+
+
+
+
+
+ Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. The queries are mobile-first, meaning they target min-width. Mobile-first queries are how Skeleton's grid is built and is the preferrable method of organizing CSS. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. The sizes for the queries are:
+/* Mobile first queries */
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}
+
+
+
+
+
+
+
+ Skeleton has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.
+ + + +
+/* Utility Classes */
+
+/* Make element full width */
+.u-full-width {
+ width: 100%;
+ box-sizing: border-box; }
+
+/* Make sure elements don't run outside containers (great for images in columns) */
+.u-max-full-width {
+ max-width: 100%;
+ box-sizing: border-box; }
+
+/* Float either direction */
+.u-pull-right {
+ float: right; }
+.u-pull-left {
+ float: left; }
+
+/* Clear a float */
+.u-cf {
+ content: "";
+ display: table;
+ clear: both; }
+
+
+
+
+
+ 
+
+
+ More examples will be added to help anyone get started or more familiar with how Skeleton works. The goal is education. If you're more interested in real, live examples of Skeleton sites, I'll be creating a "Built on Skeleton" list soon!
+You should use Barebones if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Barebones only styles a handful of standard HTML elements and CSS Grid, but that's often more than enough to get started.
+In fact, while this looks like the original Skeleton site, it's made using Barebones, allowing lighter html and more flexible CSS. Barebones also includes support for legacy Skeleton sites without changes.
+Use Barebones and want to lay yourself bare? Let others know!
+ Tweet + + + +CSS Variables allow Barebones to maintain it's independence on additional tools such as CSS preprocessors SCSS or Less, while gaining centralized management of global values. This allows for much easier theming and rebranding.
+The default theme maintains the color choices from Skeleton, although a few very similar colors were consolidated. Colors are based from a theme hue, which defines the normal text color. Additional richer and softer text colors are then defined.
The choice of those keywords is to prevent confusion with light vs dark themes. For example. in a light background theme, softer would mean a lighter color than normal, ie less contrast with the background, but if the base hue is dark, softer would be darker to decrease the contrast.
+/* default theme: light background, dark text, blue accent */
+--theme-hue: 0; /* white */
+--accent-hue: 194; /* blue */
-
-
- Skeleton
- Version 1.1
-
-
-
- About Skeleton?
- Skeleton is a small collection of well-organized CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, tabs, forms and media queries. Go ahead, resize this super basic page to see the grid in action.
+--text-color-richer: hsl(var(--theme-hue), 0%, 5%); /* #0d0d0d */
+--text-color-normal: hsl(var(--theme-hue), 0%, 13%); /* #222222 text color; button:hover:focus color */
+--text-color-softer: hsl(var(--theme-hue), 0%, 33%); /* #555555 button color; button:hover border */
+
+--accent-color: hsl(var(--accent-hue), 86%, 57%); /* #33C3F0 link; button-primary bg+border; textarea,select:focus border */
+--accent-color-hover: hsl(var(--accent-hue), 76%, 49%); /* #1EAEDB link hover; button-primary:hover:focus bg+border */
+
+--border-color: hsl(var(--theme-hue), 0%, 73%); /* #bbbbbb button border */
+--border-color-softer: hsl(var(--theme-hue), 0%, 82%); /* #d1d1d1 textarea,select,code,td,hr border */
+
+--background-color: white; /* transparent body background; textarea,select background */
+--background-color-softer: hsl(var(--theme-hue), 0%, 95%);
+--code-background: hsl(var(--theme-hue), 0%, 95%); /* #f1f1f1 code background*/
+
+--button-primary-color: white;
+
+
+
+
+
+ A dark theme is included in Barebones inside a prefers-color-scheme: dark media selector. This is a new selector not widely supported by browers yet, but demonstrates a second theme.
+
+ You can use the buttons below to switch between these themes
+
+
+
+
-
- Three Core Principles
- Skeleton is built on three core principles:
-
- - A Responsive Grid Down To Mobile: Elegant scaling from a browser to tablets to mobile.
- - Fast to Start: It's a tool for rapid development with best practices
- - Style Agnostic: It provides the most basic, beautiful styles, but is meant to be overwritten.
-
+
+
+
+ Grids
+ Barebones replaces the fixed 12-column grid with CSS Grid: a more flexible and powerful foundation supported natively in CSS. If you've ever fought a Flexbox layout to do what you want, you'll probably find CSS Grid a lot easier to work with as it was designed specifically for laying out in two dimensions.
+ Barebones only includes a few basic layouts, but note the Fifths wouldn't be easy with the 12-column layout.
+
+ Halves
+ Halves
+
+
+ Thirds
+ Thirds
+ Thirds
+
+
+ Quarters
+ Quarters
+ Quarters
+ Quarters
+
+
+ Fifths
+ Fifths
+ Fifths
+ Fifths
+ Fifths
+
+
+
+
+
+
+
+ Halves
+ Halves
+
+
+
+
+ Thirds
+ Thirds
+ Thirds
+ Thirds
+ Thirds
+ Thirds
+
+
+
+
+
+ There's a lot of possibilities with CSS Grid and great resources available without repeating a how-to guide here.
-
- Docs & Support
- The easiest way to really get started with Skeleton is to check out the full docs and info at www.getskeleton.com.. Skeleton is also open-source and has a project on git, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at hi@getskeleton.com.
+
+
+
+ Typography
+ Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, Barebones never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.
+
+
+ The typography base is Raleway served by Google, set at 16rem (16px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.
+ Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.
+
+
+ Heading <h1> 50rem
+ Heading <h2> 42rem
+ Heading <h3> 36rem
+ Heading <h4> 30rem
+ Heading <h5> 24rem
+ Heading <h6> 15rem
+
+
+
+
+
+
+
+Heading
+Heading
+Heading
+Heading
+Heading
+Heading
+
+
+The base type is 15px over 1.6 line height (24px)
+
+
+Bolded
+Italicized
+Colored
+Underlined
+
+
+
+
+
+
+
+
+
+ Buttons
+ Buttons come in two basic flavors in Barebones. The standard <button> element is plain, whereas the .button-primary button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a .button class.
+
+ Anchor button
+
+
+
+ Anchor button
+
+
+
+
+
+
+
+
+
+Anchor button
+
+
+
+
+
+Anchor button
+
+
+
+
+
+
+
+
+
+
+
+
+ Forms
+ Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Lists
+
+
+
+ - Unordered lists have basic styles
+ -
+ They use the circle list style
+
+ - Nested lists styled to feel right
+ - Can nest either type of list into the other
+ - Third Level Lists work as well
+
+ - How low can you go?
+
+
+
+
+ - Just more list items mama san
+
+
+
+
+ - Ordered lists also have basic styles
+ -
+ They use the decimal list style
+
+ - Ordered and unordered can be nested
+ - Can nest either type of list into the other
+
+
+ - Last list item just for the fun
+
+
+
+
+
+
+
+
+ - Item 1
+ -
+ Item 2
+
+ - Item 2.1
+ - Item 2.2
+
+
+ - Item 3
+
+
+
+
+
+
+One change from Skeleton is that font-size does not decrease with nested lists, instead using the --text-color-softer variable for nested list color. This allows deeper nesting without readability problems.
+
+
+
+
+
+ Code
+ Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.
+
+.some-class {
+ background-color: red;
+}
+
+
+
+
+
+.some-class {
+ background-color: red;
+}
+
+
+
+
+
+
+
+
+
+
+ Tables
+ Be sure to use properly formed table markup with <thead> and <tbody> when building a table.
+
+
+
+
+ Name
+ Age
+ Sex
+ Location
+
+
+
+
+ Dave Gamache
+ 26
+ Male
+ San Francisco
+
+
+ Dwayne Johnson
+ 42
+ Male
+ Hayward
+
+
+
+
+
+
+
+
+
+
+
+ Name
+ Age
+ Sex
+ Location
+
+
+
+
+ Dave Gamache
+ 26
+ Male
+ San Francisco
+
+
+ Dwayne Johnson
+ 42
+ Male
+ Hayward
+
+
+
+
+
+
+
+
+
+
+
+ Media queries
+ Barebones uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. The queries are mobile-first, meaning they target min-width. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS.
+
+ Barebones makes some changes to Skeleten's default break points, based on personal experience and some really good rational. The sizes for the queries are currently:
+
+
+
+ - Desktop HD: 1200px
+ - Desktop: 900px
+ - Mobile: 600px
+
+
+
+ With the upcoming env() variables in CSS, Barebones will be updated to make media queries top level variables to easily change breakpoints as desired.
+
+
+
+
+/* Mobile first queries */
+
+/* Larger than mobile (default point when grid becomes active) */
+@media (min-width: 600px) {}
+
+/* Larger than phablet */
+@media (min-width: 900px) {}
+
+/* Larger than tablet */
+@media (min-width: 1200px) {}
+
+
+
+
+
+
+
+
+
+
+ Utilities
+ Barebones has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.
+
+
+
+/* Utility Classes */
+
+/* Make element full width */
+.u-full-width {
+ width: 100%;
+ box-sizing: border-box; }
+
+/* Make sure elements don't run outside containers (great for images in columns) */
+.u-max-full-width {
+ max-width: 100%;
+ box-sizing: border-box; }
+
+/* Float either direction */
+.u-pull-right {
+ float: right; }
+.u-pull-left {
+ float: left; }
+
+/* Override default content alignment */
+.u-align-left {
+ text-align: left; }
+.u-align-right {
+ text-align: right; }
+
+/* Clear a float */
+.u-cf {
+ content: "";
+ display: table;
+ clear: both; }
+
+
+
-
+
+
+ Legacy Support
+ If you have a site originally build with Skeleton and want to migrate to Barebones without breaking everything at once, we'll help you keep those skeletons hidden in the closet. Simply include the skeleton-legacy.css file to provide backwards compatibility for all classes removed from Barebones.
+ The legacy classes, which mostly applied to grids, have been updated to use Barebone's CSS Variables and CSS Grid system so any overall changes will still be applied across the entire site. See below for a demo using the html from the original Skeleton site styled with Barebones and legacy css.
+
+
+ One
+ Eleven
+
+
+ Two
+ Ten
+
+
+ Three
+ Nine
+
+
+ Four
+ Eight
+
+
+ Five
+ Seven
+
+
+ Six
+ Six
+
+
+ Seven
+ Five
+
+
+ Eight
+ Four
+
+
+ Nine
+ Three
+
+
+ Ten
+ Two
+
+
+ Eleven
+ One
+
+
+
+
+
+
+ Resources
+ Links to resources for some of the newer features used in Barebones and some of the up and coming standards with included support:
+
+
+
+ CSS Variables
+
+ CSS Grid
+
+
+
+ Up and Coming Standards
+
+
+
+
+
-
-
-
+
+
+ Examples
+
+
+
+ 
+
+
+
+ Legacy Landing Page
+ The landing page example from Skeleton with only two changes: barebones.css and skeleton-legacy.css. Total time to convert: 5s.
+ Demo
+ Source
+
+
+
+ 
+
+
+
+ Legacy Project Page
+ The orignial project page (this page) from the Skeleton repo, styled by barebones.css and skeleton-legacy.css.
+
+ Demo
+
+
+
+
+
+
+
+ –––––––––––––––––––––––––––––––––––––––––––––––––– -->
\ No newline at end of file
diff --git a/javascripts/tabs.js b/javascripts/tabs.js
deleted file mode 100644
index b832e0c04..000000000
--- a/javascripts/tabs.js
+++ /dev/null
@@ -1,29 +0,0 @@
-
-/**
- * Skeleton V1.1
- * Copyright 2011, Dave Gamache
- * www.getskeleton.com
- * Free to use under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- * 8/17/2011
- */
-
-(function ($) {
- // hash change handler
- function hashchange () {
- var hash = window.location.hash
- , el = $('ul.tabs [href*="' + hash + '"]')
- , content = $(hash)
-
- if (el.length && !el.hasClass('active') && content.length) {
- el.closest('.tabs').find('.active').removeClass('active');
- el.addClass('active');
- content.show().addClass('active').siblings().hide().removeClass('active');
- }
- }
-
- // listen on event and fire right away
- $(window).on('hashchange.skeleton', hashchange);
- hashchange();
- $(hashchange);
-})(jQuery);
diff --git a/js/legacy.js b/js/legacy.js
new file mode 100644
index 000000000..3cb76e577
--- /dev/null
+++ b/js/legacy.js
@@ -0,0 +1,94 @@
+$(document).ready(function() {
+
+ // Variables
+ var $codeSnippets = $('.code-example-body'),
+ $nav = $('.navbar'),
+ $body = $('body'),
+ $window = $(window),
+ $popoverLink = $('[data-popover]'),
+ navOffsetTop = $nav.offset().top,
+ $document = $(document),
+ entityMap = {
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ '"': '"',
+ "'": ''',
+ "/": '/'
+ }
+
+ function init() {
+ $window.on('scroll', onScroll)
+ $window.on('resize', resize)
+ $popoverLink.on('click', openPopover)
+ $document.on('click', closePopover)
+ $('a[href^="#"]').on('click', smoothScroll)
+ buildSnippets();
+ }
+
+ function smoothScroll(e) {
+ e.preventDefault();
+ $(document).off("scroll");
+ var target = this.hash,
+ menu = target;
+ $target = $(target);
+ $('html, body').stop().animate({
+ 'scrollTop': $target.offset().top-40
+ }, 0, 'swing', function () {
+ window.location.hash = target;
+ $(document).on("scroll", onScroll);
+ });
+ }
+
+ function openPopover(e) {
+ e.preventDefault()
+ closePopover();
+ var popover = $($(this).data('popover'));
+ popover.toggleClass('open')
+ e.stopImmediatePropagation();
+ }
+
+ function closePopover(e) {
+ if($('.popover.open').length > 0) {
+ $('.popover').removeClass('open')
+ }
+ }
+
+ $("#button").click(function() {
+ $('html, body').animate({
+ scrollTop: $("#elementtoScrollToID").offset().top
+ }, 2000);
+});
+
+ function resize() {
+ $body.removeClass('has-docked-nav')
+ navOffsetTop = $nav.offset().top
+ onScroll()
+ }
+
+ function onScroll() {
+ if(navOffsetTop < $window.scrollTop() && !$body.hasClass('has-docked-nav')) {
+ $body.addClass('has-docked-nav')
+ }
+ if(navOffsetTop > $window.scrollTop() && $body.hasClass('has-docked-nav')) {
+ $body.removeClass('has-docked-nav')
+ }
+ }
+
+ function escapeHtml(string) {
+ return String(string).replace(/[&<>"'\/]/g, function (s) {
+ return entityMap[s];
+ });
+ }
+
+ function buildSnippets() {
+ $codeSnippets.each(function() {
+ var newContent = escapeHtml($(this).html())
+ $(this).html(newContent)
+ })
+ }
+
+
+ init();
+
+});
\ No newline at end of file
diff --git a/js/site.js b/js/site.js
new file mode 100755
index 000000000..2d9d89cd7
--- /dev/null
+++ b/js/site.js
@@ -0,0 +1,132 @@
+document.addEventListener("DOMContentLoaded", function() {
+
+ // Variables
+ var navOffsetTop = document.querySelector('.navbar').getBoundingClientRect().top + document.body.scrollTop;
+ var entityMap = {
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ '"': '"',
+ "'": ''',
+ "/": '/'
+ };
+
+ function init() {
+ // handle menu popovers
+ var y = document.querySelectorAll('[data-popover]')
+ y.forEach(function(e) {
+ e.addEventListener('click', newOpenPopover)
+ })
+ document.addEventListener('click', newClosePopover)
+
+ // attach click even to all anchor links
+ addSmoothScroll();
+
+ // add click event to theme buttons
+ var x = document.querySelector('.themeButtons')
+ x.childNodes.forEach(function(e) {
+ e.addEventListener('click', toggleTheme)
+ })
+
+ // listener for navbar visibility
+ window.addEventListener('scroll', onScroll);
+
+ // prep for html escaping
+ buildSnippets();
+ }
+
+ /* non-jquery functions */
+
+ function toggleTheme(e) {
+ var target = e.target
+ // check if button pressed was already primary
+ if (!target.classList.contains('button-primary')) {
+ // get sibling, which might be before
+ var sib = target.nextElementSibling || target.previousElementSibling
+ target.classList.add('button-primary')
+ sib.classList.remove('button-primary')
+
+ var prettifyDark = document.getElementById('prettify-dark')
+ var sheets = document.styleSheets
+
+ // temporariily set transition class on html element
+ document.documentElement.classList.add('transition-theme')
+
+ // change data-theme
+ if (target.classList.contains('darkTheme')) {
+ document.documentElement.setAttribute("data-theme", "dark")
+ prettifyDark.removeAttribute('disabled')
+ prettifyDark.disabled = false
+ } else {
+ document.documentElement.removeAttribute("data-theme", "dark")
+ prettifyDark.disabled = true
+ }
+
+ // remove transition class
+ window.setTimeout(function() {
+ document.documentElement.classList.remove('transition-theme')
+ }, 1000)
+ }
+ }
+
+ function addSmoothScroll() {
+ var els = document.querySelectorAll('[href^="#"]')
+ els.forEach(function(e) {
+ e.addEventListener('click', function(i) {
+ i.preventDefault()
+ var target = e.getAttribute('href')
+ document.getElementById(target.substring(1)).scrollIntoView({ behavior: 'smooth' });
+ });
+ });
+ }
+
+ function escapeHtml(string) {
+ return String(string).replace(/[&<>"'\/]/g, function (s) {
+ return entityMap[s];
+ });
+ }
+
+ function buildSnippets() {
+ var els = document.querySelectorAll('.code-example-body')
+ els.forEach(function(e) {
+ var newContent = escapeHtml(e.innerHTML)
+ e.innerHTML = newContent
+ })
+ }
+
+ function newOpenPopover(e) {
+ e.preventDefault()
+ newClosePopover();
+ var pop = e.target.getAttribute('data-popover')
+ var popoverEl = document.getElementById(pop)
+ //var popover = $($(this).data('popover'));
+ popoverEl.classList.add('open')
+ e.stopImmediatePropagation();
+ }
+
+ function newClosePopover(e) {
+ var x = document.querySelector('.popover.open')
+ if(x != null) {
+ x.classList.remove('open')
+ }
+ }
+
+ window.onresize = function() {
+ document.body.classList.remove('has-docked-nav')
+ var rect = document.querySelector('.navbar').getBoundingClientRect();
+ navOffsetTop = rect.top + document.body.scrollTop
+ onScroll()
+ }
+
+ function onScroll() {
+ var b = document.body
+ if(navOffsetTop < window.scrollY && !b.classList.contains('has-docked-nav')) {
+ b.classList.add('has-docked-nav')
+ }
+ if(navOffsetTop > window.scrollY && b.classList.contains('has-docked-nav')) {
+ b.classList.remove('has-docked-nav')
+ }
+ }
+
+ init();
+});
\ No newline at end of file
diff --git a/js/smoothscroll.min.js b/js/smoothscroll.min.js
new file mode 100644
index 000000000..f643269fa
--- /dev/null
+++ b/js/smoothscroll.min.js
@@ -0,0 +1 @@
+!function(){"use strict";function o(){var o=window,t=document;if(!("scrollBehavior"in t.documentElement.style&&!0!==o.__forceSmoothScrollPolyfill__)){var l,e=o.HTMLElement||o.Element,r=468,i={scroll:o.scroll||o.scrollTo,scrollBy:o.scrollBy,elementScroll:e.prototype.scroll||n,scrollIntoView:e.prototype.scrollIntoView},s=o.performance&&o.performance.now?o.performance.now.bind(o.performance):Date.now,c=(l=o.navigator.userAgent,new RegExp(["MSIE ","Trident/","Edge/"].join("|")).test(l)?1:0);o.scroll=o.scrollTo=function(){void 0!==arguments[0]&&(!0!==f(arguments[0])?h.call(o,t.body,void 0!==arguments[0].left?~~arguments[0].left:o.scrollX||o.pageXOffset,void 0!==arguments[0].top?~~arguments[0].top:o.scrollY||o.pageYOffset):i.scroll.call(o,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:o.scrollX||o.pageXOffset,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:o.scrollY||o.pageYOffset))},o.scrollBy=function(){void 0!==arguments[0]&&(f(arguments[0])?i.scrollBy.call(o,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:0,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:0):h.call(o,t.body,~~arguments[0].left+(o.scrollX||o.pageXOffset),~~arguments[0].top+(o.scrollY||o.pageYOffset)))},e.prototype.scroll=e.prototype.scrollTo=function(){if(void 0!==arguments[0])if(!0!==f(arguments[0])){var o=arguments[0].left,t=arguments[0].top;h.call(this,this,void 0===o?this.scrollLeft:~~o,void 0===t?this.scrollTop:~~t)}else{if("number"==typeof arguments[0]&&void 0===arguments[1])throw new SyntaxError("Value could not be converted");i.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left:"object"!=typeof arguments[0]?~~arguments[0]:this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top:void 0!==arguments[1]?~~arguments[1]:this.scrollTop)}},e.prototype.scrollBy=function(){void 0!==arguments[0]&&(!0!==f(arguments[0])?this.scroll({left:~~arguments[0].left+this.scrollLeft,top:~~arguments[0].top+this.scrollTop,behavior:arguments[0].behavior}):i.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left+this.scrollLeft:~~arguments[0]+this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top+this.scrollTop:~~arguments[1]+this.scrollTop))},e.prototype.scrollIntoView=function(){if(!0!==f(arguments[0])){var l=function(o){var l,e,r,i;do{l=(o=o.parentNode)===t.body}while(!1===l&&!1===(r=p(e=o,"Y")&&a(e,"Y"),i=p(e,"X")&&a(e,"X"),r||i));return l=null,o}(this),e=l.getBoundingClientRect(),r=this.getBoundingClientRect();l!==t.body?(h.call(this,l,l.scrollLeft+r.left-e.left,l.scrollTop+r.top-e.top),"fixed"!==o.getComputedStyle(l).position&&o.scrollBy({left:e.left,top:e.top,behavior:"smooth"})):o.scrollBy({left:r.left,top:r.top,behavior:"smooth"})}else i.scrollIntoView.call(this,void 0===arguments[0]||arguments[0])}}function n(o,t){this.scrollLeft=o,this.scrollTop=t}function f(o){if(null===o||"object"!=typeof o||void 0===o.behavior||"auto"===o.behavior||"instant"===o.behavior)return!0;if("object"==typeof o&&"smooth"===o.behavior)return!1;throw new TypeError("behavior member of ScrollOptions "+o.behavior+" is not a valid value for enumeration ScrollBehavior.")}function p(o,t){return"Y"===t?o.clientHeight+c1?1:n,l=.5*(1-Math.cos(Math.PI*c)),e=t.startX+(t.x-t.startX)*l,i=t.startY+(t.y-t.startY)*l,t.method.call(t.scrollable,e,i),e===t.x&&i===t.y||o.requestAnimationFrame(d.bind(o,t))}function h(l,e,r){var c,f,p,a,h=s();l===t.body?(c=o,f=o.scrollX||o.pageXOffset,p=o.scrollY||o.pageYOffset,a=i.scroll):(c=l,f=l.scrollLeft,p=l.scrollTop,a=n),d({scrollable:c,method:a,startTime:h,startX:f,startY:p,x:e,y:r})}}"object"==typeof exports&&"undefined"!=typeof module?module.exports={polyfill:o}:o()}();
\ No newline at end of file
diff --git a/robots.txt b/robots.txt
deleted file mode 100755
index d310d070b..000000000
--- a/robots.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-# www.robotstxt.org/
-# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449
-
-User-agent: *
-
diff --git a/stylesheets/base.css b/stylesheets/base.css
deleted file mode 100644
index afc4d3b95..000000000
--- a/stylesheets/base.css
+++ /dev/null
@@ -1,342 +0,0 @@
-/*
-* Skeleton V1.1
-* Copyright 2011, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 8/17/2011
-*/
-
-
-/* Table of Content
-==================================================
- #Reset & Basics
- #Basic Styles
- #Site Styles
- #Typography
- #Links
- #Lists
- #Images
- #Buttons
- #Tabs
- #Forms
- #Misc */
-
-
-/* #Reset & Basics (Inspired by E. Meyers)
-================================================== */
- html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline; }
- article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
- display: block; }
- body {
- line-height: 1; }
- ol, ul {
- list-style: none; }
- blockquote, q {
- quotes: none; }
- blockquote:before, blockquote:after,
- q:before, q:after {
- content: '';
- content: none; }
- table {
- border-collapse: collapse;
- border-spacing: 0; }
-
-
-/* #Basic Styles
-================================================== */
- body {
- background: #fff;
- font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: #444;
- -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
- -webkit-text-size-adjust: 100%;
- }
-
-
-/* #Typography
-================================================== */
- h1, h2, h3, h4, h5, h6 {
- color: #181818;
- font-family: "Georgia", "Times New Roman", serif;
- font-weight: normal; }
- h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
- h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
- h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
- h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
- h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
- h5 { font-size: 17px; line-height: 24px; }
- h6 { font-size: 14px; line-height: 21px; }
- .subheader { color: #777; }
-
- p { margin: 0 0 20px 0; }
- p img { margin: 0; }
- p.lead { font-size: 21px; line-height: 27px; color: #777; }
-
- em { font-style: italic; }
- strong { font-weight: bold; color: #333; }
- small { font-size: 80%; }
-
-/* Blockquotes */
- blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
- blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
- blockquote cite { display: block; font-size: 12px; color: #555; }
- blockquote cite:before { content: "\2014 \0020"; }
- blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
-
- hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
-
-
-/* #Links
-================================================== */
- a, a:visited { color: #333; text-decoration: underline; outline: 0; }
- a:hover, a:focus { color: #000; }
- p a, p a:visited { line-height: inherit; }
-
-
-/* #Lists
-================================================== */
- ul, ol { margin-bottom: 20px; }
- ul { list-style: none outside; }
- ol { list-style: decimal; }
- ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
- ul.square { list-style: square outside; }
- ul.circle { list-style: circle outside; }
- ul.disc { list-style: disc outside; }
- ul ul, ul ol,
- ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
- ul ul li, ul ol li,
- ol ol li, ol ul li { margin-bottom: 6px; }
- li { line-height: 18px; margin-bottom: 12px; }
- ul.large li { line-height: 21px; }
- li p { line-height: 21px; }
-
-/* #Images
-================================================== */
-
- img.scale-with-grid {
- max-width: 100%;
- height: auto; }
-
-
-/* #Buttons
-================================================== */
-
- .button,
- button,
- input[type="submit"],
- input[type="reset"],
- input[type="button"] {
- background: #eee; /* Old browsers */
- background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
- background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
- background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
- background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
- background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
- background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
- border: 1px solid #aaa;
- border-top: 1px solid #ccc;
- border-left: 1px solid #ccc;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- color: #444;
- display: inline-block;
- font-size: 11px;
- font-weight: bold;
- text-decoration: none;
- text-shadow: 0 1px rgba(255, 255, 255, .75);
- cursor: pointer;
- margin-bottom: 20px;
- line-height: normal;
- padding: 8px 10px;
- font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
-
- .button:hover,
- button:hover,
- input[type="submit"]:hover,
- input[type="reset"]:hover,
- input[type="button"]:hover {
- color: #222;
- background: #ddd; /* Old browsers */
- background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
- background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
- background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
- background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
- background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
- background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
- border: 1px solid #888;
- border-top: 1px solid #aaa;
- border-left: 1px solid #aaa; }
-
- .button:active,
- button:active,
- input[type="submit"]:active,
- input[type="reset"]:active,
- input[type="button"]:active {
- border: 1px solid #666;
- background: #ccc; /* Old browsers */
- background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
- background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
- background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
- background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
- background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
- background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
-
- .button.full-width,
- button.full-width,
- input[type="submit"].full-width,
- input[type="reset"].full-width,
- input[type="button"].full-width {
- width: 100%;
- padding-left: 0 !important;
- padding-right: 0 !important;
- text-align: center; }
-
- /* Fix for odd Mozilla border & padding issues */
- button::-moz-focus-inner,
- input::-moz-focus-inner {
- border: 0;
- padding: 0;
- }
-
-
-/* #Tabs (activate in tabs.js)
-================================================== */
- ul.tabs {
- display: block;
- margin: 0 0 20px 0;
- padding: 0;
- border-bottom: solid 1px #ddd; }
- ul.tabs li {
- display: block;
- width: auto;
- height: 30px;
- padding: 0;
- float: left;
- margin-bottom: 0; }
- ul.tabs li a {
- display: block;
- text-decoration: none;
- width: auto;
- height: 29px;
- padding: 0px 20px;
- line-height: 30px;
- border: solid 1px #ddd;
- border-width: 1px 1px 0 0;
- margin: 0;
- background: #f5f5f5;
- font-size: 13px; }
- ul.tabs li a.active {
- background: #fff;
- height: 30px;
- position: relative;
- top: -4px;
- padding-top: 4px;
- border-left-width: 1px;
- margin: 0 0 0 -1px;
- color: #111;
- -moz-border-radius-topleft: 2px;
- -webkit-border-top-left-radius: 2px;
- border-top-left-radius: 2px;
- -moz-border-radius-topright: 2px;
- -webkit-border-top-right-radius: 2px;
- border-top-right-radius: 2px; }
- ul.tabs li:first-child a.active {
- margin-left: 0; }
- ul.tabs li:first-child a {
- border-width: 1px 1px 0 1px;
- -moz-border-radius-topleft: 2px;
- -webkit-border-top-left-radius: 2px;
- border-top-left-radius: 2px; }
- ul.tabs li:last-child a {
- -moz-border-radius-topright: 2px;
- -webkit-border-top-right-radius: 2px;
- border-top-right-radius: 2px; }
-
- ul.tabs-content { margin: 0; display: block; }
- ul.tabs-content > li { display:none; }
- ul.tabs-content > li.active { display: block; }
-
- /* Clearfixing tabs for beautiful stacking */
- ul.tabs:before,
- ul.tabs:after {
- content: '\0020';
- display: block;
- overflow: hidden;
- visibility: hidden;
- width: 0;
- height: 0; }
- ul.tabs:after {
- clear: both; }
- ul.tabs {
- zoom: 1; }
-
-
-/* #Forms
-================================================== */
-
- form {
- margin-bottom: 20px; }
- fieldset {
- margin-bottom: 20px; }
- input[type="text"],
- input[type="password"],
- input[type="email"],
- textarea,
- select {
- border: 1px solid #ccc;
- padding: 6px 4px;
- outline: none;
- -moz-border-radius: 2px;
- -webkit-border-radius: 2px;
- border-radius: 2px;
- font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: #777;
- margin: 0;
- width: 210px;
- max-width: 100%;
- display: block;
- margin-bottom: 20px;
- background: #fff; }
- select {
- padding: 0; }
- input[type="text"]:focus,
- input[type="password"]:focus,
- input[type="email"]:focus,
- textarea:focus {
- border: 1px solid #aaa;
- color: #444;
- -moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
- -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
- box-shadow: 0 0 3px rgba(0,0,0,.2); }
- textarea {
- min-height: 60px; }
- label,
- legend {
- display: block;
- font-weight: bold;
- font-size: 13px; }
- select {
- width: 220px; }
- input[type="checkbox"] {
- display: inline; }
- label span,
- legend span {
- font-weight: normal;
- font-size: 13px;
- color: #444; }
-
-/* #Misc
-================================================== */
- .remove-bottom { margin-bottom: 0 !important; }
- .half-bottom { margin-bottom: 10px !important; }
- .add-bottom { margin-bottom: 20px !important; }
-
-
diff --git a/stylesheets/layout.css b/stylesheets/layout.css
deleted file mode 100644
index aff5b477e..000000000
--- a/stylesheets/layout.css
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
-* Skeleton V1.1
-* Copyright 2011, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 8/17/2011
-*/
-
-/* Table of Content
-==================================================
- #Site Styles
- #Page Styles
- #Media Queries
- #Font-Face */
-
-/* #Site Styles
-================================================== */
-
-/* #Page Styles
-================================================== */
-
-/* #Media Queries
-================================================== */
-
- /* Smaller than standard 960 (devices and browsers) */
- @media only screen and (max-width: 959px) {}
-
- /* Tablet Portrait size to standard 960 (devices and browsers) */
- @media only screen and (min-width: 768px) and (max-width: 959px) {}
-
- /* All Mobile Sizes (devices and browser) */
- @media only screen and (max-width: 767px) {}
-
- /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
- @media only screen and (min-width: 480px) and (max-width: 767px) {}
-
- /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
- @media only screen and (max-width: 479px) {}
-
-
-/* #Font-Face
-================================================== */
-/* This is the proper syntax for an @font-face file
- Just create a "fonts" folder at the root,
- copy your FontName into code below and remove
- comment brackets */
-
-/* @font-face {
- font-family: 'FontName';
- src: url('../fonts/FontName.eot');
- src: url('../fonts/FontName.eot?iefix') format('eot'),
- url('../fonts/FontName.woff') format('woff'),
- url('../fonts/FontName.ttf') format('truetype'),
- url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
- font-weight: normal;
- font-style: normal; }
-*/
\ No newline at end of file
diff --git a/stylesheets/skeleton.css b/stylesheets/skeleton.css
deleted file mode 100644
index f36de832c..000000000
--- a/stylesheets/skeleton.css
+++ /dev/null
@@ -1,242 +0,0 @@
-/*
-* Skeleton V1.1
-* Copyright 2011, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 8/17/2011
-*/
-
-
-/* Table of Contents
-==================================================
- #Base 960 Grid
- #Tablet (Portrait)
- #Mobile (Portrait)
- #Mobile (Landscape)
- #Clearing */
-
-
-
-/* #Base 960 Grid
-================================================== */
-
- .container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
- .container .column,
- .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
- .row { margin-bottom: 20px; }
-
- /* Nested Column Classes */
- .column.alpha, .columns.alpha { margin-left: 0; }
- .column.omega, .columns.omega { margin-right: 0; }
-
- /* Base Grid */
- .container .one.column,
- .container .one.columns { width: 40px; }
- .container .two.columns { width: 100px; }
- .container .three.columns { width: 160px; }
- .container .four.columns { width: 220px; }
- .container .five.columns { width: 280px; }
- .container .six.columns { width: 340px; }
- .container .seven.columns { width: 400px; }
- .container .eight.columns { width: 460px; }
- .container .nine.columns { width: 520px; }
- .container .ten.columns { width: 580px; }
- .container .eleven.columns { width: 640px; }
- .container .twelve.columns { width: 700px; }
- .container .thirteen.columns { width: 760px; }
- .container .fourteen.columns { width: 820px; }
- .container .fifteen.columns { width: 880px; }
- .container .sixteen.columns { width: 940px; }
-
- .container .one-third.column { width: 300px; }
- .container .two-thirds.column { width: 620px; }
-
- /* Offsets */
- .container .offset-by-one { padding-left: 60px; }
- .container .offset-by-two { padding-left: 120px; }
- .container .offset-by-three { padding-left: 180px; }
- .container .offset-by-four { padding-left: 240px; }
- .container .offset-by-five { padding-left: 300px; }
- .container .offset-by-six { padding-left: 360px; }
- .container .offset-by-seven { padding-left: 420px; }
- .container .offset-by-eight { padding-left: 480px; }
- .container .offset-by-nine { padding-left: 540px; }
- .container .offset-by-ten { padding-left: 600px; }
- .container .offset-by-eleven { padding-left: 660px; }
- .container .offset-by-twelve { padding-left: 720px; }
- .container .offset-by-thirteen { padding-left: 780px; }
- .container .offset-by-fourteen { padding-left: 840px; }
- .container .offset-by-fifteen { padding-left: 900px; }
-
-
-
-/* #Tablet (Portrait)
-================================================== */
-
- /* Note: Design for a width of 768px */
-
- @media only screen and (min-width: 768px) and (max-width: 959px) {
- .container { width: 768px; }
- .container .column,
- .container .columns { margin-left: 10px; margin-right: 10px; }
- .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
- .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
- .alpha.omega { margin-left: 0; margin-right: 0; }
-
- .container .one.column,
- .container .one.columns { width: 28px; }
- .container .two.columns { width: 76px; }
- .container .three.columns { width: 124px; }
- .container .four.columns { width: 172px; }
- .container .five.columns { width: 220px; }
- .container .six.columns { width: 268px; }
- .container .seven.columns { width: 316px; }
- .container .eight.columns { width: 364px; }
- .container .nine.columns { width: 412px; }
- .container .ten.columns { width: 460px; }
- .container .eleven.columns { width: 508px; }
- .container .twelve.columns { width: 556px; }
- .container .thirteen.columns { width: 604px; }
- .container .fourteen.columns { width: 652px; }
- .container .fifteen.columns { width: 700px; }
- .container .sixteen.columns { width: 748px; }
-
- .container .one-third.column { width: 236px; }
- .container .two-thirds.column { width: 492px; }
-
- /* Offsets */
- .container .offset-by-one { padding-left: 48px; }
- .container .offset-by-two { padding-left: 96px; }
- .container .offset-by-three { padding-left: 144px; }
- .container .offset-by-four { padding-left: 192px; }
- .container .offset-by-five { padding-left: 240px; }
- .container .offset-by-six { padding-left: 288px; }
- .container .offset-by-seven { padding-left: 336px; }
- .container .offset-by-eight { padding-left: 384px; }
- .container .offset-by-nine { padding-left: 432px; }
- .container .offset-by-ten { padding-left: 480px; }
- .container .offset-by-eleven { padding-left: 528px; }
- .container .offset-by-twelve { padding-left: 576px; }
- .container .offset-by-thirteen { padding-left: 624px; }
- .container .offset-by-fourteen { padding-left: 672px; }
- .container .offset-by-fifteen { padding-left: 720px; }
- }
-
-
-/* #Mobile (Portrait)
-================================================== */
-
- /* Note: Design for a width of 320px */
-
- @media only screen and (max-width: 767px) {
- .container { width: 300px; }
- .container .columns,
- .container .column { margin: 0; }
-
- .container .one.column,
- .container .one.columns,
- .container .two.columns,
- .container .three.columns,
- .container .four.columns,
- .container .five.columns,
- .container .six.columns,
- .container .seven.columns,
- .container .eight.columns,
- .container .nine.columns,
- .container .ten.columns,
- .container .eleven.columns,
- .container .twelve.columns,
- .container .thirteen.columns,
- .container .fourteen.columns,
- .container .fifteen.columns,
- .container .sixteen.columns,
- .container .one-third.column,
- .container .two-thirds.column { width: 300px; }
-
- /* Offsets */
- .container .offset-by-one,
- .container .offset-by-two,
- .container .offset-by-three,
- .container .offset-by-four,
- .container .offset-by-five,
- .container .offset-by-six,
- .container .offset-by-seven,
- .container .offset-by-eight,
- .container .offset-by-nine,
- .container .offset-by-ten,
- .container .offset-by-eleven,
- .container .offset-by-twelve,
- .container .offset-by-thirteen,
- .container .offset-by-fourteen,
- .container .offset-by-fifteen { padding-left: 0; }
-
- }
-
-
-/* #Mobile (Landscape)
-================================================== */
-
- /* Note: Design for a width of 480px */
-
- @media only screen and (min-width: 480px) and (max-width: 767px) {
- .container { width: 420px; }
- .container .columns,
- .container .column { margin: 0; }
-
- .container .one.column,
- .container .one.columns,
- .container .two.columns,
- .container .three.columns,
- .container .four.columns,
- .container .five.columns,
- .container .six.columns,
- .container .seven.columns,
- .container .eight.columns,
- .container .nine.columns,
- .container .ten.columns,
- .container .eleven.columns,
- .container .twelve.columns,
- .container .thirteen.columns,
- .container .fourteen.columns,
- .container .fifteen.columns,
- .container .sixteen.columns,
- .container .one-third.column,
- .container .two-thirds.column { width: 420px; }
- }
-
-
-/* #Clearing
-================================================== */
-
- /* Self Clearing Goodness */
- .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
-
- /* Use clearfix class on parent to clear nested columns,
- or wrap each row of columns in a */
- .clearfix:before,
- .clearfix:after,
- .row:before,
- .row:after {
- content: '\0020';
- display: block;
- overflow: hidden;
- visibility: hidden;
- width: 0;
- height: 0; }
- .row:after,
- .clearfix:after {
- clear: both; }
- .row,
- .clearfix {
- zoom: 1; }
-
- /* You can also use a
to clear columns */
- .clear {
- clear: both;
- display: block;
- overflow: hidden;
- visibility: hidden;
- width: 0;
- height: 0;
- }