Showing preview only (240K chars total). Download the full file or copy to clipboard to get everything.
Repository: crushlovely/skyline
Branch: master
Commit: 7c5b977e1f58
Files: 51
Total size: 225.3 KB
Directory structure:
gitextract_fuxr4rg9/
├── .gitignore
├── LICENSE
├── README.md
├── css/
│ ├── README.md
│ ├── base/
│ │ ├── _dev-helpers.scss
│ │ ├── _fonts.scss
│ │ ├── _mixin-breakpoints.scss
│ │ ├── _mixin-clearfix.scss
│ │ ├── _mixin-font-face-importer.scss
│ │ ├── _mixin-gradual-media-queries.scss
│ │ ├── _print.scss
│ │ ├── _reset.scss
│ │ └── _vars.scss
│ ├── elements/
│ │ ├── _body.scss
│ │ ├── _buttons.scss
│ │ ├── _code.scss
│ │ ├── _forms.scss
│ │ ├── _headings.scss
│ │ ├── _hr.scss
│ │ ├── _html.scss
│ │ ├── _icons.scss
│ │ ├── _images.scss
│ │ ├── _links.scss
│ │ ├── _lists.scss
│ │ ├── _quotes.scss
│ │ ├── _tables.scss
│ │ └── _text.scss
│ ├── layout/
│ │ ├── _container.scss
│ │ ├── _grids.scss
│ │ ├── _hide.scss
│ │ ├── _media.scss
│ │ ├── _ups.scss
│ │ └── _widths.scss
│ ├── modules/
│ │ ├── _alerts.scss
│ │ ├── _blocks.scss
│ │ ├── _callouts.scss
│ │ ├── _heroes.scss
│ │ ├── _modals.scss
│ │ ├── _pages.scss
│ │ ├── _site-footer.scss
│ │ ├── _site-header.scss
│ │ ├── _site-main.scss
│ │ ├── _site.scss
│ │ ├── _thumbnails.scss
│ │ └── _video-embeds.scss
│ ├── screen.css
│ └── screen.scss
├── example-forms.html
├── example-grids.html
├── example-modules.html
└── index.html
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
.DS_Store
.sass-cache
stylesheets/.sass-cache
================================================
FILE: LICENSE
================================================
The MIT License
Copyright (c) 2014 Jeff Schram (Crush & Lovely)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
# Skyline
Evolving CSS Architecture
### Introduction
Skyline is a starting point for building custom CSS frameworks. The starter kit provides a solid CSS architecture that acts as a scaffolding to support your unique design system. It promotes object-oriented CSS, written in SCSS using BEM notation.
Learn more at http://skyline.is
Take a look at the example pages, with the initial starter styles at [http://crushlovely.github.io/skyline](http://crushlovely.github.io/skyline)
### Credits
Developed by the [Crush & Lovely](http://crushlovely.com) Engineering Team
* Jeff Schram / [@jeffschram](http://twitter.com/jeffschram) / [jeffschram.com](http://jeffschram.com)
* with Adam Becker, Jacob Fentress, & Ryan Buttrey
Feel free to contact Jeff on twitter [@jeffschram](http://twitter.com/jeffschram) with questions, comments, etc. And issues and pull requests are always welcome.
### Setup
We wanted to keep the starter files as lean as possible. This isn't a self-contained app, it has demo images, example HTML, and the Skyline SCSS files in the CSS folder. You'll likely copy the SCSS files into your own app, and use the example HTML files as guides to mark up your own pages.
```
├── css
| ├── base
| ├── variables, resets, mixins, global assets like fonts
| ├── elements
| ├── styles for base elements (p, ul, img, form, etc.)
| ├── layout
| ├── grids, widths, utilities, etc.
| ├── modules
| ├── styles for objects/modules you create (.site-header, .hero, .page, .bio, .site-footer, etc.)
| ├── README.md (credits and info about Skyline SCSS)
|
| ├── screen.scss (the manifest file that pulls in all the partials and compiles into screen.css)
|
├── images
| ├── (placeholder images are here for example pages)
|
├── example-forms.html
|
├── example-grids.html
|
├── example-modules.html
|
├── index.html
|
├── README.md
```
### Skyline's architecture is composed of 4 layers.
Base contains global settings, variables, resets, and mixins. These make up the foundation of your CSS.
Elements contains all the global styling for basic stand-alone elements; such as links, quotes, tables, and text.
Layout contains structural helper classes like .container, which restricts content to a consistent max-width, and a responsive grid system as well.
Modules are custom-made components that are used throughout your site. These include global modules like the site header and footer, and other reusable modules like alerts and heroes.
### See it in action
You can view the example pages in a browser, make sure you're compiling the SCSS if you want to see any changes you've made to the Skyline files reflected in the examples.
### Documentation
Extensive docs are in the works, but not yet released. However, Skyline makes it easy by adding detailed documentation in the comments of the scss partials themselves. Descriptions are right next to the actual code, making it simple to learn how it works.
## Copyright
Copyright (c) 2014 Jeff Schram (Crush & Lovely). See LICENSE for further details.
================================================
FILE: css/README.md
================================================
BUILT WITH SKYLINE: EVOLVING CSS ARCHITECTURE
=========================================================
SKYLINE CREATED BY CRUSH & LOVELY ENGINEERING
---------------------------------------------------------
Jeff Schram Adam Becker
@jeffschram @adambbecker
jeffschram.com adambbecker.com
Jacob Fentress Ryan Buttrey
@jfentress @ryanbuttrey
jacobfentress.com ryanbuttrey.com
COLOPHON & GUIDELINES
---------------------------------------------------------
Skyline is an object-oriented CSS architecture system
written in SCSS with BEM notation and is heavily inspired
by the concepts found in SMACCS, ITCSS, Bootstrap, &
Atomic Design.
ADDITIONAL CREDITS, INSPIRATION & SHOUT OUTS
---------------------------------------------------------
Harry Roberts Chris Coyier Brad Frost
@csswizardry @crishcoyier @bradfrost
csswizardry.com css-tricks.com patternlab.io
inuitcss.com codepen.io bradfrostweb.com
Jonathan Snook Nicole Sullivan
@snook @stubbornella
smaccs.com stubbornella.org
- For some mixins, naming conventions and OOCSS concepts
- Check these guys out and learn from their awesomeness
Nicolas Gallagher
http://nicolasgallagher.com
http://necolas.github.io/normalize.css/
- For the reset
HTML5 Boilerplate (@h5bp)
html5boilerplate.com
- For the print stylesheet
Twitter Bootstrap (@twbootstrap)
twitter.github.com/bootstrap
- For some component ideas, naming conventions and javascript
QUICK NOTE
---------------------------------------------------------
A quick note on navigating through the project files:
We are using @waypoints to allow you to easily search
for certain sections. For instance, to get to the
Table Of Contents (or toc) just search for "@toc"
================================================
FILE: css/base/_dev-helpers.scss
================================================
/**
@dev helpers
--------------------------------------------------------
base/_dev-helpers.scss
--------------------------------------------------------
Dev helpers highlight elements and/or show information
about the site and its current state (breakpoints, etc.)
These are made active by adding classes to the HTML
element. A JS system to toggle these classes is in
the works.
This partial requires:
* base/_vars.scss
* base/_mixin-breakpoints.scss
-------------------------------------------------------- */
// Dev configuration
// --------------------------------------------------------
//
// Define color variables
//
$dev__color__default: $color__grey;
$dev__color__xs: $color__sky-blue;
$dev__color__sm: $color__green;
$dev__color__md: $color__salmon;
$dev__color__lg: $color__blue;
$dev__color__xl: $color__purple;
$dev__color__xxl: $color__brown;
//
// Define background opacity
$dev__bg-opacity: .25;
/* @highlight elements at breakpoint
--------------------------------------------------------
Highlight an element at certain breakpoints by changing
its color;
Add .dev--highlight to the HTML element to enable this.
Example: Highlight a title at MD breakpoint
<h1 class="md-highlight">I will change color at MD breakpoint</h1>
-------------------------------------------------------- */
.dev--highlight-elements {
@include bp-at-least($breakpoint__xs) {
[class*="-highlight"] { color: inherit; }
.xs-highlight { color: $dev__color__xs; }
}
@include bp-at-least($breakpoint__sm) {
[class*="-highlight"] { color: inherit; }
.sm-highlight { color: $dev__color__sm; }
}
@include bp-at-least($breakpoint__md) {
[class*="-highlight"] { color: inherit; }
.md-highlight { color: $dev__color__md; }
}
@include bp-at-least($breakpoint__lg) {
[class*="-highlight"] { color: inherit; }
.lg-highlight { color: $dev__color__lg; }
}
@include bp-at-least($breakpoint__xl) {
[class*="-highlight"] { color: inherit; }
.xl-highlight { color: $color__purple; }
}
@include bp-at-least($breakpoint__xxl) {
[class*="-highlight"] { color: inherit; }
.xxl-highlight { color: $dev__color__xxl; }
}
}
/* @highlight grids in dev mode
--------------------------------------------------------
Indicate grids using responsive widths at certain breakpoints.
Add .dev--grids to the HTML element to enable this.
No extra classes are needed on the grids themselves.
-------------------------------------------------------- */
.dev--highlight-grids {
// Grids
//
.g, .grid {
> * {
min-height: 4em;
background: rgba(193, 199, 208, .5);
border: 1px solid rgba(193, 199, 208, .5);
}
@include bp-at-least($breakpoint__xs) {
&[class*="xs-"] > * {
border-color: $dev__color__xs;
background: rgba($dev__color__xs, $dev__bg-opacity);
}
}
@include bp-at-least($breakpoint__sm) {
&[class*="sm-"] > * {
border-color: $dev__color__sm;
background: rgba($dev__color__sm, $dev__bg-opacity);
}
}
@include bp-at-least($breakpoint__md) {
&[class*="md-"] > * {
border-color: $dev__color__md;
background: rgba($dev__color__md, $dev__bg-opacity);
}
}
@include bp-at-least($breakpoint__lg) {
&[class*="lg-"] > * {
border-color: $dev__color__lg;
background: rgba($dev__color__lg, $dev__bg-opacity);
}
}
@include bp-at-least($breakpoint__xl) {
&[class*="xl-"] > * {
border-color: $color__purple;
background: rgba($color__purple, $dev__bg-opacity);
}
}
@include bp-at-least($breakpoint__xxl) {
&[class*="xxl-"] > * {
border-color: $dev__color__xxl;
background: rgba($dev__color__xxl, $dev__bg-opacity);
}
}
}
// Ups
.gw, .grid-wrap {
@include bp-at-least($breakpoint__xs) {
&[class*="xs-"][class*="-up"] > * > * {
border-color: $dev__color__xs;
background: rgba($dev__color__xs, $dev__bg-opacity);
}
}
@include bp-at-least($breakpoint__sm) {
&[class*="sm-"][class*="-up"] > * > * {
border-color: $dev__color__sm;
background: rgba($dev__color__sm, $dev__bg-opacity);
}
}
@include bp-at-least($breakpoint__md) {
&[class*="md-"][class*="-up"] > * > * {
border-color: $dev__color__md;
background: rgba($dev__color__md, $dev__bg-opacity);
}
}
@include bp-at-least($breakpoint__lg) {
&[class*="lg-"][class*="-up"] > * > * {
border-color: $dev__color__lg;
background: rgba($dev__color__lg, $dev__bg-opacity);
}
}
@include bp-at-least($breakpoint__xl) {
&[class*="xl-"][class*="-up"] > * > * {
border-color: $color__purple;
background: rgba($color__purple, $dev__bg-opacity);
}
}
@include bp-at-least($breakpoint__xxl) {
&[class*="xxl-"][class*="-up"] > * > * {
border-color: $dev__color__xxl;
background: rgba($dev__color__xxl, $dev__bg-opacity);
}
}
}
}
/* @show the current breakpoint
--------------------------------------------------------
Adds a badge to the bottom right of the body to show
the current breakpoint.
To enable this, add .dev--show-breakpoint to the HTML
element
-------------------------------------------------------- */
.dev--show-breakpoint {
body:before {
content: "-";
position: fixed;
bottom: 0;
right: 0;
padding: 1em;
border: 1px solid $dev__color__default;
background: rgba($dev__color__default, $dev__bg-opacity);
font-size: .25em;
line-height: 1;
color: $dev__color__default;
@include bp-at-least($breakpoint__xs) {
content: "XS";
color: $dev__color__xs;
background: rgba($dev__color__xs, $dev__bg-opacity);
border-color: $dev__color__xs;
}
@include bp-at-least($breakpoint__sm) {
content: "SM";
color: $dev__color__sm;
background: rgba($dev__color__sm, $dev__bg-opacity);
border-color: $dev__color__sm;
}
@include bp-at-least($breakpoint__md) {
content: "MD";
color: $dev__color__md;
background: rgba($dev__color__md, $dev__bg-opacity);
border-color: $dev__color__md;
}
@include bp-at-least($breakpoint__lg) {
content: "LG";
color: $dev__color__lg;
background: rgba($dev__color__lg, $dev__bg-opacity);
border-color: $dev__color__lg;
}
@include bp-at-least($breakpoint__xl) {
content: "XL";
color: $dev__color__xl;
background: rgba($dev__color__xl, $dev__bg-opacity);
border-color: $dev__color__xl;
}
@include bp-at-least($breakpoint__xxl) {
content: "XXL";
color: $dev__color__xxl;
background: rgba($dev__color__xxl, $dev__bg-opacity);
border-color: $dev__color__xxl;
}
}
}
================================================
FILE: css/base/_fonts.scss
================================================
/**
@fonts
--------------------------------------------------------
base/_fonts.scss
--------------------------------------------------------
Define the fonts used in this app and declare silent
classes to be used in your CSS.
If you are using a webfont that you're hosting, add
the @embed-font() mixin from base/_mixin-font-face-importer.scs
before you declare your fonts.
Usage: Create a font-family named "interstate-light" using a font at /fonts/interstate_light-webfont.woff (and other extensions)
@include embed-font("interstate-light", "/fonts/interstate_light-webfont");
If you are using Google Fonts, you can add the
import code before you declare your fonts.
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700);
-------------------------------------------------------- */
/* @sans
--------------------------------------------------------
This is your basic sans font.
Usage: use sans regular on a p
p {
@extend %sans--regular;
}
------------------------------------------------------ */
$sans:sans-serif;
%sans--light {
font-family: $sans;
font-weight: 300;
font-style: normal;
}
%sans--regular {
font-family: $sans;
font-weight: 400;
font-style: normal;
}
%sans--semi-bold {
font-family: $sans;
font-weight: 600;
font-style: normal;
}
%sans--bold {
font-family: $sans;
font-weight: 700;
font-style: normal;
}
/* @serif
--------------------------------------------------------
This is your basic serif font.
Usage: use serif regular on a p
p {
@extend %serif--regular;
}
-------------------------------------------------------- */
$serif: georgia, times;
%serif--light {
font-family: $serif;
font-weight: 300;
font-style: normal;
}
%serif--regular {
font-family: $serif;
font-weight: 400;
font-style: normal;
}
%serif--italic {
font-family: $serif;
font-weight: 400;
font-style: italic;
}
%serif--semi-bold {
font-family: $serif;
font-weight: 600;
font-style: italic;
}
================================================
FILE: css/base/_mixin-breakpoints.scss
================================================
/**
@breakpoints mixin
-----------------------------------------------------
base/_mixin-breakpoints.scss
-----------------------------------------------------
This mixin makes using inline media queries easy.
Options include bp-at-least for min-width, bp-until
for max-width, and bp-between for min and max widths.
You can use your breakpoint vars, or any other value.
Usage: styles at medium breakpoint
.some-element {
@include bp-at-least($breakpoint__md){
your-styles: go-here;
}
}
Usage: styles at custom breakpoint
.another-element {
@include bp-until(83.45em){
your-styles: go-here;
}
}
----------------------------------------------------- */
// Breakpoint At Least
@mixin bp-at-least($device-width) {
@media screen and (min-width: $device-width) {
@content
}
}
// Breakpoint Until
@mixin bp-until($device-width) {
@media screen and (max-width: $device-width - .01) {
@content
}
}
// Breakpoint Between
@mixin bp-between($device-width, $device-width2) {
@media screen and (min-width: $device-width) and (max-width: $device-width2) {
@content
}
}
================================================
FILE: css/base/_mixin-clearfix.scss
================================================
/**
@clearfix mixin
---------------------------------------------------------
base/_clearfix.scss
--------------------------------------------------------
Use @include clearfix(); in your CSS
Usage: clearfix mixin
.element-to-clearfix {
@include cleafix();
}
--------------------------------------------------------- */
@mixin clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
// For IE 6/7 (trigger hasLayout)
zoom: 1;
}
================================================
FILE: css/base/_mixin-font-face-importer.scss
================================================
/**
@font-face importer mixin
-----------------------------------------------------------
_base/_mixin-font-face-importer.scss
-----------------------------------------------------------
Use this mixin to embed a font
$font-name is used in your css in font-family declarations
$font-filepath-and-name is the location of your font
file and the filename WITHOUT the file extension. The
extensions are added here in the mixin
Usage:
@include embed-font($font-name, $font-filepath-and-name);
--------------------------------------------------------- */
@mixin embed-font($font-name, $font-filepath-and-name){
@font-face {
font-family: $font-name;
src: url($font-filepath-and-name+".eot"); /* IE9 Compat Modes */
src: url($font-filepath-and-name+".eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
url($font-filepath-and-name+".woff") format('woff'), /* Modern Browsers */
url($font-filepath-and-name+".ttf") format('truetype'), /* Safari, Android, iOS */
url($font-filepath-and-name+".svg#svgFontName") format('svg'); /* Legacy iOS */
}
}
================================================
FILE: css/base/_mixin-gradual-media-queries.scss
================================================
/**
@gradual media queries mixin
--------------------------------------------------------
base/_mixin-gradual-media-queries.scss
--------------------------------------------------------
The mixin takes arguments of start-width, start-fontsize,
end-width, and end-fontsize and then creates media queries
between those start and end points at another argument
value, increment-width.
Usage: Gradually increase the font size of the html
html {
@include gradual-queries(20em, 80%, 70em, 100%, 10em)
}
In the above usage, the html fontsize will start out at
80% at 20em and end up at 100% at 70em - and the gradual
changes in the fontsize percentage will be calculated
at 10em intervals.
See http://codepen.io/jeffschram/pen/IixqA
------------------------------------------------------ */
// FUNCTION TO STRIP UNITS
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
// GRADUAL QUERIES MIXIN
@mixin gradual-queries($start-width, $start-fontsize, $end-width, $end-fontsize, $increment-width){
// Define number of increments, $increments
$increments: ceil((strip-units($end-width) - strip-units($start-width))/strip-units($increment-width));
// Define the difference between fontsizes
$fontsize-diff: (strip-units($end-fontsize) - strip-units($start-fontsize));
// The amount of difference, incrementally
$fontsize-increment: $fontsize-diff/$increments;
// Apply adjusted fontsizes
@for $i from 0 to $increments {
$increment-point: $start-width+$i*$increment-width;
@media (min-width: $increment-point){
font-size: $start-fontsize+($i*$fontsize-increment);
}
}
@media (min-width: $end-width){
font-size: $end-fontsize;
}
}
================================================
FILE: css/base/_print.scss
================================================
/**
@print
--------------------------------------------------------
base/_print.scss
--------------------------------------------------------
Print Stylesheet from http://h5bp.com/r
----------------------------------------------------- */
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
CREDIT: HTML5 Boilerplate
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
================================================
FILE: css/base/_reset.scss
================================================
/**
@reset
---------------------------------------------------------
base/_reset.scss
--------------------------------------------------------
This reset institutes the border-box box model and then
block and margin/padding resets.
Throughout Skyline, each partial has it's own resets.
This allows you to only use what you need.
Credit goes to Normalize
http://normalize.css v2.1.0 http://git.io/normalize
--------------------------------------------------------- */
// Apply the new box model definition & reset to no margin on anything
* {
&,
&:before,
&:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
}
// Apply display block to new HTML5 elements
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary,
audio,
canvas,
video {
display: block;
}
================================================
FILE: css/base/_vars.scss
================================================
/**
@variables
---------------------------------------------------------
base/_vars.scss
--------------------------------------------------------
Global variables are defined here. Define your colors,
spacing and grid settings.
----------------------------------------------------- */
/* @colors
--------------------------------------------------------
All color variables are defined here.
We use real color names here. Although naming something
like 'brand' is in fact more generic and reusable, we've
found that you end up creating variables like $brand-2,
$brand-alt, $brand-complimentary etc. While coding,
it's too easy to forget what those mean.
If the design changes drastically and the brand changes
from, let's say, blue to green, just do a global
find/replace - that's what text editors are for.
------------------------------------------------------ */
// Colors
//
$color__black: #515554;
$color__grey: #b0b3b3;
$color__grey--light: #cfd2d2;
$color__offwhite: #f4f4f4;
$color__white: #fff;
$color__green: #a2bb60;
$color__salmon: #eb6d58;
$color__sky-blue: #94c1c8;
$color__blue: #0D699C;
$color__purple: #c492bc;
$color__navy: #151e23;
$color__brown: #76400b;
$color__error: red;
$color__warning: yellow;
$color__info: blue;
$color__success: green;
/* @breakpoints
---------------------------------------------------------
Define global breakpoints as xs, sm, md, lg, xl, xxl
--------------------------------------------------------- */
// Define breakpoints map to help with some other functions
// and mixins. Very fancy :)
//
$breakpoints: (
n: 0,
xs: 20em,
sm: 34.375em,
md: 48em,
lg: 64em,
xl: 78.5em,
xxl: 100em
);
// Define individual variables
//
// Extra Small: Small mobile
$breakpoint__xs: map-get($breakpoints, xs);
// Small: Larger mobile
$breakpoint__sm: map-get($breakpoints, sm);
// Medium: Tablet
$breakpoint__md: map-get($breakpoints, md);
// Large: Landscape tablet, beginning desk size
$breakpoint__lg: map-get($breakpoints, lg);
// Extra Large: Large Desk size
$breakpoint__xl: map-get($breakpoints, xl);
// Double Extra Large: Huge Desk size
$breakpoint__xxl: map-get($breakpoints, xxl);
/* @global spacing unit
---------------------------------------------------------
Define an em value for $unit. $unit is a helpful little
variable that serves to keep your spacing consistent.
Most often, 1 $unit is equal to your baseline height. So
if your baseline height is 1.125ems (which is 18px), that's
the value of 1 $unit.
--------------------------------------------------------- */
$unit: 1.125em;
================================================
FILE: css/elements/_body.scss
================================================
/**
@body
--------------------------------------------------------
elements/_body.scss
--------------------------------------------------------
Body should contain the document's default font and
background color for the content, if that background
color is different than the html.
------------------------------------------------------ */
body {
@extend %sans--regular;
line-height: 1.5;
color: $color__black;
background: $color__white;
}
================================================
FILE: css/elements/_buttons.scss
================================================
/**
@buttons
--------------------------------------------------------
elements/_buttons.scss
--------------------------------------------------------
Buttons are a common UI component in sites/apps. They
are usually either anchor, button, or input elements
with a classname of 'btn'. They provide an easily
identified clickable target.
Buttons commonly have modifying classes that apply
specific styles. Examples of these are .btn--large and
.btn--inline
Example: Buttons using anchors
<p><a href="#" class="btn">Regular Button</a></p>
Example: Buttons using buttons
<p><button class="btn">Regular Button</button></p>
------------------------------------------------------ */
button {
&:focus,
&:active {
outline: none;
box-shadow: none;
border: none;
}
}
.btn {
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
background: $color__black;
color: $color__white;
border: none;
@extend %sans--regular;
font-size: 1.25em;
text-transform: uppercase;
text-decoration: none;
letter-spacing: .225em;
padding: 1em 1.25em;
&:hover,
&:focus,
&:active {
outline: none;
opacity: .85;
}
}
/* @btn--secondary
--------------------------------------------------------
A btn modifier, secondary
Example: .btn--secondary
<a class="btn btn--secondary">Secondary button</a>
------------------------------------------------------ */
.btn--secondary {
background: none;
border: 1px solid $color__white;
color: $color__white;
}
/* @btn--large
--------------------------------------------------------
A btn modifier, large
Example: .btn--large
<a class="btn btn--large">Large button</a>
------------------------------------------------------ */
.btn--large {
@include bp-at-least($breakpoint__sm) {
font-size: 1.25em;
padding: 1.25em 2.75em;
}
}
/* @btn--inline
--------------------------------------------------------
A btn modifier, if this button is in a paragraph or
in anything else that has a defined font-size, this
modifier will make the btn inherit the font-size of
the partent.
Example: .btn--inline
<p>Here's some text <a class="btn btn--inline">Cool button</a> text keeps going</p>
------------------------------------------------------ */
.btn--inline {
font-size: 1em;
}
/* @btn--block
--------------------------------------------------------
A btn modifier - makes the button display block, 100%
width and aligns the text to the center. Removes left
and right padding since the text is center aligned, it
is not needed. Actually sometimes having the padding
on the left and right causes problems if the centered
text is quite long - so we just remove it.
Example: .btn--block
<a href="#" class="btn btn--block">Block button</a>
------------------------------------------------------ */
.btn--block {
display: block;
width: 100%;
text-align: center;
padding-right: 0;
padding-left: 0;
}
/* @btn--icon
--------------------------------------------------------
A btn modifier - makes the button display block, 100%
width and aligns the text to the center. Removes left
and right padding since the text is center aligned, it
is not needed. Actually sometimes having the padding
on the left and right causes problems if the centered
text is quite long - so we just remove it.
Example: .btn--icon
<button class="btn--icon ss-icon">Block button</button>
------------------------------------------------------ */
.btn--icon {
background: transparent;
border: none;
padding: 0;
font-size: 1em;
}
================================================
FILE: css/elements/_code.scss
================================================
/**
@code
--------------------------------------------------------
elements/_code.scss
--------------------------------------------------------
Code elements like <code> and <pre>
Example: Code in a paragraph
<p>This is a cool paragraph about a classname called <code>.franz</code></p>
----------------------------------------------------- */
// Code
//
code {
vertical-align: middle;
padding: .25em .5em;
background: rgba(193, 199, 208, .3);
}
// Pre
pre {
}
================================================
FILE: css/elements/_forms.scss
================================================
/**
@forms
---------------------------------------------------------
elements/_forms.scss
--------------------------------------------------------
Base styles for all forms and form related elements
Below you'll set styles for all forms, and if you have
any specific kinds of forms, like a search form that you
create a classname of form--search, put that at the
bottom of this partial.
This scss partial is pretty big. Here's how it is
organized.
* Base styling on form elements
* Styles for form & form modules
--------------------------------------------------------- */
/* @text inputs
--------------------------------------------------------
Base styles for inputs
Example: Text Input
<input type="text" name="schramburger" placeholder="Your Name">
Inputs can use sizing classes, .input--s .input--l
Example: Text Small Input
<input class="input--s" type="text" name="schramburger" placeholder="Your Name">
Example: Text Input
<input class="input--l" type="text" name="schramburger" placeholder="Your Name">
------------------------------------------------------ */
// Input elements
input {
-webkit-appearance: none;
border-radius: 0;
@extend %serif--light;
width: 100%;
padding: 1em;
border: 1px solid $color__black;
color: $color__black;
&:focus {
outline: none;
}
// Size modifiers
&.input--s {
font-size: .5rem;
}
&.input--l {
font-size: 1.5rem;
}
}
// Define the input placeholder color to be reused in the
// following code
$input-placeholder: $color__black;
// Placeholders
input {
&::-webkit-input-placeholder {
color: $input-placeholder;
@extend %serif--light;
}
&:-moz-placeholder {
color: $input-placeholder;
@extend %serif--light;
}
&::-moz-placeholder {
color: $input-placeholder;
}
&:-ms-input-placeholder {
color: $input-placeholder;
}
}
// Placeholders on focus
input:focus {
&::-webkit-input-placeholder {
opacity: .3;
}
&:-moz-placeholder {
opacity: .3;
}
&::-moz-placeholder {
opacity: .3;
}
&:-ms-input-placeholder {
opacity: .3;
}
}
/* @select inputs
--------------------------------------------------------
Base styling for all selects
Example: Select Input
<select name="schramburger">
<option value="value-1">Option 1</option>
<option value="value-2">Option 2</option>
<option value="value-3">Option 3</option>
<option value="value-4">Option 4</option>
</select>
Selects can have added sizing classes, .select--s and .select--l
Example: Small select
<select name="schramburger" class="select--s">
<option value="value-1">Option 1</option>
<option value="value-2">Option 2</option>
<option value="value-3">Option 3</option>
<option value="value-4">Option 4</option>
</select>
Example: Large select
<select name="schramburger" class="select--l">
<option value="value-1">Option 1</option>
<option value="value-2">Option 2</option>
<option value="value-3">Option 3</option>
<option value="value-4">Option 4</option>
</select>
------------------------------------------------------ */
select {
width: 100%;
font-size: 1rem;
&.select--sm {
font-size: .5rem;
}
&.select--lg {
font-size: 1.5rem;
}
}
/* @textareas
--------------------------------------------------------
Base styling for textareas
Textareas can have .textarea--s or .textarea--l classes
for different sizes
Example: Textarea
<textarea name="schramburger">Hello, there.</textarea>
Example: Small Textarea
<textarea class="textarea--s" name="schramburger">Hello, there.</textarea>
Example: Large Textarea
<textarea class="textarea--l" name="schramburger">Hello, there.</textarea>
------------------------------------------------------ */
textarea {
width: 100%;
min-height: 6em;
padding: 1em;
border: solid 1px $color__black;
@extend %serif--light;
&:focus {
outline: none;
}
&.textarea--s {
font-size: .5rem;
}
&.textarea--l {
font-size: 1.5rem;
}
}
/* @radio inputs
--------------------------------------------------------
Base styling for radio inputs. Radios are surrounded
by a label for better click targets.
Example: Radio
<label class="label--radio" for="radio-1"><input id="radio-1" type="radio" value="yes"> Radio label</label>
Example: Radio with super-long label
<label class="label--radio" for="radio-3"><input id="radio-3" type="radio" value="yes"> Radio label Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, accusantium ipsum animi perspiciatis officiis iure voluptatibus corporis. Enim, officia, tempora vitae libero dolore sint voluptatum. Blanditiis odit laudantium minus repellat</label>
------------------------------------------------------ */
input[type=radio] {
-webkit-appearance: none;
width: 1em;
height: 1em;
padding: 0;
border-radius: 50%;
border: 1px solid #444;
background: transparent;
&:checked {
background: #222;
}
}
.label--radio {
display: inline-block;
position: relative;
cursor: pointer;
padding-left: 1em;
input {
position: absolute;
top: .7em;
left: 0;
}
}
/* @checkbox inputs
--------------------------------------------------------
Base styling for checkbox inputs. Checkboxes are surrounded
by a label for better click targets.
Example: Checkbox
<label class="label--checkbox" for="checkbox-1"><input id="checkbox-1" type="checkbox" value="yes"> Checkbox label</label>
Example: Checkbox with super-long label
<label class="label--checkbox" for="checkbox-3"><input id="checkbox-3" type="checkbox" value="yes"> Checkbox label Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, accusantium ipsum animi perspiciatis officiis iure voluptatibus corporis. Enim, officia, tempora vitae libero dolore sint voluptatum. Blanditiis odit laudantium minus repellat</label>
------------------------------------------------------ */
input[type=checkbox] {
-webkit-appearance:none;
width: 1em;
height: 1em;
padding: 0;
border: 1px solid #444;
background: transparent;
&:checked {
background: #222;
}
}
.label--checkbox {
display: inline-block;
position: relative;
cursor: pointer;
padding-left: 1em;
input {
position: absolute;
top: .7em;
left: 0;
}
}
/* @textareas
--------------------------------------------------------
Base styling for textareas
Example: Textarea
<textarea name="schramburger">Hello, there.</textarea>
------------------------------------------------------ */
textarea {
width: 100%;
}
/* @labels
--------------------------------------------------------
Base styling for labels
Example: label
<label>Don't label me, I'm a free spirit</labe>
------------------------------------------------------ */
label {
font-size: 1em;
font-weight: bold;
}
/* @form
--------------------------------------------------------
Like the bootstrap convention, apply standard styling
on any form with the classname .form
This allows us to create modifier classnames like
.form--inline and .form--horizontal, which will be
laid out further below.
------------------------------------------------------ */
.form {
display: block;
padding: 2em;
border: 1px solid #888;
background: #eee;
}
/* @form-header
--------------------------------------------------------
A form header usually consists of a title and some
copy.
Example: Form header
<header class="form__header">
<h2>Contact Us</h2>
<p>Use this form to contact us. We love talking to
our customers.</p>
</header>
-------------------------------------------------------- */
.form__header {
padding-bottom: 1em;
margin-bottom: 2em;
border-bottom: 1px solid #888;
}
/* @fieldsets
--------------------------------------------------------
Fieldsets group together related fields.
Example: Fieldset
<fieldset>
<legend>Personal Information</legend>
<article class="field">
<label class="field__label" for="exampleInput1">Your Name</label>
<input class="field__input="exampleInput1" type="text" required="required" placeholder="Your name">
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
<article class="field">
<label class="field__label" for="exampleInput2">Your Email</label>
<input class="field__input="exampleInput2" type="email" required="required" placeholder="Your email">
<span class="field__feedback"></span>
<span class="field__hint">Must be a valid email address</span>
</article>
</fieldset>
Fieldsets are also nested inside other fieldsets.
Example: Nested Fieldsets
<fieldset>
<legend>Personal Information</legend>
<article class="field">
<label class="field__label" for="exampleInput31">Your Name</label>
<input class="field__input="exampleInput31" type="text" required="required" placeholder="Your name">
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
<article class="field">
<label class="field__label" for="exampleInput32">Your Email</label>
<input class="field__input="exampleInput32" type="email" required="required" placeholder="Your email">
<span class="field__feedback"></span>
<span class="field__hint">Must be a valid email address</span>
</article>
<fieldset>
<legend>Address</legend>
<article class="field">
<label class="field__label" for="exampleInput33">Address 1</label>
<input class="field__input="exampleInput33" type="text" required="required" placeholder="Address 1">
<span class="field__feedback"></span>
<span class="field__hint">Must be a valid email address</span>
</article>
<article class="field">
<label class="field__label" for="exampleInput34">Address 2</label>
<input class="field__input="exampleInput34" type="text" required="required" placeholder="Address 2">
<span class="field__feedback"></span>
<span class="field__hint">Must be a valid email address</span>
</article>
</fieldset>
</fieldset>
-------------------------------------------------------- */
fieldset {
border: none;
}
/* @fields
--------------------------------------------------------
A field is an article that contains the input and anything
related to the input.
Example: Field for a text input
<article class="field">
<label class="field__label" for="exampleInput1">Your Name</label>
<input class="field__input="exampleInput1" type="text" required="required" placeholder="Your name">
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
Example: Field with hint
<article class="field">
<label class="field__label" for="exampleInput2">Your Email</label>
<input class="field__input="exampleInput2" type="email" required="required" placeholder="Your email">
<span class="field__feedback"></span>
<span class="field__hint">Must be a valid email address</span>
</article>
Example: Field with Error
<article class="field is-error">
<label class="field__label" for="exampleInput3">Your Email</label>
<input class="field__input="exampleInput3" type="email" required="required" placeholder="Your email">
<span class="field__feedback">Sorry, that email is in use.</span>
<span class="field__hint"></span>
</article>
Example: Field for a select input
<article class="field">
<label class="field__label" for="exampleInput4" >Select your favorite</label>
<select class="field__input input--select" id="exampleInput4" name="favorite-food">
<option>Pizza</option>
<option>Tacos</option>
<option>Burgers</option>
</select>
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
Example: Field for a textarea input
<article class="field">
<label class="field__label">Your Name</label>
<textarea class="field__input">Hello, there</textarea>
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
-------------------------------------------------------- */
.field {
position: relative;
margin-bottom: 2em;
}
// Field label
.field__label {
display: block;
}
// Field hint
.field__hint {
color: #888;
font-size: .75em;
padding: .25em 0;
font-style: italic;
}
// Field feedback
.field__feedback {
display: none; // hidden by default, shown if inside .is-error
font-size: .75em;
padding: .25em .75em;
background: rgba(218, 35, 0, 0.3);
color: white;
}
// Field error states
.field.is-error {
.field__feedback {
display: block;
}
input {
border: 1px solid rgba(218, 35, 0, 0.3);
}
}
/* @input group
--------------------------------------------------------
Group containing multiple inputs, helpful for lists
of radios or checkboxes. Shown below in a field...
Example: Field with input group of radios
<article class="field">
<label class="field__label">Choose your favorite</label>
<div class="field__input-group">
<label class="label--radio" for="favorite-food-1"><input id="favorite-food-1" name="favorite-food" type="radio" value="pizza"> Pizza</label>
<label class="label--radio" for="favorite-food-2"><input id="favorite-food-2" name="favorite-food" type="radio" value="tacos"> Tacos</label>
<label class="label--radio" for="favorite-food-3"><input id="favorite-food-3" name="favorite-food" type="radio" value="burgers"> Burgers</label>
</div>
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
Example: Field with input group of checkboxes
<article class="field">
<label class="field__label">Select your favorites</label>
<div class="field__input-group">
<label class="label--checkbox" for="favorite-food-4"><input id="favorite-food-4" name="favorite-food-alt" type="checkbox" value="pizza"> Pizza</label>
<label class="label--checkbox" for="favorite-food-5"><input id="favorite-food-5" name="favorite-food-alt" type="checkbox" value="tacos"> Tacos</label>
<label class="label--checkbox" for="favorite-food-6"><input id="favorite-food-6" name="favorite-food-alt" type="checkbox" value="burgers"> Burgers</label>
</div>
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
Example: Field with input group list modifier
<article class="field">
<label class="field__label">Select your favorites</label>
<div class="field__input-group--list">
<label class="label--checkbox" for="favorite-food-7"><input id="favorite-food-7" name="favorite-food-alt2" type="checkbox" value="pizza"> Pizza</label>
<label class="label--checkbox" for="favorite-food-8"><input id="favorite-food-8" name="favorite-food-alt2" type="checkbox" value="tacos"> Tacos</label>
<label class="label--checkbox" for="favorite-food-9"><input id="favorite-food-9" name="favorite-food-alt2" type="checkbox" value="burgers"> Burgers</label>
</div>
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
------------------------------------------------------ */
.field__input-group {
display: block;
> * {
display: inline-block;
margin-right: .5em;
&:last-child {
margin-right: 0;
}
}
}
// List mod
.field__input-group--list {
display: block;
> * {
display: block;
margin: .5em 0;
&:last-child {
margin-bottom: 0;
}
}
}
/* @form action
--------------------------------------------------------
Each form has an actions footer at the bottom to
submit the form
Example: Form Actions Footer
<footer class="form__actions">
<article class="field two-fiths">
<label class="field__label is-visually-hidden" for="exampleInput7" >Submit</label>
<input class="field__input btn btn--block" type="submit" id="exampleInput7" value="Submit">
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
</footer>
--------------------------------------------------------- */
.form__actions {
padding-top: 1em;
margin-top: 2em;
border-top: 1px solid #888;
}
================================================
FILE: css/elements/_headings.scss
================================================
/**
@headings
--------------------------------------------------------
elements/_headings.scss
--------------------------------------------------------
We set any base styles for any headings that have
no classnames.
Example: Headings
<h1>This is an h1 heading</h1>
<h2>This is an h2 heading</h2>
<h3>This is an h3 heading</h3>
<h4>This is an h4 heading</h4>
<h5>This is an h5 heading</h5>
<h6>This is an h6 heading</h6>
Additionally, we add classnames so you
can apply the styling of, for instance, an h1 to an h2.
Example: H1 styled like an H3
<h1 class="h3">This is an h1 but looks like an h3</h1>
------------------------------------------------------ */
// H1
h1, .h1 {
margin-bottom: 1em;
}
// H2
h2, .h2 {
margin-bottom: 1em;
}
// H3
h3, .h3 {
margin-bottom: 1em;
}
// H4
h4, .h4 {
margin-bottom: 1em;
}
// H5
h5, .h5 {
margin-bottom: 1em;
}
// H6
h6, .h6 {
margin-bottom: 1em;
}
================================================
FILE: css/elements/_hr.scss
================================================
/**
@hr
--------------------------------------------------------
elements/_hr.scss
--------------------------------------------------------
Horizontal Rule
Example:
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<hr>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
-------------------------------------------------------- */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
================================================
FILE: css/elements/_html.scss
================================================
/**
@html
--------------------------------------------------------
elements/_html.scss
--------------------------------------------------------
HTML should contain the site's default background color
and font-size
------------------------------------------------------ */
html {
// Check out base/_mixin-gradual-media-queries.scss
// for an explaination of this mixin that gradually
// changes the base fontsize.
font-size: 80%;
@include gradual-queries(20em, 80%, 80em, 100%, 10em);
}
* {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
================================================
FILE: css/elements/_icons.scss
================================================
/**
@icons
---------------------------------------------------------
elements/_icons.scss
--------------------------------------------------------
Your icon set may vary. In this partial, you may wish
to load in a font icon set and add all the associated
css that goes with it. This would be the case if you
were using something like Symbolset or IcoMoon for
example.
--------------------------------------------------------- */
/* @icon
--------------------------------------------------------
This is a basic icon element. We set some basic
structural styles and display styles to get the ball
rolling.
Example: Open Icon
<i class="icon icon--open">+</i>
Example: Close Icon
<i class="icon icon--close">×</i>
------------------------------------------------------ */
.icon {
color: inherit;
display: inline-block;
font-style: normal;
vertical-align: middle;
font-size: 1em;
}
================================================
FILE: css/elements/_images.scss
================================================
/**
@images
---------------------------------------------------------
elements/_images.scss
--------------------------------------------------------
Base styling for images, plus some helpful utility
classes that modify images.
Note: You won't add any styling to these image classes,
these are just utility classes
--------------------------------------------------------- */
/* @images
--------------------------------------------------------
Base Image Style is 100% width by default
Example: Image
<img src="http://fillmurray.com/600/300">
------------------------------------------------------ */
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle; // Remove the gap between images and the bottom of their containers: h5bp.com/i/440
}
/* @img--natural
--------------------------------------------------------
Natural Images are 100% max-width, but their natural width by default
Example: Image, Natural Width
<img class="img--natural" src="http://fillmurray.com/600/300">
------------------------------------------------------ */
.img--natural {
width: auto;
}
/* @img--title
--------------------------------------------------------
Title images fit within a heading/title element
Example: Image inside a title (.img--title)
<h1><img class="img--title" src="http://fillmurray.com/300/300"> Title Here versions of Lorem Ipsum.</h1>
<h2><img class="img--title" src="http://fillmurray.com/300/300"> Title Here versions of Lorem Ipsum.</h2>
<h3><img class="img--title" src="http://fillmurray.com/300/300"> Title Here versions of Lorem Ipsum.</h3>
------------------------------------------------------ */
.img--title {
height: 1em;
width: auto;
vertical-align: top;
}
/* @image placement
--------------------------------------------------------
Here are a few helper classes to position images, particularly
helpful inside paragraphs.
Example: Image Right
<p><img class="img--right" src="http://fillmurray.com/400/300"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Example: Image, Natural Width
<p><img class="img--left" src="http://fillmurray.com/400/300"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Example: Image, Center
<p><img class="img--center" src="http://fillmurray.com/400/300"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
------------------------------------------------------ */
.img--right {
width: auto;
float: right;
margin-bottom: 1*$unit;
margin-left: 1*$unit;
}
.img--left {
width: auto;
float:left;
margin-right: 1*$unit;
margin-bottom: 1*$unit;
}
.img--center {
width: auto;
display:block;
margin-right:auto;
margin-bottom: 1*$unit;
margin-left:auto;
}
// if these classes are used on an element that contains an image
// make the image its natural width
.img--right,
.img--left,
.img--center {
img {
width: auto;
}
}
/* @img--circle
--------------------------------------------------------
Popular circle image for bios etc.
Example: Circle image
<img class="img--circle" src="http://fillmurray.com/400/400">
------------------------------------------------------ */
.img--circle {
border-radius: 50%;
}
================================================
FILE: css/elements/_links.scss
================================================
/**
@links
--------------------------------------------------------
elements/_links.scss
--------------------------------------------------------
Links, <a> etc. & Webkit tap highlight
Example: link
<p>Lorem Ipsum is simply <a href="#">dummy text</a> of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
-------------------------------------------------------- */
/* @anchors
--------------------------------------------------------
Anchors will have this base styling
------------------------------------------------------ */
a {
color: inherit;
&:hover,
&:focus {
opacity: .75;
}
}
/* @webkit-tap-highlight
--------------------------------------------------------
Declare the webkit tap highlight style
------------------------------------------------------ */
body {
-webkit-tap-highlight-color: rba(0, 0, 0, .35);
}
================================================
FILE: css/elements/_lists.scss
================================================
/**
@lists
--------------------------------------------------------
elements/_lists.scss
--------------------------------------------------------
Structure for lists
Example: Unordered List
<ul>
<li>List item here</li>
<li>List item here</li>
<li>List item here</li>
<li>List item here</li>
<li>
<ul>
<li>Nested Item</li>
<li>Nested Item</li>
<li>Nested Item</li>
<li>Nested Item</li>
</ul>
</li>
</ul>
Example: Ordered List
<ol>
<li>List item here</li>
<li>List item here</li>
<li>List item here</li>
<li>List item here</li>
<li>
<ol>
<li>Nested Item</li>
<li>Nested Item</li>
<li>Nested Item</li>
<li>Nested Item</li>
</ul>
</li>
</ol>
-------------------------------------------------------- */
ul,
ol {
padding-left: 0;
margin-left: 1*$unit;
margin-bottom: 1*$unit;
li {
line-height: 2;
}
}
================================================
FILE: css/elements/_quotes.scss
================================================
/**
@quotes
--------------------------------------------------------
elements/_quotes.scss
--------------------------------------------------------
Blockquotes and pull quotes
----------------------------------------------------- */
/* @blockquote
--------------------------------------------------------
Example:
<blockquote>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<cite><a href="http://foo.com">The source</a></cite>
</blockquote>
-------------------------------------------------------- */
blockquote {
// Any custom styles below...
}
/* @pull-quote
--------------------------------------------------------
Large quotes pulled from body text.
Example:
<blockquote class="pull-quote">
<p>This is an awesome pull quote!</p>
</blockquote>
-------------------------------------------------------- */
.pull-quote {
// Any custom styles below...
}
================================================
FILE: css/elements/_tables.scss
================================================
/**
@tables
---------------------------------------------------------
elements/_tables.scss
--------------------------------------------------------
Base styling for tables
--------------------------------------------------------- */
/* @table
--------------------------------------------------------
Base table styling
Example: Table
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
------------------------------------------------------ */
table {
width: 100%;
border-collapse: collapse;
border: none;
}
th {
// Add custom styles below...
}
th,
td {
// Add custom styles below...
}
/* @table--striped
--------------------------------------------------------
Striped tables
Example: Table, striped
<table class="table--striped">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
------------------------------------------------------ */
// Striped tables
.table--striped {
tbody tr:nth-of-type(odd){
background-color: #eee; // Or whatever color you want
}
}
================================================
FILE: css/elements/_text.scss
================================================
/**
@text
--------------------------------------------------------
elements/_text.scss
--------------------------------------------------------
Some basic styles to paragraphs and
inline styles
----------------------------------------------------- */
/* @paragraphs
--------------------------------------------------------
Example: Paragraphs
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
-------------------------------------------------------- */
p {
margin-bottom: 1em;
line-height: 1.25*$unit;
}
/* @inline
--------------------------------------------------------
Common inline elements
Example: inline elements
<p>Lorem Ipsum is <b>bold</b> text of the <strong>strong</strong> printing and typesetting industry. Lorem Ipsum is <i>italic</i> simply dummy text <em>emphasized</em> of the printing and typesetting industry.</p<
-------------------------------------------------------- */
b,
strong {
// NOTE: use bold font-face if available instead of 'font-weight: bold'
font-weight: bold;
}
i,
em {
// NOTE: use italic font-face if available instead of 'font-style: italic'
font-style: italic;
}
================================================
FILE: css/layout/_container.scss
================================================
/**
@container
--------------------------------------------------------
layout/_container.scss
--------------------------------------------------------
The .container class is applied to restrict the
max-width of an element, usually a bit of content.
Often, you will place a .container div within another
element that has a background color. This gives you
a full-bleed background, but the content is contained
within the max-width.
Example: Container within a section
<section class="awesome-section-with-background-color">
<div class="container">
<p>Your content goes here... </p>
</div>
</section>
------------------------------------------------------ */
$container__max-width: 70em; // restricts width
.container {
@include clearfix();
margin-left: auto;
margin-right: auto;
max-width: $container__max-width;
padding: 0 1.5*$unit;
@include bp-at-least($breakpoint__sm) {
padding: 0 3*$unit;
}
}
================================================
FILE: css/layout/_grids.scss
================================================
/**
@grids
---------------------------------------------------------
layout/_grids.scss
--------------------------------------------------------
Skyline uses a simple grid system. It starts with
a wrapper div that can have a classname of .grid-wrap
or .gw for short. Inside of that div, you'll nest
your grid units. These are divs with classname of
either .grid or .g for short.
To specify the responsive behavior of the grid,
add width classes from layout/_widths.scss.
Example: Grid with responsive width classes
<div class="gw">
<div class="g sm-one-whole md-one-half lg-one-third xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-half lg-one-third xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-third lg-one-third xl-one-twelfth">...</div>
<div class="g sm-one-whole md-one-third lg-one-fifth xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-third lg-three-fifths xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-half lg-one-fifth xl-one-twelfth">...</div>
<div class="g sm-one-whole md-one-half lg-one-sixth xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-third lg-one-sixth xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-third lg-one-sixth xl-one-twelfth">...</div>
<div class="g sm-one-whole md-one-third lg-one-sixth xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-half lg-one-sixth xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-half lg-one-sixth xl-one-twelfth">...</div>
</div>
For a grid wrap containing equally-sized grid units, like
a gallery of thumbnails for instance, use the responsive ups
classes from layout/_widths.scss. With these classes
applied to the .grid-wrap/.gw, you won't need to specify
widths on the individual grid units, just on the wrapper.
Example: Grid with responsive ups classes
<div class="gw two-up sm-three-up md-four-up lg-six-up">
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
</div>
NOTE: see some test styles at the bottom of this partial
Remove them if you don't need them.
------------------------------------------------------ */
// Grid configuration
// -----------------------------------------------------
//
// Define the point at which grids no longer stack, but float
// You might use a $breakpoint__* variable from _vars.scss or
// any other value that works for you.
$grid__float-at: $breakpoint__xs;
//
// Define the width of the gutters between grid units
// You might use $unit from _vars.scss, or a relative value
// of $unit, like .5$unit for instance for small gutters.
$grid__gutter-width: $unit;
//
// Define the amount of space at the bottom of a grid unit
// when they are stacking (before they start to float)
// You might choose $unit again.
$grid__bottom-spacing-when-stacking: $unit;
//
// Define the amount of space at the bottom of a grid unit
// when they are floating. It's often a good idea to make
// this value equal to the gutter width.
$grid__bottom-spacing-when-floating: $grid__gutter-width;
// Grid Wrap
.grid-wrap,
.gw {
@include clearfix();
display: block;
// Sometimes, ul are used for grid wraps
list-style-type: none;
margin-bottom: -1*$grid__bottom-spacing-when-stacking;
@include bp-at-least($grid__float-at) {
margin: 0 0 -1*$grid__bottom-spacing-when-floating -1*$grid__gutter-width;
}
}
// Grid
.grid,
.g {
@include clearfix();
min-height: 1px;
position: relative;
padding-bottom: $grid__bottom-spacing-when-stacking;
display: block;
width: 100%;
@include bp-at-least($grid__float-at) {
padding: 0 0 $grid__bottom-spacing-when-floating $grid__gutter-width;
float: left;
}
}
================================================
FILE: css/layout/_hide.scss
================================================
/**
@hide
---------------------------------------------------------
layout/_hide.scss
--------------------------------------------------------
Utility state classes to hide things in different ways
--------------------------------------------------------- */
// The classic, display: none
.is-hidden {
display: none !important;
visibility: hidden !important;
}
// Use this if you still need js access to this element
// it's visually hidden but still in the DOM
.is-visually-hidden {
position: absolute;
left: -9999%;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
}
// Responsive hiders
@include bp-at-least($breakpoint__xs) {
.hide__xs {
display: none;
}
}
@include bp-at-least($breakpoint__sm) {
.hide__sm {
display: none;
}
}
@include bp-at-least($breakpoint__md) {
.hide__md {
display: none;
}
}
@include bp-at-least($breakpoint__lg) {
.hide__lg {
display: none;
}
}
@include bp-at-least($breakpoint__xl) {
.hide__xl {
display: none;
}
}
================================================
FILE: css/layout/_media.scss
================================================
/**
@media
--------------------------------------------------------
layout/_media.scss
--------------------------------------------------------
The 'media' object is a common pattern in OOCSS.
It consists of a wrapper element with a classname of
.media and then two child elements, one that contains
an image or video that is floated, and the other
contains text.
This used commonly in bios, or comments where you
have an avatar to one site, and the comment next to it.
Source: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
----------------------------------------------------- */
/* @media objects
---------------------------------------------------------
Example: Media object, left
<article class="media">
<div class="media__left one-fifth">
<img src="http://fillmurray.com/300/300">
</div>
<div class="media__body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</article>
Example: Media object, right
<article class="media">
<div class="media__right one-fifth">
<img src="http://fillmurray.com/300/300">
</div>
<div class="media__body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</article>
--------------------------------------------------------- */
// The main media object
.media{
display: block;
@include clearfix();
margin-bottom: 1em; // you might end up changing this, either globally or per module
}
// Child elements, to the left or right
.media__left {
float: left;
margin-right: 1em; // you might end up changing this, either globally or per module
}
.media__right {
float: right;
margin-left: 1em;
}
// The images inside those left/right elements should be block
.media__left img,
.media__right img {
display:block;
}
// The body of the media element
.media__body {
overflow: hidden;
}
.media__body,
.media__body > :last-child {
margin-bottom: 0;
}
================================================
FILE: css/layout/_ups.scss
================================================
/**
@ups
--------------------------------------------------------
layout/_ups.scss
--------------------------------------------------------
UPS?
Yep, ups. These are global classes that will set
their direct children to a specific width. You will
mainly use these in grids, and maybe with tabs or
navigations.
For instance: four-up will set each child to 25%
Set the ups configuration variables below in this partial
to specify how many or how few classes you want available
in your project.
Example: Ups and grids
<div class="gw two-up">
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
</div><!--/gw-->
<div class="gw three-up">
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
</div><!--/gw-->
Ups work like widths in that they have responsive behavior. If
you prepend an up class with a responsive prefix, like (s for small
or m for medium) the behaviour will only kick in at those
viewports.
For example, if you want your gallery to be two-up at the smallest
viewport, four-up at medium, six-up at large, and eight-up on the largest then use
this.
Example: Responsive Ups
<div class="gw two-up m-four-up l-six-up xl-eight-up">
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
</div><!--/gw-->
----------------------------------------------------- */
// Ups configuration
// Define the number of ups you want to use at each
// breakpoint. The breakpoints below match the values that
// you defined in base/_vars.scss
//
$ups__number-of-ups-at-breakpoint: (
n: 12,
xs: 12,
sm: 12,
md: 12,
lg: 12,
xl: 12,
xxl: 12
);
// ----------------------------------------------------
// Function to make easy-to-read class from number
// ----------------------------------------------------
// Define english for each integer
// NOTE: this is also defined in layout/_widths.scss but
// we're redefining it to avoid making _widths.scss a
// dependency. In a future release, this will be included
// in something like base/_definitions.scss.
//
$english-by-number: (
1: "one",
2: "two",
3: "three",
4: "four",
5: "five",
6: "six",
7: "seven",
8: "eight",
9: "nine",
10: "ten",
11: "eleven",
12: "twelve"
);
// Mixin to return easy-to-read up class from 2 numbers
// Accepts a $numerator, $denominator, and optional breakpoint
//
@mixin easy-to-read-up($n, $breakpoint:"") {
// Define optional prefix
//
$breakpoint-prefix: ".";
@if ($breakpoint != "n") {
@if map-has-key($ups__number-of-ups-at-breakpoint, $breakpoint) {
$breakpoint-prefix: ".#{unquote($breakpoint)}-";
}
}
// Define english and delimiter '-' for first part of class
//
$up-first-part: "#{map-get($english-by-number, $n)}-";
// Here's the class
#{$breakpoint-prefix}#{$up-first-part}up > * { width: (100 / $n)*1%; }
}
// Loop through all breakpoints in $ups__number-of-ups-at-breakpoint
@each $breakpoint, $num-ups in $ups__number-of-ups-at-breakpoint {
@if ($num-ups > 0) {
@if ($breakpoint != "n") {
/*
Responsive ups at $breakpoint__#{$breakpoint}
---------------------------------------------------- */
@include bp-at-least ( map-get($breakpoints, $breakpoint) ) {
@for $i from 1 through $num-ups {
@include easy-to-read-up($i, $breakpoint);
}
}
}
@else {
/*
Widths at default Viewport
---------------------------------------------------- */
@for $i from 1 through $num-ups {
@include easy-to-read-up($i, $breakpoint);
}
}
}
}
================================================
FILE: css/layout/_widths.scss
================================================
/**
@widths
---------------------------------------------------------
layout/_widths.scss
--------------------------------------------------------
Global Width Classes like .one-third or .seven-twelfths
and responsive widths like .sm-one-third or .xl-one-half
If you append the width class with a size indicator, the
size will only be applied if the viewport is at least
at that breakpoint size.
Set the widths configuration variables below in this partial
to specify how many or how few classes you want available
in your project.
Requires:
* base/_vars.scss and the breakpoint mixin from
* base/_mixin-breakpoints.scss
--------------------------------------------------------- */
// Widths configuration
// ------------------------------------------------------
// Define the number of divisions you want to use at each
// breakpoint. The breakpoints below match the values that
// you defined in base/_vars.scss
//
// For example, if you define xs: 12, below... you'll end up
// with a media query for the xs breakpoint and 12 sets of
// easy-to-read width classes. Not 12 classes, but 12 SETS
// of classes like .one-third, .two-thirds, .three-thirds etc.
// This generates a lot of CSS (16kb compressed, non-gzipped),
// all of it useful but why not specify the number of columns
// you really need.
//
// NOTE: by default, we have 12 divisions for each breakpoint, which
// is the largest amount possible. Pare this down to what you need.
// You can use 0 [* TODO *] if you don't want any responsive width classes
// for any given breakpoint.
//
$widths__number-of-divisions-at-breakpoint: (
n: 12,
xs: 0,
sm: 12,
md: 12,
lg: 12,
xl: 12,
xxl: 12
);
// 100% width classes:
// ------------------------------------------------------
// I would like all 100% width classes like .two-halves
// and .five-fifths. If you say false, you'll still get
// .one-whole classes because those are super useful
//
$widths__generate-all-100-percent-widths: true; // true or false
// Generate common denominator widths:
// ------------------------------------------------------
// I would like to keep all width classes, even if the % value is
// equal to another fraction like .four-eights or .two-sixths.
// Setting this to 'false' generates less code, but forces you
// to remember your fractions.
//
$widths__generate-common-denominator-widths: true; // true or false
// That's it - you're done
// ------------------------------------------------------
// NOTE: there's nothing else to edit after this line. All that
// follows are the functions/mixins that generate the code.
// ----------------------------------------------------
// Function to make easy-to-read class from number
// ----------------------------------------------------
// Define english for each integer
//
$english-by-number: (
1: "one",
2: "two",
3: "three",
4: "four",
5: "five",
6: "six",
7: "seven",
8: "eight",
9: "nine",
10: "ten",
11: "eleven",
12: "twelve"
);
// Define english 'nth' for the denominators of
// our fractions
//
$english-nth-by-number: (
1: "whole",
2: "half",
3: "third",
4: "fourth",
5: "fifth",
6: "sixth",
7: "seventh",
8: "eighth",
9: "ninth",
10: "tenth",
11: "eleventh",
12: "twelfth"
);
// Euclid's Algorithm to find GCD of Fraction
// used to determine if a fraction can be reduced
//
// first, this assumes that $b > $a and they are non zero.
// It will always be so in our
// case - so we're not going to add conditionals to check for this
@function gcd($a, $b) {
@if ($b == 0) { @return $a; }
@else {
$remainder: $a%$b;
@return gcd($b, $remainder);
}
}
// Mixin to return easy-to-read width class from 2 numbers
// Accepts a $numerator, $denominator, and optional breakpoint
//
@mixin easy-to-read-width($numerator, $denominator, $breakpoint:"") {
// Define optional prefix
//
$breakpoint-prefix: ".";
@if ($breakpoint != "n") {
@if map-has-key($widths__number-of-divisions-at-breakpoint, $breakpoint) {
$breakpoint-prefix: ".#{unquote($breakpoint)}-";
}
}
// Define english and delimiter '-' for first part of class
//
$width-first-part: "#{map-get($english-by-number, $numerator)}-";
// Define english nth for second part
//
$width-second-part: "#{map-get($english-nth-by-number, $denominator)}";
@if ($numerator > 1) {
$width-second-part: "#{$width-second-part}s";
}
@if ($width-second-part == "halfs") {
$width-second-part: "halves";
}
// Here's the class
// Return the class based on settings defined above
//
// If $widths__generate-all-100-percent-widths is false and $numerator/$denominator = 1. Only do this
// for denominators above 1 so we still get .one-whole
//
@if ($widths__generate-all-100-percent-widths != true and $numerator/$denominator == 1 and $denominator > 1) {
// We don't return the width in this situation
}
// If $widths__generate-common-denominator-widths is false
//
@elseif ($widths__generate-common-denominator-widths != true and gcd($numerator, $denominator) > 1) {
// We don't return the width in this situation
}
@else {
#{$breakpoint-prefix}#{$width-first-part}#{$width-second-part} { width: ($numerator/$denominator)*100%; }
}
}
// Loop through all breakpoints in $widths__number-of-divisions-at-breakpoint
@each $breakpoint, $num-divisions in $widths__number-of-divisions-at-breakpoint {
@if ($num-divisions > 0) {
@if ($breakpoint != "n") {
/*
Responsive widths at $breakpoint__#{$breakpoint}
---------------------------------------------------- */
@include bp-at-least ( map-get($breakpoints, $breakpoint) ) {
@for $i from 1 through $num-divisions {
@for $j from 1 through $i {
@include easy-to-read-width($j, $i, $breakpoint);
}
}
}
}
@else {
/*
Widths at default Viewport
---------------------------------------------------- */
@for $i from 1 through $num-divisions {
@for $j from 1 through $i {
@include easy-to-read-width($j, $i, $breakpoint);
}
}
}
}
}
// ----------------------------------------------------
// End function to make easy-to-read class from number
// ----------------------------------------------------
================================================
FILE: css/modules/_alerts.scss
================================================
/**
@alerts
---------------------------------------------------------
modules/_alerts.scss
--------------------------------------------------------
Alerts are UI elements that give important info
Example: Error
<div class="alert alert--error">
<a href="#" class="btn__close">×</a>
<p>Uh oh - something went wrong</p>
</div>
Example: Warning
<div class="alert alert--warning">
<a href="#" class="btn__close">×</a>
<p>Shake it fast, but watch yourself.</p>
</div>
Example: Success
<div class="alert alert--success">
<a href="#" class="btn__close">×</a>
<p>The secret to my success is that I learn, 25 hours a day!</p>
</div>
Example: Info
<div class="alert alert--info">
<a href="#" class="btn__close">×</a>
<p>Did you ever know that you're my hero?</p>
</div>
NOTE: The code below uses declared color units, if you'd
prefer, declare those as variables in _vars.scss
------------------------------------------------------ */
.alert {
position: relative;
border-width: 1px;
border-style: solid;
margin-bottom: 2*$unit;
padding: .5rem 4rem .5rem .5rem;
line-height: 1.25;
// text
p {
margin: 0;
}
// Close buttons in alert
.btn__close {
position: absolute;
top: 50%;
margin-top: -.75em;
right: 1em;
opacity: .5;
-webkit-transition: all .3s;
transition: all .3s;
text-decoration: none;
&:hover {
opacity: 1;
}
}
}
// Error alert
//
.alert--error {
color: #e04646;
border-color: #e04646;
background: #ffe6e6;
// Color of close button
.btn__close {
color: #e04646;
}
// Color of line {
&:after {
border-color: #e04646;
}
}
// Warning alert
//
.alert--warning {
color: #b29804;
border-color: #b29804;
background: #fcf7d8;
// Color of close button
.btn__close {
color: #b29804;
}
// Color of line {
&:after {
border-color: #b29804;
}
}
// Info alert
//
.alert--info {
color: #537df6;
border-color: #537df6;
background: #e8f3ff;
// Color of close button
.btn__close {
color: #537df6;
}
// Color of line
&:after {
border-color: #537df6;
}
}
// Success alert
//
.alert--success {
color: #0ca129;
border-color: #0ca129;
background: #dafce1;
// Color of close button
.btn__close {
color: #0ca129;
}
// Color of line
&:after {
border-color: #0ca129;
}
}
================================================
FILE: css/modules/_blocks.scss
================================================
/**
@blocks
--------------------------------------------------------
modules/_blocks.scss
--------------------------------------------------------
Blocks contain sections of content. Blocks can have
different visual styling, but usually have the same
structure; one spacing unit margin at the bottom,
and some have borders, and padding, etc.
----------------------------------------------------- */
// Blocks add bottom margin
//
.block {
margin-bottom: 2*$unit;
// These blocks don't contain visual styling by default, but you can add your own
}
// Block with top and bottom margin
//
.block--ends {
margin-top: 2*$unit;
margin-bottom: 2*$unit;
}
================================================
FILE: css/modules/_callouts.scss
================================================
/**
@callouts
--------------------------------------------------------
modules/_callouts.scss
--------------------------------------------------------
Callouts, are sections of featured content that usually
contain an icon, a title, and some text. These are
usually in a row, and call attention to highlighted features.
Example: Callout
<article class="callout">
<img class="callout__media" src="images/fpo-icon.png">
<h3 class="callout__title">Feature</h3>
<p>This callout is very impressive, and should command your attention</p>
</article>
----------------------------------------------------- */
.callout {
text-align: center;
}
.callout__media {
display: block;
margin: 0 auto 1*$unit;
max-height: 3em;
width: auto;
}
.callout__title {
font-size: 1.5em;
}
================================================
FILE: css/modules/_heroes.scss
================================================
/**
@heroes
--------------------------------------------------------
modules/_heroes.scss
--------------------------------------------------------
Just your everyday, normal hero. Contains a div that has
the media (video or image) in the background, and a div
for the main content.
Example: Hero
<div class="hero">
<div class="hero__main">
<h1 class="hero__leadin">This is the leadin</h1>
<h2 class="hero__name">Name Here</h2>
<div class="hero__media"><img src="http://fillmurray.com/1000/400"></div>
</div>
------------------------------------------------------ */
.hero {
position: relative;
overflow: hidden;
margin-bottom: 2*$unit;
}
.hero__media {
position: relative;
z-index: 200;
}
.hero__main {
position: absolute;
z-index: 210;
width: 100%;
top: 50%;
text-align: center;
color: $color__white;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: .75em;
@include bp-at-least($breakpoint__sm) {
font-size: 1em;
}
@include bp-at-least($breakpoint__lg) {
font-size: 1.25em;
}
}
================================================
FILE: css/modules/_modals.scss
================================================
/**
@modals
---------------------------------------------------------
modules/_modals.scss
--------------------------------------------------------
These are very basic modals, which simply cover the entire
viewport from top to bottom, left to right. Feel free
to edit the styles of modals to suit your needs.
--------------------------------------------------------- */
// Main modal box
//
.modal {
position: fixed;
z-index: 200; // modals live in level 2
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
background: rgba(255, 255, 255, .96);
display: none; // is shown with js
}
// The content within the modal
//
.modal__container {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
display: table;
height: 100%;
padding: 1*$unit;
}
// The close button
//
.modal__close {
position: absolute;
top: 0;
right: 0;
margin: .33*$unit .33*$unit 0 0;
font-size: 3em;
border: none;
background: none;
display: block;
&:hover, &:focus {
outline: none;
border: none;
opacity: .85;
}
&:active {
opacity: .6;
}
}
// modal body
.modal__body {
display: table-cell;
height: 100%;
width: 100%;
vertical-align: middle;
p {
margin-bottom: 1em;
font-size: 1.5em;
}
}
================================================
FILE: css/modules/_pages.scss
================================================
/**
@pages
--------------------------------------------------------
modules/_pages.scss
--------------------------------------------------------
Pages contain content and can have styled headers
and footers if you choose.
----------------------------------------------------- */
// The page wrap
//
.page {
// Add styles to the wrapper if you prefer
}
// The header
//
.page__header {
padding: 1*$unit 0;
margin-bottom: 1*$unit;
background: rgba(0,0,0,.025);
border-bottom: 1px solid $color__grey--light;
}
// The footer
//
.page__footer {
}
================================================
FILE: css/modules/_site-footer.scss
================================================
/**
@site-footer
--------------------------------------------------------
modules/_site-footer.scss
--------------------------------------------------------
The site's global footer
------------------------------------------------------ */
.site-footer {
padding: 1*$unit 0;
border-top: 1px solid $color__grey--light;
}
// Credits
.site-credits {
display: block;
clear: both;
}
================================================
FILE: css/modules/_site-header.scss
================================================
/**
@site-header
--------------------------------------------------------
modules/_site-header.scss
--------------------------------------------------------
Site-wide header
------------------------------------------------------ */
.site-header {
@include clearfix();
padding: 1*$unit 0;
border-bottom: 1px solid $color__grey--light;
}
/* @branding
--------------------------------------------------------
The logo & (optional) wordmark
Example: Branding logo
<a class="branding" href="/">
<img class="branding__logo img--title" src="images/logo.svg" alt="My Company">
<h1 class="branding__wordmark">My Company</h1>
</a>
------------------------------------------------------ */
.branding {
margin: 0 auto 1*$unit;
text-decoration: none;
display: block;
text-align: center;
@include bp-at-least($breakpoint__md) {
margin: 0;
float: left;
text-align: left;
}
}
.branding__logo {
height: 3*$unit;
width: 3*$unit;
@include bp-at-least($breakpoint__md) {
float: left;
margin-right: 1*$unit;
}
}
.branding__wordmark {
font-size: 1.5*$unit;
white-space: nowrap;
line-height: 2*$unit;
margin: 0;
}
/*
@site-nav
--------------------------------------------------------
The main site navigation.
----------------------------------------------------- */
.site-nav {
text-align: center;
@include bp-at-least($breakpoint__md) {
float: right;
}
a {
display: inline-block;
height: 3*$unit;
line-height: 3*$unit;
padding: 0 .5em;
margin-left: .5*$unit;
&:first-child {
margin-left: 0;
}
}
}
================================================
FILE: css/modules/_site-main.scss
================================================
/**
@site-main
--------------------------------------------------------
modules/_site-main.scss
--------------------------------------------------------
The site's main content
------------------------------------------------------ */
.site-main {
display: block; // <main> element still needs block declaration
}
================================================
FILE: css/modules/_site.scss
================================================
/**
@site
--------------------------------------------------------
modules/_site.scss
--------------------------------------------------------
We use the naming convention of .site-* for global
modules like the header, main, and footer.
Sometimes it's beneficial to have a wrapping element
around the site, directly following the <body>. In
this case, we call that .site.
------------------------------------------------------ */
.site {
}
================================================
FILE: css/modules/_thumbnails.scss
================================================
/**
@thumbnails
--------------------------------------------------------
modules/_thumbnails.scss
--------------------------------------------------------
Thumbnails are usually found within a grid or gallery,
as a teaser or preview of more content. The common
use is to have an image on top of a title and text
below, while the entire thumbnail is an anchor link.
Example: Thumbnail
<a class="thumbnail" href="/some/article">
<img class="thumbnail__media" src="http://fillmurray.com/400/200">
<div class="thumbnail__caption">
<h2>A caption title here</h2>
<p>Some more text follows to tease the rest of
the content</p>
</div>
</a>
----------------------------------------------------- */
.thumbnail {
display: block;
padding: .5*$unit;
background: rgba(0, 0, 0, .1);
border: 1px solid rgba(0, 0, 0, .15);
text-decoration: none;
}
.thumbnail__media {
margin-bottom: .5*$unit;
}
.thumbnail__caption {
font-size: 85%;
h1, h2, h3, h4, h5, h5 {
margin-bottom: .25*$unit;
}
}
================================================
FILE: css/modules/_video-embeds.scss
================================================
/**
@video
--------------------------------------------------------
modules/_video-embeds.scss
--------------------------------------------------------
Video Embeds
----------------------------------------------------- */
.video-embed {
display: block;
width: 100%;
height: 0;
position: relative;
padding-top: 66.666%;
iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100% !important;
width: 100% !important;
}
}
================================================
FILE: css/screen.css
================================================
/****
MAIN STYLESHEET for [* Site Name Here *]
---------------------------------------------------------
BUILT WITH SKYLINE: EVOLVING CSS ARCHITECTURE
See README.md for info and credits
---------------------------------------------------------
TABLE OF CONTENTS
@toc
- Base ............ foundations, mixins, functions, vars
- Elements ........ single elements
- Layout .......... layout objects like grids, containers
- Modules ......... objects created by combining elements
--------------------------------------------------------- */
/***
@base
---------------------------------------------------------
Your CSS begins with some global variables, a reset which
is basically Normalize, some mixins, and a print stylesheet.
----------------------------------------------------- */
/**
@variables
---------------------------------------------------------
base/_vars.scss
--------------------------------------------------------
Global variables are defined here. Define your colors,
spacing and grid settings.
----------------------------------------------------- */
/* @colors
--------------------------------------------------------
All color variables are defined here.
We use real color names here. Although naming something
like 'brand' is in fact more generic and reusable, we've
found that you end up creating variables like $brand-2,
$brand-alt, $brand-complimentary etc. While coding,
it's too easy to forget what those mean.
If the design changes drastically and the brand changes
from, let's say, blue to green, just do a global
find/replace - that's what text editors are for.
------------------------------------------------------ */
/* @breakpoints
---------------------------------------------------------
Define global breakpoints as xs, sm, md, lg, xl, xxl
--------------------------------------------------------- */
/* @global spacing unit
---------------------------------------------------------
Define an em value for $unit. $unit is a helpful little
variable that serves to keep your spacing consistent.
Most often, 1 $unit is equal to your baseline height. So
if your baseline height is 1.125ems (which is 18px), that's
the value of 1 $unit.
--------------------------------------------------------- */
/**
@reset
---------------------------------------------------------
base/_reset.scss
--------------------------------------------------------
This reset institutes the border-box box model and then
block and margin/padding resets.
Throughout Skyline, each partial has it's own resets.
This allows you to only use what you need.
Credit goes to Normalize
http://normalize.css v2.1.0 http://git.io/normalize
--------------------------------------------------------- */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary,
audio,
canvas,
video {
display: block; }
/**
@breakpoints mixin
-----------------------------------------------------
base/_mixin-breakpoints.scss
-----------------------------------------------------
This mixin makes using inline media queries easy.
Options include bp-at-least for min-width, bp-until
for max-width, and bp-between for min and max widths.
You can use your breakpoint vars, or any other value.
Usage: styles at medium breakpoint
.some-element {
@include bp-at-least($breakpoint__md){
your-styles: go-here;
}
}
Usage: styles at custom breakpoint
.another-element {
@include bp-until(83.45em){
your-styles: go-here;
}
}
----------------------------------------------------- */
/**
@clearfix mixin
---------------------------------------------------------
base/_clearfix.scss
--------------------------------------------------------
Use @include clearfix(); in your CSS
Usage: clearfix mixin
.element-to-clearfix {
@include cleafix();
}
--------------------------------------------------------- */
/**
@font-face importer mixin
-----------------------------------------------------------
_base/_mixin-font-face-importer.scss
-----------------------------------------------------------
Use this mixin to embed a font
$font-name is used in your css in font-family declarations
$font-filepath-and-name is the location of your font
file and the filename WITHOUT the file extension. The
extensions are added here in the mixin
Usage:
@include embed-font($font-name, $font-filepath-and-name);
--------------------------------------------------------- */
/**
@gradual media queries mixin
--------------------------------------------------------
base/_mixin-gradual-media-queries.scss
--------------------------------------------------------
The mixin takes arguments of start-width, start-fontsize,
end-width, and end-fontsize and then creates media queries
between those start and end points at another argument
value, increment-width.
Usage: Gradually increase the font size of the html
html {
@include gradual-queries(20em, 80%, 70em, 100%, 10em)
}
In the above usage, the html fontsize will start out at
80% at 20em and end up at 100% at 70em - and the gradual
changes in the fontsize percentage will be calculated
at 10em intervals.
See http://codepen.io/jeffschram/pen/IixqA
------------------------------------------------------ */
/**
@fonts
--------------------------------------------------------
base/_fonts.scss
--------------------------------------------------------
Define the fonts used in this app and declare silent
classes to be used in your CSS.
If you are using a webfont that you're hosting, add
the @embed-font() mixin from base/_mixin-font-face-importer.scs
before you declare your fonts.
Usage: Create a font-family named "interstate-light" using a font at /fonts/interstate_light-webfont.woff (and other extensions)
@include embed-font("interstate-light", "/fonts/interstate_light-webfont");
If you are using Google Fonts, you can add the
import code before you declare your fonts.
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700);
-------------------------------------------------------- */
/* @sans
--------------------------------------------------------
This is your basic sans font.
Usage: use sans regular on a p
p {
@extend %sans--regular;
}
------------------------------------------------------ */
body, .btn {
font-family: sans-serif;
font-weight: 400;
font-style: normal; }
/* @serif
--------------------------------------------------------
This is your basic serif font.
Usage: use serif regular on a p
p {
@extend %serif--regular;
}
-------------------------------------------------------- */
input, input::-webkit-input-placeholder, input:-moz-placeholder, textarea {
font-family: georgia, times;
font-weight: 300;
font-style: normal; }
/**
@dev helpers
--------------------------------------------------------
base/_dev-helpers.scss
--------------------------------------------------------
Dev helpers highlight elements and/or show information
about the site and its current state (breakpoints, etc.)
These are made active by adding classes to the HTML
element. A JS system to toggle these classes is in
the works.
This partial requires:
* base/_vars.scss
* base/_mixin-breakpoints.scss
-------------------------------------------------------- */
/* @highlight elements at breakpoint
--------------------------------------------------------
Highlight an element at certain breakpoints by changing
its color;
Add .dev--highlight to the HTML element to enable this.
Example: Highlight a title at MD breakpoint
<h1 class="md-highlight">I will change color at MD breakpoint</h1>
-------------------------------------------------------- */
@media screen and (min-width: 20em) {
.dev--highlight-elements [class*="-highlight"] {
color: inherit; }
.dev--highlight-elements .xs-highlight {
color: #94c1c8; } }
@media screen and (min-width: 34.375em) {
.dev--highlight-elements [class*="-highlight"] {
color: inherit; }
.dev--highlight-elements .sm-highlight {
color: #a2bb60; } }
@media screen and (min-width: 48em) {
.dev--highlight-elements [class*="-highlight"] {
color: inherit; }
.dev--highlight-elements .md-highlight {
color: #eb6d58; } }
@media screen and (min-width: 64em) {
.dev--highlight-elements [class*="-highlight"] {
color: inherit; }
.dev--highlight-elements .lg-highlight {
color: #0d699c; } }
@media screen and (min-width: 78.5em) {
.dev--highlight-elements [class*="-highlight"] {
color: inherit; }
.dev--highlight-elements .xl-highlight {
color: #c492bc; } }
@media screen and (min-width: 100em) {
.dev--highlight-elements [class*="-highlight"] {
color: inherit; }
.dev--highlight-elements .xxl-highlight {
color: #76400b; } }
/* @highlight grids in dev mode
--------------------------------------------------------
Indicate grids using responsive widths at certain breakpoints.
Add .dev--grids to the HTML element to enable this.
No extra classes are needed on the grids themselves.
-------------------------------------------------------- */
.dev--highlight-grids .g > *, .dev--highlight-grids .grid > * {
min-height: 4em;
background: rgba(193, 199, 208, 0.5);
border: 1px solid rgba(193, 199, 208, 0.5); }
@media screen and (min-width: 20em) {
.dev--highlight-grids .g[class*="xs-"] > *, .dev--highlight-grids .grid[class*="xs-"] > * {
border-color: #94c1c8;
background: rgba(148, 193, 200, 0.25); } }
@media screen and (min-width: 34.375em) {
.dev--highlight-grids .g[class*="sm-"] > *, .dev--highlight-grids .grid[class*="sm-"] > * {
border-color: #a2bb60;
background: rgba(162, 187, 96, 0.25); } }
@media screen and (min-width: 48em) {
.dev--highlight-grids .g[class*="md-"] > *, .dev--highlight-grids .grid[class*="md-"] > * {
border-color: #eb6d58;
background: rgba(235, 109, 88, 0.25); } }
@media screen and (min-width: 64em) {
.dev--highlight-grids .g[class*="lg-"] > *, .dev--highlight-grids .grid[class*="lg-"] > * {
border-color: #0d699c;
background: rgba(13, 105, 156, 0.25); } }
@media screen and (min-width: 78.5em) {
.dev--highlight-grids .g[class*="xl-"] > *, .dev--highlight-grids .grid[class*="xl-"] > * {
border-color: #c492bc;
background: rgba(196, 146, 188, 0.25); } }
@media screen and (min-width: 100em) {
.dev--highlight-grids .g[class*="xxl-"] > *, .dev--highlight-grids .grid[class*="xxl-"] > * {
border-color: #76400b;
background: rgba(118, 64, 11, 0.25); } }
@media screen and (min-width: 20em) {
.dev--highlight-grids .gw[class*="xs-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="xs-"][class*="-up"] > * > * {
border-color: #94c1c8;
background: rgba(148, 193, 200, 0.25); } }
@media screen and (min-width: 34.375em) {
.dev--highlight-grids .gw[class*="sm-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="sm-"][class*="-up"] > * > * {
border-color: #a2bb60;
background: rgba(162, 187, 96, 0.25); } }
@media screen and (min-width: 48em) {
.dev--highlight-grids .gw[class*="md-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="md-"][class*="-up"] > * > * {
border-color: #eb6d58;
background: rgba(235, 109, 88, 0.25); } }
@media screen and (min-width: 64em) {
.dev--highlight-grids .gw[class*="lg-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="lg-"][class*="-up"] > * > * {
border-color: #0d699c;
background: rgba(13, 105, 156, 0.25); } }
@media screen and (min-width: 78.5em) {
.dev--highlight-grids .gw[class*="xl-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="xl-"][class*="-up"] > * > * {
border-color: #c492bc;
background: rgba(196, 146, 188, 0.25); } }
@media screen and (min-width: 100em) {
.dev--highlight-grids .gw[class*="xxl-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="xxl-"][class*="-up"] > * > * {
border-color: #76400b;
background: rgba(118, 64, 11, 0.25); } }
/* @show the current breakpoint
--------------------------------------------------------
Adds a badge to the bottom right of the body to show
the current breakpoint.
To enable this, add .dev--show-breakpoint to the HTML
element
-------------------------------------------------------- */
.dev--show-breakpoint body:before {
content: "-";
position: fixed;
bottom: 0;
right: 0;
padding: 1em;
border: 1px solid #b0b3b3;
background: rgba(176, 179, 179, 0.25);
font-size: .25em;
line-height: 1;
color: #b0b3b3; }
@media screen and (min-width: 20em) {
.dev--show-breakpoint body:before {
content: "XS";
color: #94c1c8;
background: rgba(148, 193, 200, 0.25);
border-color: #94c1c8; } }
@media screen and (min-width: 34.375em) {
.dev--show-breakpoint body:before {
content: "SM";
color: #a2bb60;
background: rgba(162, 187, 96, 0.25);
border-color: #a2bb60; } }
@media screen and (min-width: 48em) {
.dev--show-breakpoint body:before {
content: "MD";
color: #eb6d58;
background: rgba(235, 109, 88, 0.25);
border-color: #eb6d58; } }
@media screen and (min-width: 64em) {
.dev--show-breakpoint body:before {
content: "LG";
color: #0d699c;
background: rgba(13, 105, 156, 0.25);
border-color: #0d699c; } }
@media screen and (min-width: 78.5em) {
.dev--show-breakpoint body:before {
content: "XL";
color: #c492bc;
background: rgba(196, 146, 188, 0.25);
border-color: #c492bc; } }
@media screen and (min-width: 100em) {
.dev--show-breakpoint body:before {
content: "XXL";
color: #76400b;
background: rgba(118, 64, 11, 0.25);
border-color: #76400b; } }
/**
@print
--------------------------------------------------------
base/_print.scss
--------------------------------------------------------
Print Stylesheet from http://h5bp.com/r
----------------------------------------------------- */
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
CREDIT: HTML5 Boilerplate
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important;
/* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important; }
a,
a:visited {
text-decoration: underline; }
a[href]:after {
content: " (" attr(href) ")"; }
abbr[title]:after {
content: " (" attr(title) ")"; }
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: ""; }
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid; }
thead {
display: table-header-group;
/* h5bp.com/t */ }
tr,
img {
page-break-inside: avoid; }
img {
max-width: 100% !important; }
@page {
margin: 0.5cm; }
p,
h2,
h3 {
orphans: 3;
widows: 3; }
h2,
h3 {
page-break-after: avoid; } }
/***
@elements
---------------------------------------------------------
Global styling of elements.
--------------------------------------------------------- */
/**
@body
--------------------------------------------------------
elements/_body.scss
--------------------------------------------------------
Body should contain the document's default font and
background color for the content, if that background
color is different than the html.
------------------------------------------------------ */
body {
line-height: 1.5;
color: #515554;
background: white; }
/**
@buttons
--------------------------------------------------------
elements/_buttons.scss
--------------------------------------------------------
Buttons are a common UI component in sites/apps. They
are usually either anchor, button, or input elements
with a classname of 'btn'. They provide an easily
identified clickable target.
Buttons commonly have modifying classes that apply
specific styles. Examples of these are .btn--large and
.btn--inline
Example: Buttons using anchors
<p><a href="#" class="btn">Regular Button</a></p>
Example: Buttons using buttons
<p><button class="btn">Regular Button</button></p>
------------------------------------------------------ */
button:focus, button:active {
outline: none;
box-shadow: none;
border: none; }
.btn {
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
background: #515554;
color: white;
border: none;
font-size: 1.25em;
text-transform: uppercase;
text-decoration: none;
letter-spacing: .225em;
padding: 1em 1.25em; }
.btn:hover, .btn:focus, .btn:active {
outline: none;
opacity: .85; }
/* @btn--secondary
--------------------------------------------------------
A btn modifier, secondary
Example: .btn--secondary
<a class="btn btn--secondary">Secondary button</a>
------------------------------------------------------ */
.btn--secondary {
background: none;
border: 1px solid white;
color: white; }
/* @btn--large
--------------------------------------------------------
A btn modifier, large
Example: .btn--large
<a class="btn btn--large">Large button</a>
------------------------------------------------------ */
@media screen and (min-width: 34.375em) {
.btn--large {
font-size: 1.25em;
padding: 1.25em 2.75em; } }
/* @btn--inline
--------------------------------------------------------
A btn modifier, if this button is in a paragraph or
in anything else that has a defined font-size, this
modifier will make the btn inherit the font-size of
the partent.
Example: .btn--inline
<p>Here's some text <a class="btn btn--inline">Cool button</a> text keeps going</p>
------------------------------------------------------ */
.btn--inline {
font-size: 1em; }
/* @btn--block
--------------------------------------------------------
A btn modifier - makes the button display block, 100%
width and aligns the text to the center. Removes left
and right padding since the text is center aligned, it
is not needed. Actually sometimes having the padding
on the left and right causes problems if the centered
text is quite long - so we just remove it.
Example: .btn--block
<a href="#" class="btn btn--block">Block button</a>
------------------------------------------------------ */
.btn--block {
display: block;
width: 100%;
text-align: center;
padding-right: 0;
padding-left: 0; }
/* @btn--icon
--------------------------------------------------------
A btn modifier - makes the button display block, 100%
width and aligns the text to the center. Removes left
and right padding since the text is center aligned, it
is not needed. Actually sometimes having the padding
on the left and right causes problems if the centered
text is quite long - so we just remove it.
Example: .btn--icon
<button class="btn--icon ss-icon">Block button</button>
------------------------------------------------------ */
.btn--icon {
background: transparent;
border: none;
padding: 0;
font-size: 1em; }
/**
@code
--------------------------------------------------------
elements/_code.scss
--------------------------------------------------------
Code elements like <code> and <pre>
Example: Code in a paragraph
<p>This is a cool paragraph about a classname called <code>.franz</code></p>
----------------------------------------------------- */
code {
vertical-align: middle;
padding: .25em .5em;
background: rgba(193, 199, 208, 0.3); }
/**
@forms
---------------------------------------------------------
elements/_forms.scss
--------------------------------------------------------
Base styles for all forms and form related elements
Below you'll set styles for all forms, and if you have
any specific kinds of forms, like a search form that you
create a classname of form--search, put that at the
bottom of this partial.
This scss partial is pretty big. Here's how it is
organized.
* Base styling on form elements
* Styles for form & form modules
--------------------------------------------------------- */
/* @text inputs
--------------------------------------------------------
Base styles for inputs
Example: Text Input
<input type="text" name="schramburger" placeholder="Your Name">
Inputs can use sizing classes, .input--s .input--l
Example: Text Small Input
<input class="input--s" type="text" name="schramburger" placeholder="Your Name">
Example: Text Input
<input class="input--l" type="text" name="schramburger" placeholder="Your Name">
------------------------------------------------------ */
input {
-webkit-appearance: none;
border-radius: 0;
width: 100%;
padding: 1em;
border: 1px solid #515554;
color: #515554; }
input:focus {
outline: none; }
input.input--s {
font-size: .5rem; }
input.input--l {
font-size: 1.5rem; }
input::-webkit-input-placeholder {
color: #515554; }
input:-moz-placeholder {
color: #515554; }
input::-moz-placeholder {
color: #515554; }
input:-ms-input-placeholder {
color: #515554; }
input:focus::-webkit-input-placeholder {
opacity: .3; }
input:focus:-moz-placeholder {
opacity: .3; }
input:focus::-moz-placeholder {
opacity: .3; }
input:focus:-ms-input-placeholder {
opacity: .3; }
/* @select inputs
--------------------------------------------------------
Base styling for all selects
Example: Select Input
<select name="schramburger">
<option value="value-1">Option 1</option>
<option value="value-2">Option 2</option>
<option value="value-3">Option 3</option>
<option value="value-4">Option 4</option>
</select>
Selects can have added sizing classes, .select--s and .select--l
Example: Small select
<select name="schramburger" class="select--s">
<option value="value-1">Option 1</option>
<option value="value-2">Option 2</option>
<option value="value-3">Option 3</option>
<option value="value-4">Option 4</option>
</select>
Example: Large select
<select name="schramburger" class="select--l">
<option value="value-1">Option 1</option>
<option value="value-2">Option 2</option>
<option value="value-3">Option 3</option>
<option value="value-4">Option 4</option>
</select>
------------------------------------------------------ */
select {
width: 100%;
font-size: 1rem; }
select.select--sm {
font-size: .5rem; }
select.select--lg {
font-size: 1.5rem; }
/* @textareas
--------------------------------------------------------
Base styling for textareas
Textareas can have .textarea--s or .textarea--l classes
for different sizes
Example: Textarea
<textarea name="schramburger">Hello, there.</textarea>
Example: Small Textarea
<textarea class="textarea--s" name="schramburger">Hello, there.</textarea>
Example: Large Textarea
<textarea class="textarea--l" name="schramburger">Hello, there.</textarea>
------------------------------------------------------ */
textarea {
width: 100%;
min-height: 6em;
padding: 1em;
border: solid 1px #515554; }
textarea:focus {
outline: none; }
textarea.textarea--s {
font-size: .5rem; }
textarea.textarea--l {
font-size: 1.5rem; }
/* @radio inputs
--------------------------------------------------------
Base styling for radio inputs. Radios are surrounded
by a label for better click targets.
Example: Radio
<label class="label--radio" for="radio-1"><input id="radio-1" type="radio" value="yes"> Radio label</label>
Example: Radio with super-long label
<label class="label--radio" for="radio-3"><input id="radio-3" type="radio" value="yes"> Radio label Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, accusantium ipsum animi perspiciatis officiis iure voluptatibus corporis. Enim, officia, tempora vitae libero dolore sint voluptatum. Blanditiis odit laudantium minus repellat</label>
------------------------------------------------------ */
input[type=radio] {
-webkit-appearance: none;
width: 1em;
height: 1em;
padding: 0;
border-radius: 50%;
border: 1px solid #444;
background: transparent; }
input[type=radio]:checked {
background: #222; }
.label--radio {
display: inline-block;
position: relative;
cursor: pointer;
padding-left: 1em; }
.label--radio input {
position: absolute;
top: .7em;
left: 0; }
/* @checkbox inputs
--------------------------------------------------------
Base styling for checkbox inputs. Checkboxes are surrounded
by a label for better click targets.
Example: Checkbox
<label class="label--checkbox" for="checkbox-1"><input id="checkbox-1" type="checkbox" value="yes"> Checkbox label</label>
Example: Checkbox with super-long label
<label class="label--checkbox" for="checkbox-3"><input id="checkbox-3" type="checkbox" value="yes"> Checkbox label Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, accusantium ipsum animi perspiciatis officiis iure voluptatibus corporis. Enim, officia, tempora vitae libero dolore sint voluptatum. Blanditiis odit laudantium minus repellat</label>
------------------------------------------------------ */
input[type=checkbox] {
-webkit-appearance: none;
width: 1em;
height: 1em;
padding: 0;
border: 1px solid #444;
background: transparent; }
input[type=checkbox]:checked {
background: #222; }
.label--checkbox {
display: inline-block;
position: relative;
cursor: pointer;
padding-left: 1em; }
.label--checkbox input {
position: absolute;
top: .7em;
left: 0; }
/* @textareas
--------------------------------------------------------
Base styling for textareas
Example: Textarea
<textarea name="schramburger">Hello, there.</textarea>
------------------------------------------------------ */
textarea {
width: 100%; }
/* @labels
--------------------------------------------------------
Base styling for labels
Example: label
<label>Don't label me, I'm a free spirit</labe>
------------------------------------------------------ */
label {
font-size: 1em;
font-weight: bold; }
/* @form
--------------------------------------------------------
Like the bootstrap convention, apply standard styling
on any form with the classname .form
This allows us to create modifier classnames like
.form--inline and .form--horizontal, which will be
laid out further below.
------------------------------------------------------ */
.form {
display: block;
padding: 2em;
border: 1px solid #888;
background: #eee; }
/* @form-header
--------------------------------------------------------
A form header usually consists of a title and some
copy.
Example: Form header
<header class="form__header">
<h2>Contact Us</h2>
<p>Use this form to contact us. We love talking to
our customers.</p>
</header>
-------------------------------------------------------- */
.form__header {
padding-bottom: 1em;
margin-bottom: 2em;
border-bottom: 1px solid #888; }
/* @fieldsets
--------------------------------------------------------
Fieldsets group together related fields.
Example: Fieldset
<fieldset>
<legend>Personal Information</legend>
<article class="field">
<label class="field__label" for="exampleInput1">Your Name</label>
<input class="field__input="exampleInput1" type="text" required="required" placeholder="Your name">
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
<article class="field">
<label class="field__label" for="exampleInput2">Your Email</label>
<input class="field__input="exampleInput2" type="email" required="required" placeholder="Your email">
<span class="field__feedback"></span>
<span class="field__hint">Must be a valid email address</span>
</article>
</fieldset>
Fieldsets are also nested inside other fieldsets.
Example: Nested Fieldsets
<fieldset>
<legend>Personal Information</legend>
<article class="field">
<label class="field__label" for="exampleInput31">Your Name</label>
<input class="field__input="exampleInput31" type="text" required="required" placeholder="Your name">
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
<article class="field">
<label class="field__label" for="exampleInput32">Your Email</label>
<input class="field__input="exampleInput32" type="email" required="required" placeholder="Your email">
<span class="field__feedback"></span>
<span class="field__hint">Must be a valid email address</span>
</article>
<fieldset>
<legend>Address</legend>
<article class="field">
<label class="field__label" for="exampleInput33">Address 1</label>
<input class="field__input="exampleInput33" type="text" required="required" placeholder="Address 1">
<span class="field__feedback"></span>
<span class="field__hint">Must be a valid email address</span>
</article>
<article class="field">
<label class="field__label" for="exampleInput34">Address 2</label>
<input class="field__input="exampleInput34" type="text" required="required" placeholder="Address 2">
<span class="field__feedback"></span>
<span class="field__hint">Must be a valid email address</span>
</article>
</fieldset>
</fieldset>
-------------------------------------------------------- */
fieldset {
border: none; }
/* @fields
--------------------------------------------------------
A field is an article that contains the input and anything
related to the input.
Example: Field for a text input
<article class="field">
<label class="field__label" for="exampleInput1">Your Name</label>
<input class="field__input="exampleInput1" type="text" required="required" placeholder="Your name">
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
Example: Field with hint
<article class="field">
<label class="field__label" for="exampleInput2">Your Email</label>
<input class="field__input="exampleInput2" type="email" required="required" placeholder="Your email">
<span class="field__feedback"></span>
<span class="field__hint">Must be a valid email address</span>
</article>
Example: Field with Error
<article class="field is-error">
<label class="field__label" for="exampleInput3">Your Email</label>
<input class="field__input="exampleInput3" type="email" required="required" placeholder="Your email">
<span class="field__feedback">Sorry, that email is in use.</span>
<span class="field__hint"></span>
</article>
Example: Field for a select input
<article class="field">
<label class="field__label" for="exampleInput4" >Select your favorite</label>
<select class="field__input input--select" id="exampleInput4" name="favorite-food">
<option>Pizza</option>
<option>Tacos</option>
<option>Burgers</option>
</select>
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
Example: Field for a textarea input
<article class="field">
<label class="field__label">Your Name</label>
<textarea class="field__input">Hello, there</textarea>
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
-------------------------------------------------------- */
.field {
position: relative;
margin-bottom: 2em; }
.field__label {
display: block; }
.field__hint {
color: #888;
font-size: .75em;
padding: .25em 0;
font-style: italic; }
.field__feedback {
display: none;
font-size: .75em;
padding: .25em .75em;
background: rgba(218, 35, 0, 0.3);
color: white; }
.field.is-error .field__feedback {
display: block; }
.field.is-error input {
border: 1px solid rgba(218, 35, 0, 0.3); }
/* @input group
--------------------------------------------------------
Group containing multiple inputs, helpful for lists
of radios or checkboxes. Shown below in a field...
Example: Field with input group of radios
<article class="field">
<label class="field__label">Choose your favorite</label>
<div class="field__input-group">
<label class="label--radio" for="favorite-food-1"><input id="favorite-food-1" name="favorite-food" type="radio" value="pizza"> Pizza</label>
<label class="label--radio" for="favorite-food-2"><input id="favorite-food-2" name="favorite-food" type="radio" value="tacos"> Tacos</label>
<label class="label--radio" for="favorite-food-3"><input id="favorite-food-3" name="favorite-food" type="radio" value="burgers"> Burgers</label>
</div>
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
Example: Field with input group of checkboxes
<article class="field">
<label class="field__label">Select your favorites</label>
<div class="field__input-group">
<label class="label--checkbox" for="favorite-food-4"><input id="favorite-food-4" name="favorite-food-alt" type="checkbox" value="pizza"> Pizza</label>
<label class="label--checkbox" for="favorite-food-5"><input id="favorite-food-5" name="favorite-food-alt" type="checkbox" value="tacos"> Tacos</label>
<label class="label--checkbox" for="favorite-food-6"><input id="favorite-food-6" name="favorite-food-alt" type="checkbox" value="burgers"> Burgers</label>
</div>
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
Example: Field with input group list modifier
<article class="field">
<label class="field__label">Select your favorites</label>
<div class="field__input-group--list">
<label class="label--checkbox" for="favorite-food-7"><input id="favorite-food-7" name="favorite-food-alt2" type="checkbox" value="pizza"> Pizza</label>
<label class="label--checkbox" for="favorite-food-8"><input id="favorite-food-8" name="favorite-food-alt2" type="checkbox" value="tacos"> Tacos</label>
<label class="label--checkbox" for="favorite-food-9"><input id="favorite-food-9" name="favorite-food-alt2" type="checkbox" value="burgers"> Burgers</label>
</div>
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
------------------------------------------------------ */
.field__input-group {
display: block; }
.field__input-group > * {
display: inline-block;
margin-right: .5em; }
.field__input-group > *:last-child {
margin-right: 0; }
.field__input-group--list {
display: block; }
.field__input-group--list > * {
display: block;
margin: .5em 0; }
.field__input-group--list > *:last-child {
margin-bottom: 0; }
/* @form action
--------------------------------------------------------
Each form has an actions footer at the bottom to
submit the form
Example: Form Actions Footer
<footer class="form__actions">
<article class="field two-fiths">
<label class="field__label is-visually-hidden" for="exampleInput7" >Submit</label>
<input class="field__input btn btn--block" type="submit" id="exampleInput7" value="Submit">
<span class="field__feedback"></span>
<span class="field__hint"></span>
</article>
</footer>
--------------------------------------------------------- */
.form__actions {
padding-top: 1em;
margin-top: 2em;
border-top: 1px solid #888; }
/**
@headings
--------------------------------------------------------
elements/_headings.scss
--------------------------------------------------------
We set any base styles for any headings that have
no classnames.
Example: Headings
<h1>This is an h1 heading</h1>
<h2>This is an h2 heading</h2>
<h3>This is an h3 heading</h3>
<h4>This is an h4 heading</h4>
<h5>This is an h5 heading</h5>
<h6>This is an h6 heading</h6>
Additionally, we add classnames so you
can apply the styling of, for instance, an h1 to an h2.
Example: H1 styled like an H3
<h1 class="h3">This is an h1 but looks like an h3</h1>
------------------------------------------------------ */
h1, .h1 {
margin-bottom: 1em; }
h2, .h2 {
margin-bottom: 1em; }
h3, .h3 {
margin-bottom: 1em; }
h4, .h4 {
margin-bottom: 1em; }
h5, .h5 {
margin-bottom: 1em; }
h6, .h6 {
margin-bottom: 1em; }
/**
@hr
--------------------------------------------------------
elements/_hr.scss
--------------------------------------------------------
Horizontal Rule
Example:
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<hr>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
-------------------------------------------------------- */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0; }
/**
@html
--------------------------------------------------------
elements/_html.scss
--------------------------------------------------------
HTML should contain the site's default background color
and font-size
------------------------------------------------------ */
html {
font-size: 80%; }
@media (min-width: 20em) {
html {
font-size: 80%; } }
@media (min-width: 30em) {
html {
font-size: 83.33333%; } }
@media (min-width: 40em) {
html {
font-size: 86.66667%; } }
@media (min-width: 50em) {
html {
font-size: 90%; } }
@media (min-width: 60em) {
html {
font-size: 93.33333%; } }
@media (min-width: 70em) {
html {
font-size: 96.66667%; } }
@media (min-width: 80em) {
html {
font-size: 100%; } }
* {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
/**
@images
---------------------------------------------------------
elements/_images.scss
--------------------------------------------------------
Base styling for images, plus some helpful utility
classes that modify images.
Note: You won't add any styling to these image classes,
these are just utility classes
--------------------------------------------------------- */
/* @images
--------------------------------------------------------
Base Image Style is 100% width by default
Example: Image
<img src="http://fillmurray.com/600/300">
------------------------------------------------------ */
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle; }
/* @img--natural
--------------------------------------------------------
Natural Images are 100% max-width, but their natural width by default
Example: Image, Natural Width
<img class="img--natural" src="http://fillmurray.com/600/300">
------------------------------------------------------ */
.img--natural {
width: auto; }
/* @img--title
--------------------------------------------------------
Title images fit within a heading/title element
Example: Image inside a title (.img--title)
<h1><img class="img--title" src="http://fillmurray.com/300/300"> Title Here versions of Lorem Ipsum.</h1>
<h2><img class="img--title" src="http://fillmurray.com/300/300"> Title Here versions of Lorem Ipsum.</h2>
<h3><img class="img--title" src="http://fillmurray.com/300/300"> Title Here versions of Lorem Ipsum.</h3>
------------------------------------------------------ */
.img--title {
height: 1em;
width: auto;
vertical-align: top; }
/* @image placement
--------------------------------------------------------
Here are a few helper classes to position images, particularly
helpful inside paragraphs.
Example: Image Right
<p><img class="img--right" src="http://fillmurray.com/400/300"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Example: Image, Natural Width
<p><img class="img--left" src="http://fillmurray.com/400/300"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Example: Image, Center
<p><img class="img--center" src="http://fillmurray.com/400/300"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
------------------------------------------------------ */
.img--right {
width: auto;
float: right;
margin-bottom: 1.125em;
margin-left: 1.125em; }
.img--left {
width: auto;
float: left;
margin-right: 1.125em;
margin-bottom: 1.125em; }
.img--center {
width: auto;
display: block;
margin-right: auto;
margin-bottom: 1.125em;
margin-left: auto; }
.img--right img,
.img--left img,
.img--center img {
width: auto; }
/* @img--circle
--------------------------------------------------------
Popular circle image for bios etc.
Example: Circle image
<img class="img--circle" src="http://fillmurray.com/400/400">
------------------------------------------------------ */
.img--circle {
border-radius: 50%; }
/**
@icons
---------------------------------------------------------
elements/_icons.scss
--------------------------------------------------------
Your icon set may vary. In this partial, you may wish
to load in a font icon set and add all the associated
css that goes with it. This would be the case if you
were using something like Symbolset or IcoMoon for
example.
--------------------------------------------------------- */
/* @icon
--------------------------------------------------------
This is a basic icon element. We set some basic
structural styles and display styles to get the ball
rolling.
Example: Open Icon
<i class="icon icon--open">+</i>
Example: Close Icon
<i class="icon icon--close">×</i>
------------------------------------------------------ */
.icon {
color: inherit;
display: inline-block;
font-style: normal;
vertical-align: middle;
font-size: 1em; }
/**
@links
--------------------------------------------------------
elements/_links.scss
--------------------------------------------------------
Links, <a> etc. & Webkit tap highlight
Example: link
<p>Lorem Ipsum is simply <a href="#">dummy text</a> of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
-------------------------------------------------------- */
/* @anchors
--------------------------------------------------------
Anchors will have this base styling
------------------------------------------------------ */
a {
color: inherit; }
a:hover, a:focus {
opacity: .75; }
/* @webkit-tap-highlight
--------------------------------------------------------
Declare the webkit tap highlight style
------------------------------------------------------ */
body {
-webkit-tap-highlight-color: rba(0, 0, 0, 0.35); }
/**
@lists
--------------------------------------------------------
elements/_lists.scss
--------------------------------------------------------
Structure for lists
Example: Unordered List
<ul>
<li>List item here</li>
<li>List item here</li>
<li>List item here</li>
<li>List item here</li>
<li>
<ul>
<li>Nested Item</li>
<li>Nested Item</li>
<li>Nested Item</li>
<li>Nested Item</li>
</ul>
</li>
</ul>
Example: Ordered List
<ol>
<li>List item here</li>
<li>List item here</li>
<li>List item here</li>
<li>List item here</li>
<li>
<ol>
<li>Nested Item</li>
<li>Nested Item</li>
<li>Nested Item</li>
<li>Nested Item</li>
</ul>
</li>
</ol>
-------------------------------------------------------- */
ul,
ol {
padding-left: 0;
margin-left: 1.125em;
margin-bottom: 1.125em; }
ul li,
ol li {
line-height: 2; }
/**
@quotes
--------------------------------------------------------
elements/_quotes.scss
--------------------------------------------------------
Blockquotes and pull quotes
----------------------------------------------------- */
/* @blockquote
--------------------------------------------------------
Example:
<blockquote>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<cite><a href="http://foo.com">The source</a></cite>
</blockquote>
-------------------------------------------------------- */
/* @pull-quote
--------------------------------------------------------
Large quotes pulled from body text.
Example:
<blockquote class="pull-quote">
<p>This is an awesome pull quote!</p>
</blockquote>
-------------------------------------------------------- */
/**
@text
--------------------------------------------------------
elements/_text.scss
--------------------------------------------------------
Some basic styles to paragraphs and
inline styles
----------------------------------------------------- */
/* @paragraphs
--------------------------------------------------------
Example: Paragraphs
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
-------------------------------------------------------- */
p {
margin-bottom: 1em;
line-height: 1.40625em; }
/* @inline
--------------------------------------------------------
Common inline elements
Example: inline elements
<p>Lorem Ipsum is <b>bold</b> text of the <strong>strong</strong> printing and typesetting industry. Lorem Ipsum is <i>italic</i> simply dummy text <em>emphasized</em> of the printing and typesetting industry.</p<
-------------------------------------------------------- */
b,
strong {
font-weight: bold; }
i,
em {
font-style: italic; }
/***
@layout
---------------------------------------------------------
A large portion of CSS is structural layout. You will use
these helpers to create the scaffolding that will support
the elements that make up your site.
--------------------------------------------------------- */
/**
@container
--------------------------------------------------------
layout/_container.scss
--------------------------------------------------------
The .container class is applied to restrict the
max-width of an element, usually a bit of content.
Often, you will place a .container div within another
element that has a background color. This gives you
a full-bleed background, but the content is contained
within the max-width.
Example: Container within a section
<section class="awesome-section-with-background-color">
<div class="container">
<p>Your content goes here... </p>
</div>
</section>
------------------------------------------------------ */
.container {
zoom: 1;
margin-left: auto;
margin-right: auto;
max-width: 70em;
padding: 0 1.6875em; }
.container:before, .container:after {
content: " ";
display: table; }
.container:after {
clear: both; }
@media screen and (min-width: 34.375em) {
.container {
padding: 0 3.375em; } }
/**
@grids
---------------------------------------------------------
layout/_grids.scss
--------------------------------------------------------
Skyline uses a simple grid system. It starts with
a wrapper div that can have a classname of .grid-wrap
or .gw for short. Inside of that div, you'll nest
your grid units. These are divs with classname of
either .grid or .g for short.
To specify the responsive behavior of the grid,
add width classes from layout/_widths.scss.
Example: Grid with responsive width classes
<div class="gw">
<div class="g sm-one-whole md-one-half lg-one-third xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-half lg-one-third xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-third lg-one-third xl-one-twelfth">...</div>
<div class="g sm-one-whole md-one-third lg-one-fifth xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-third lg-three-fifths xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-half lg-one-fifth xl-one-twelfth">...</div>
<div class="g sm-one-whole md-one-half lg-one-sixth xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-third lg-one-sixth xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-third lg-one-sixth xl-one-twelfth">...</div>
<div class="g sm-one-whole md-one-third lg-one-sixth xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-half lg-one-sixth xl-one-twelfth">...</div>
<div class="g sm-one-half md-one-half lg-one-sixth xl-one-twelfth">...</div>
</div>
For a grid wrap containing equally-sized grid units, like
a gallery of thumbnails for instance, use the responsive ups
classes from layout/_widths.scss. With these classes
applied to the .grid-wrap/.gw, you won't need to specify
widths on the individual grid units, just on the wrapper.
Example: Grid with responsive ups classes
<div class="gw two-up sm-three-up md-four-up lg-six-up">
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
<div class="g">...</div>
</div>
NOTE: see some test styles at the bottom of this partial
Remove them if you don't need them.
------------------------------------------------------ */
.grid-wrap,
.gw {
zoom: 1;
display: block;
list-style-type: none;
margin-bottom: -1.125em; }
.grid-wrap:before, .grid-wrap:after,
.gw:before,
.gw:after {
content: " ";
display: table; }
.grid-wrap:after,
.gw:after {
clear: both; }
@media screen and (min-width: 20em) {
.grid-wrap,
.gw {
margin: 0 0 -1.125em -1.125em; } }
.grid,
.g {
zoom: 1;
min-height: 1px;
position: relative;
padding-bottom: 1.125em;
display: block;
width: 100%; }
.grid:before, .grid:after,
.g:before,
.g:after {
content: " ";
display: table; }
.grid:after,
.g:after {
clear: both; }
@media screen and (min-width: 20em) {
.grid,
.g {
padding: 0 0 1.125em 1.125em;
float: left; } }
/**
@hide
---------------------------------------------------------
layout/_hide.scss
--------------------------------------------------------
Utility state classes to hide things in different ways
--------------------------------------------------------- */
.is-hidden {
display: none !important;
visibility: hidden !important; }
.is-visually-hidden {
position: absolute;
left: -9999%;
height: 0;
padding: 0;
margin: 0;
opacity: 0; }
@media screen and (min-width: 20em) {
.hide__xs {
display: none; } }
@media screen and (min-width: 34.375em) {
.hide__sm {
display: none; } }
@media screen and (min-width: 48em) {
.hide__md {
display: none; } }
@media screen and (min-width: 64em) {
.hide__lg {
display: none; } }
@media screen and (min-width: 78.5em) {
.hide__xl {
display: none; } }
/**
@media
--------------------------------------------------------
layout/_media.scss
--------------------------------------------------------
The 'media' object is a common pattern in OOCSS.
It consists of a wrapper element with a classname of
.media and then two child elements, one that contains
an image or video that is floated, and the other
contains text.
This used commonly in bios, or comments where you
have an avatar to one site, and the comment next to it.
Source: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
----------------------------------------------------- */
/* @media objects
---------------------------------------------------------
Example: Media object, left
<article class="media">
<div class="media__left one-fifth">
<img src="http://fillmurray.com/300/300">
</div>
<div class="media__body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</article>
Example: Media object, right
<article class="media">
<div class="media__right one-fifth">
<img src="http://fillmurray.com/300/300">
</div>
<div class="media__body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</article>
--------------------------------------------------------- */
.media {
display: block;
zoom: 1;
margin-bottom: 1em; }
.media:before, .media:after {
content: " ";
display: table; }
.media:after {
clear: both; }
.media__left {
float: left;
margin-right: 1em; }
.media__right {
float: right;
margin-left: 1em; }
.media__left img,
.media__right img {
display: block; }
.media__body {
overflow: hidden; }
.media__body,
.media__body > :last-child {
margin-bottom: 0; }
/**
@ups
--------------------------------------------------------
layout/_ups.scss
--------------------------------------------------------
UPS?
Yep, ups. These are global classes that will set
their direct children to a specific width. You will
mainly use these in grids, and maybe with tabs or
navigations.
For instance: four-up will set each child to 25%
Set the ups configuration variables below in this partial
to specify how many or how few classes you want available
in your project.
Example: Ups and grids
<div class="gw two-up">
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
</div><!--/gw-->
<div class="gw three-up">
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
</div><!--/gw-->
Ups work like widths in that they have responsive behavior. If
you prepend an up class with a responsive prefix, like (s for small
or m for medium) the behaviour will only kick in at those
viewports.
For example, if you want your gallery to be two-up at the smallest
viewport, four-up at medium, six-up at large, and eight-up on the largest then use
this.
Example: Responsive Ups
<div class="gw two-up m-four-up l-six-up xl-eight-up">
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
<div class="g"><img src="http://fillmurray.com/500/300"></div>
</div><!--/gw-->
----------------------------------------------------- */
/*
Widths at default Viewport
---------------------------------------------------- */
.one-up > * {
width: 100%; }
.two-up > * {
width: 50%; }
.three-up > * {
width: 33.33333%; }
.four-up > * {
width: 25%; }
.five-up > * {
width: 20%; }
.six-up > * {
width: 16.66667%; }
.seven-up > * {
width: 14.28571%; }
.eight-up > * {
width: 12.5%; }
.nine-up > * {
width: 11.11111%; }
.ten-up > * {
width: 10%; }
.eleven-up > * {
width: 9.09091%; }
.twelve-up > * {
width: 8.33333%; }
/*
Responsive ups at $breakpoint__xs
---------------------------------------------------- */
@media screen and (min-width: 20em) {
.xs-one-up > * {
width: 100%; }
.xs-two-up > * {
width: 50%; }
.xs-three-up > * {
width: 33.33333%; }
.xs-four-up > * {
width: 25%; }
.xs-five-up > * {
width: 20%; }
.xs-six-up > * {
width: 16.66667%; }
.xs-seven-up > * {
width: 14.28571%; }
.xs-eight-up > * {
width: 12.5%; }
.xs-nine-up > * {
width: 11.11111%; }
.xs-ten-up > * {
width: 10%; }
.xs-eleven-up > * {
width: 9.09091%; }
.xs-twelve-up > * {
width: 8.33333%; } }
/*
Responsive ups at $breakpoint__sm
---------------------------------------------------- */
@media screen and (min-width: 34.375em) {
.sm-one-up > * {
width: 100%; }
.sm-two-up > * {
width: 50%; }
.sm-three-up > * {
width: 33.33333%; }
.sm-four-up > * {
width: 25%; }
.sm-five-up > * {
width: 20%; }
.sm-six-up > * {
width: 16.66667%; }
.sm-seven-up > * {
width: 14.28571%; }
.sm-eight-up > * {
width: 12.5%; }
.sm-nine-up > * {
width: 11.11111%; }
.sm-ten-up > * {
width: 10%; }
.sm-eleven-up > * {
width: 9.09091%; }
.sm-twelve-up > * {
width: 8.33333%; } }
/*
Responsive ups at $breakpoint__md
---------------------------------------------------- */
@media screen and (min-width: 48em) {
.md-one-up > * {
width: 100%; }
.md-two-up > * {
width: 50%; }
.md-three-up > * {
width: 33.33333%; }
.md-four-up > * {
width: 25%; }
.md-five-up > * {
width: 20%; }
.md-six-up > * {
width: 16.66667%; }
.md-seven-up > * {
width: 14.28571%; }
.md-eight-up > * {
width: 12.5%; }
.md-nine-up > * {
width: 11.11111%; }
.md-ten-up > * {
width: 10%; }
.md-eleven-up > * {
width: 9.09091%; }
.md-twelve-up > * {
width: 8.33333%; } }
/*
Responsive ups at $breakpoint__lg
---------------------------------------------------- */
@media screen and (min-width: 64em) {
.lg-one-up > * {
width: 100%; }
.lg-two-up > * {
width: 50%; }
.lg-three-up > * {
width: 33.33333%; }
.lg-four-up > * {
width: 25%; }
.lg-five-up > * {
width: 20%; }
.lg-six-up > * {
width: 16.66667%; }
.lg-seven-up > * {
width: 14.28571%; }
.lg-eight-up > * {
width: 12.5%; }
.lg-nine-up > * {
width: 11.11111%; }
.lg-ten-up > * {
width: 10%; }
.lg-eleven-up > * {
width: 9.09091%; }
.lg-twelve-up > * {
width: 8.33333%; } }
/*
Responsive ups at $breakpoint__xl
---------------------------------------------------- */
@media screen and (min-width: 78.5em) {
.xl-one-up > * {
width: 100%; }
.xl-two-up > * {
width: 50%; }
.xl-three-up > * {
width: 33.33333%; }
.xl-four-up > * {
width: 25%; }
.xl-five-up > * {
width: 20%; }
.xl-six-up > * {
width: 16.66667%; }
.xl-seven-up > * {
width: 14.28571%; }
.xl-eight-up > * {
width: 12.5%; }
.xl-nine-up > * {
width: 11.11111%; }
.xl-ten-up > * {
width: 10%; }
.xl-eleven-up > * {
width: 9.09091%; }
.xl-twelve-up > * {
width: 8.33333%; } }
/*
Responsive ups at $breakpoint__xxl
---------------------------------------------------- */
@media screen and (min-width: 100em) {
.xxl-one-up > * {
width: 100%; }
.xxl-two-up > * {
width: 50%; }
.xxl-three-up > * {
width: 33.33333%; }
.xxl-four-up > * {
width: 25%; }
.xxl-five-up > * {
width: 20%; }
.xxl-six-up > * {
width: 16.66667%; }
.xxl-seven-up > * {
width: 14.28571%; }
.xxl-eight-up > * {
width: 12.5%; }
.xxl-nine-up > * {
width: 11.11111%; }
.xxl-ten-up > * {
width: 10%; }
.xxl-eleven-up > * {
width: 9.09091%; }
.xxl-twelve-up > * {
width: 8.33333%; } }
/**
@widths
---------------------------------------------------------
layout/_widths.scss
--------------------------------------------------------
Global Width Classes like .one-third or .seven-twelfths
and responsive widths like .sm-one-third or .xl-one-half
If you append the width class with a size indicator, the
size will only be applied if the viewport is at least
at that breakpoint size.
Set the widths configuration variables below in this partial
to specify how many or how few classes you want available
in your project.
Requires:
* base/_vars.scss and the breakpoint mixin from
* base/_mixin-breakpoints.scss
--------------------------------------------------------- */
/*
Widths at default Viewport
---------------------------------------------------- */
.one-whole {
width: 100%; }
.one-half {
width: 50%; }
.two-halves {
width: 100%; }
.one-third {
width: 33.33333%; }
.two-thirds {
width: 66.66667%; }
.three-thirds {
width: 100%; }
.one-fourth {
width: 25%; }
.two-fourths {
width: 50%; }
.three-fourths {
width: 75%; }
.four-fourths {
width: 100%; }
.one-fifth {
width: 20%; }
.two-fifths {
width: 40%; }
.three-fifths {
width: 60%; }
.four-fifths {
width: 80%; }
.five-fifths {
width: 100%; }
.one-sixth {
width: 16.66667%; }
.two-sixths {
width: 33.33333%; }
.three-sixths {
width: 50%; }
.four-sixths {
width: 66.66667%; }
.five-sixths {
width: 83.33333%; }
.six-sixths {
width: 100%; }
.one-seventh {
width: 14.28571%; }
.two-sevenths {
width: 28.57143%; }
.three-sevenths {
width: 42.85714%; }
.four-sevenths {
width: 57.14286%; }
.five-sevenths {
width: 71.42857%; }
.six-sevenths {
width: 85.71429%; }
.seven-sevenths {
width: 100%; }
.one-eighth {
width: 12.5%; }
.two-eighths {
width: 25%; }
.three-eighths {
width: 37.5%; }
.four-eighths {
width: 50%; }
.five-eighths {
width: 62.5%; }
.six-eighths {
width: 75%; }
.seven-eighths {
width: 87.5%; }
.eight-eighths {
width: 100%; }
.one-ninth {
width: 11.11111%; }
.two-ninths {
width: 22.22222%; }
.three-ninths {
width: 33.33333%; }
.four-ninths {
width: 44.44444%; }
.five-ninths {
width: 55.55556%; }
.six-ninths {
width: 66.66667%; }
.seven-ninths {
width: 77.77778%; }
.eight-ninths {
width: 88.88889%; }
.nine-ninths {
width: 100%; }
.one-tenth {
width: 10%; }
.two-tenths {
width: 20%; }
.three-tenths {
width: 30%; }
.four-tenths {
width: 40%; }
.five-tenths {
width: 50%; }
.six-tenths {
width: 60%; }
.seven-tenths {
width: 70%; }
.eight-tenths {
width: 80%; }
.nine-tenths {
width: 90%; }
.ten-tenths {
width: 100%; }
.one-eleventh {
width: 9.09091%; }
.two-elevenths {
width: 18.18182%; }
.three-elevenths {
width: 27.27273%; }
.four-elevenths {
width: 36.36364%; }
.five-elevenths {
width: 45.45455%; }
.six-elevenths {
width: 54.54545%; }
.seven-elevenths {
width: 63.63636%; }
.eight-elevenths {
width: 72.72727%; }
.nine-elevenths {
width: 81.81818%; }
.ten-elevenths {
width: 90.90909%; }
.eleven-elevenths {
width: 100%; }
.one-twelfth {
width: 8.33333%; }
.two-twelfths {
width: 16.66667%; }
.three-twelfths {
width: 25%; }
.four-twelfths {
width: 33.33333%; }
.five-twelfths {
width: 41.66667%; }
.six-twelfths {
width: 50%; }
.seven-twelfths {
width: 58.33333%; }
.eight-twelfths {
width: 66.66667%; }
.nine-twelfths {
width: 75%; }
.ten-twelfths {
width: 83.33333%; }
.eleven-twelfths {
width: 91.66667%; }
.twelve-twelfths {
width: 100%; }
/*
Responsive widths at $breakpoint__sm
---------------------------------------------------- */
@media screen and (min-width: 34.375em) {
.sm-one-whole {
width: 100%; }
.sm-one-half {
width: 50%; }
.sm-two-halves {
width: 100%; }
.sm-one-third {
width: 33.33333%; }
.sm-two-thirds {
width: 66.66667%; }
.sm-three-thirds {
width: 100%; }
.sm-one-fourth {
width: 25%; }
.sm-two-fourths {
width: 50%; }
.sm-three-fourths {
width: 75%; }
.sm-four-fourths {
width: 100%; }
.sm-one-fifth {
width: 20%; }
.sm-two-fifths {
width: 40%; }
.sm-three-fifths {
width: 60%; }
.sm-four-fifths {
width: 80%; }
.sm-five-fifths {
width: 100%; }
.sm-one-sixth {
width: 16.66667%; }
.sm-two-sixths {
width: 33.33333%; }
.sm-three-sixths {
width: 50%; }
.sm-four-sixths {
width: 66.66667%; }
.sm-five-sixths {
width: 83.33333%; }
.sm-six-sixths {
width: 100%; }
.sm-one-seventh {
width: 14.28571%; }
.sm-two-sevenths {
width: 28.57143%; }
.sm-three-sevenths {
width: 42.85714%; }
.sm-four-sevenths {
width: 57.14286%; }
.sm-five-sevenths {
width: 71.42857%; }
.sm-six-sevenths {
width: 85.71429%; }
.sm-seven-sevenths {
width: 100%; }
.sm-one-eighth {
width: 12.5%; }
.sm-two-eighths {
width: 25%; }
.sm-three-eighths {
width: 37.5%; }
.sm-four-eighths {
width: 50%; }
.sm-five-eighths {
width: 62.5%; }
.sm-six-eighths {
width: 75%; }
.sm-seven-eighths {
width: 87.5%; }
.sm-eight-eighths {
width: 100%; }
.sm-one-ninth {
width: 11.11111%; }
.sm-two-ninths {
width: 22.22222%; }
.sm-three-ninths {
width: 33.33333%; }
.sm-four-ninths {
width: 44.44444%; }
.sm-five-ninths {
width: 55.55556%; }
.sm-six-ninths {
width: 66.66667%; }
.sm-seven-ninths {
width: 77.77778%; }
.sm-eight-ninths {
width: 88.88889%; }
.sm-nine-ninths {
width: 100%; }
.sm-one-tenth {
width: 10%; }
.sm-two-tenths {
width: 20%; }
.sm-three-tenths {
width: 30%; }
.sm-four-tenths {
width: 40%; }
.sm-five-tenths {
width: 50%; }
.sm-six-tenths {
width: 60%; }
.sm-seven-tenths {
width: 70%; }
.sm-eight-tenths {
width: 80%; }
.sm-nine-tenths {
width: 90%; }
.sm-ten-tenths {
width: 100%; }
.sm-one-eleventh {
width: 9.09091%; }
.sm-two-elevenths {
width: 18.18182%; }
.sm-three-elevenths {
width: 27.27273%; }
.sm-four-elevenths {
width: 36.36364%; }
.sm-five-elevenths {
width: 45.45455%; }
.sm-six-elevenths {
width: 54.54545%; }
.sm-seven-elevenths {
width: 63.63636%; }
.sm-eight-elevenths {
width: 72.72727%; }
.sm-nine-elevenths {
width: 81.81818%; }
.sm-ten-elevenths {
width: 90.90909%; }
.sm-eleven-elevenths {
width: 100%; }
.sm-one-twelfth {
width: 8.33333%; }
.sm-two-twelfths {
width: 16.66667%; }
.sm-three-twelfths {
width: 25%; }
.sm-four-twelfths {
width: 33.33333%; }
.sm-five-twelfths {
width: 41.66667%; }
.sm-six-twelfths {
width: 50%; }
.sm-seven-twelfths {
width: 58.33333%; }
.sm-eight-twelfths {
width: 66.66667%; }
.sm-nine-twelfths {
width: 75%; }
.sm-ten-twelfths {
width: 83.33333%; }
.sm-eleven-twelfths {
width: 91.66667%; }
.sm-twelve-twelfths {
width: 100%; } }
/*
Responsive widths at $breakpoint__md
---------------------------------------------------- */
@media screen and (min-width: 48em) {
.md-one-whole {
width: 100%; }
.md-one-half {
width: 50%; }
.md-two-halves {
width: 100%; }
.md-one-third {
width: 33.33333%; }
.md-two-thirds {
width: 66.66667%; }
.md-three-thirds {
width: 100%; }
.md-one-fourth {
width: 25%; }
.md-two-fourths {
width: 50%; }
.md-three-fourths {
width: 75%; }
.md-four-fourths {
width: 100%; }
.md-one-fifth {
width: 20%; }
.md-two-fifths {
width: 40%; }
.md-three-fifths {
width: 60%; }
.md-four-fifths {
width: 80%; }
.md-five-fifths {
width: 100%; }
.md-one-sixth {
width: 16.66667%; }
.md-two-sixths {
width: 33.33333%; }
.md-three-sixths {
width: 50%; }
.md-four-sixths {
width: 66.66667%; }
.md-five-sixths {
width: 83.33333%; }
.md-six-sixths {
width: 100%; }
.md-one-seventh {
width: 14.28571%; }
.md-two-sevenths {
width: 28.57143%; }
.md-three-sevenths {
width: 42.85714%; }
.md-four-sevenths {
width: 57.14286%; }
.md-five-sevenths {
width: 71.42857%; }
.md-six-sevenths {
width: 85.71429%; }
.md-seven-sevenths {
width: 100%; }
.md-one-eighth {
width: 12.5%; }
.md-two-eighths {
width: 25%; }
.md-three-eighths {
width: 37.5%; }
.md-four-eighths {
width: 50%; }
.md-five-eighths {
width: 62.5%; }
.md-six-eighths {
width: 75%; }
.md-seven-eighths {
width: 87.5%; }
.md-eight-eighths {
width: 100%; }
.md-one-ninth {
width: 11.11111%; }
.md-two-ninths {
width: 22.22222%; }
.md-three-ninths {
width: 33.33333%; }
.md-four-ninths {
width: 44.44444%; }
.md-five-ninths {
width: 55.55556%; }
.md-six-ninths {
width: 66.66667%; }
.md-seven-ninths {
width: 77.77778%; }
.md-eight-ninths {
width: 88.88889%; }
.md-nine-ninths {
width: 100%; }
.md-one-tenth {
width: 10%; }
.md-two-tenths {
width: 20%; }
.md-three-tenths {
width: 30%; }
.md-four-tenths {
width: 40%; }
.md-five-tenths {
width: 50%; }
.md-six-tenths {
width: 60%; }
.md-seven-tenths {
width: 70%; }
.md-eight-tenths {
width: 80%; }
.md-nine-tenths {
width: 90%; }
.md-ten-tenths {
width: 100%; }
.md-one-eleventh {
width: 9.09091%; }
.md-two-elevenths {
width: 18.18182%; }
.md-three-elevenths {
width: 27.27273%; }
.md-four-elevenths {
width: 36.36364%; }
.md-five-elevenths {
width: 45.45455%; }
.md-six-elevenths {
width: 54.54545%; }
.md-seven-elevenths {
width: 63.63636%; }
.md-eight-elevenths {
width: 72.72727%; }
.md-nine-elevenths {
width: 81.81818%; }
.md-ten-elevenths {
width: 90.90909%; }
.md-eleven-elevenths {
width: 100%; }
.md-one-twelfth {
width: 8.33333%; }
.md-two-twelfths {
width: 16.66667%; }
.md-three-twelfths {
width: 25%; }
.md-four-twelfths {
width: 33.33333%; }
.md-five-twelfths {
width: 41.66667%; }
.md-six-twelfths {
width: 50%; }
.md-seven-twelfths {
width: 58.33333%; }
.md-eight-twelfths {
width: 66.66667%; }
.md-nine-twelfths {
width: 75%; }
.md-ten-twelfths {
width: 83.33333%; }
.md-eleven-twelfths {
width: 91.66667%; }
.md-twelve-twelfths {
width: 100%; } }
/*
Responsive widths at $breakpoint__lg
---------------------------------------------------- */
@media screen and (min-width: 64em) {
.lg-one-whole {
width: 100%; }
.lg-one-half {
width: 50%; }
.lg-two-halves {
width: 100%; }
.lg-one-third {
width: 33.33333%; }
.lg-two-thirds {
width: 66.66667%; }
.lg-three-thirds {
width: 100%; }
.lg-one-fourth {
width: 25%; }
.lg-two-fourths {
width: 50%; }
.lg-three-fourths {
width: 75%; }
.lg-four-fourths {
width: 100%; }
.lg-one-fifth {
width: 20%; }
.lg-two-fifths {
width: 40%; }
.lg-three-fifths {
width: 60%; }
.lg-four-fifths {
width: 80%; }
.lg-five-fifths {
width: 100%; }
.lg-one-sixth {
width: 16.66667%; }
.lg-two-sixths {
width: 33.33333%; }
.lg-three-sixths {
width: 50%; }
.lg-four-sixths {
width: 66.66667%; }
.lg-five-sixths {
width: 83.33333%; }
.lg-six-sixths {
width: 100%; }
.lg-one-seventh {
width: 14.28571%; }
.lg-two-sevenths {
width: 28.57143%; }
.lg-three-sevenths {
width: 42.85714%; }
.lg-four-sevenths {
width: 57.14286%; }
.lg-five-sevenths {
width: 71.42857%; }
.lg-six-sevenths {
width: 85.71429%; }
.lg-seven-sevenths {
width: 100%; }
.lg-one-eighth {
width: 12.5%; }
.lg-two-eighths {
width: 25%; }
.lg-three-eighths {
width: 37.5%; }
.lg-four-eighths {
width: 50%; }
.lg-five-eighths {
width: 62.5%; }
.lg-six-eighths {
width: 75%; }
.lg-seven-eighths {
width: 87.5%; }
.lg-eight-eighths {
width: 100%; }
.lg-one-ninth {
width: 11.11111%; }
.lg-two-ninths {
width: 22.22222%; }
.lg-three-ninths {
width: 33.33333%; }
.lg-four-ninths {
width: 44.44444%; }
.lg-five-ninths {
width: 55.55556%; }
.lg-six-ninths {
width: 66.66667%; }
.lg-seven-ninths {
width: 77.77778%; }
.lg-eight-ninths {
width: 88.88889%; }
.lg-nine-ninths {
width: 100%; }
.lg-one-tenth {
width: 10%; }
.lg-two-tenths {
width: 20%; }
.lg-three-tenths {
width: 30%; }
.lg-four-tenths {
width: 40%; }
.lg-five-tenths {
width: 50%; }
.lg-six-tenths {
width: 60%; }
.lg-seven-tenths {
width: 70%; }
.lg-eight-tenths {
width: 80%; }
.lg-nine-tenths {
width: 90%; }
.lg-ten-tenths {
width: 100%; }
.lg-one-eleventh {
width: 9.09091%; }
.lg-two-elevenths {
width: 18.18182%; }
.lg-three-elevenths {
width: 27.27273%; }
.lg-four-elevenths {
width: 36.36364%; }
.lg-five-elevenths {
width: 45.45455%; }
.lg-six-elevenths {
width: 54.54545%; }
.lg-seven-elevenths {
width: 63.63636%; }
.lg-eight-elevenths {
width: 72.72727%; }
.lg-nine-elevenths {
width: 81.81818%; }
.lg-ten-elevenths {
width: 90.90909%; }
.lg-eleven-elevenths {
width: 100%; }
.lg-one-twelfth {
width: 8.33333%; }
.lg-two-twelfths {
width: 16.66667%; }
.lg-three-twelfths {
width: 25%; }
.lg-four-twelfths {
width: 33.33333%; }
.lg-five-twelfths {
width: 41.66667%; }
.lg-six-twelfths {
width: 50%; }
.lg-seven-twelfths {
width: 58.33333%; }
.lg-eight-twelfths {
width: 66.66667%; }
.lg-nine-twelfths {
width: 75%; }
.lg-ten-twelfths {
width: 83.33333%; }
.lg-eleven-twelfths {
width: 91.66667%; }
.lg-twelve-twelfths {
width: 100%; } }
/*
Responsive widths at $breakpoint__xl
---------------------------------------------------- */
@media screen and (min-width: 78.5em) {
.xl-one-whole {
width: 100%; }
.xl-one-half {
width: 50%; }
.xl-two-halves {
width: 100%; }
.xl-one-third {
width: 33.33333%; }
.xl-two-thirds {
width: 66.66667%; }
.xl-three-thirds {
width: 100%; }
.xl-one-fourth {
width: 25%; }
.xl-two-fourths {
width: 50%; }
.xl-three-fourths {
width: 75%; }
.xl-four-fourths {
width: 100%; }
.xl-one-fifth {
width: 20%; }
.xl-two-fifths {
width: 40%; }
.xl-three-fifths {
width: 60%; }
.xl-four-fifths {
width: 80%; }
.xl-five-fifths {
width: 100%; }
.xl-one-sixth {
width: 16.66667%; }
.xl-two-sixths {
width: 33.33333%; }
.xl-three-sixths {
width: 50%; }
.xl-four-sixths {
width: 66.66667%; }
.xl-five-sixths {
width: 83.33333%; }
.xl-six-sixths {
width: 100%; }
.xl-one-seventh {
width: 14.28571%; }
.xl-two-sevenths {
width: 28.57143%; }
.xl-three-sevenths {
width: 42.85714%; }
.xl-four-sevenths {
width: 57.14286%; }
.xl-five-sevenths {
width: 71.42857%; }
.xl-six-sevenths {
width: 85.71429%; }
.xl-seven-sevenths {
width: 100%; }
.xl-one-eighth {
width: 12.5%; }
.xl-two-eighths {
width: 25%; }
.xl-three-eighths {
width: 37.5%; }
.xl-four-eighths {
width: 50%; }
.xl-five-eighths {
width: 62.5%; }
.xl-six-eighths {
width: 75%; }
.xl-seven-eighths {
width: 87.5%; }
.xl-eight-eighths {
width: 100%; }
.xl-one-ninth {
width: 11.11111%; }
.xl-two-ninths {
width: 22.22222%; }
.xl-three-ninths {
width: 33.33333%; }
.xl-four-ninths {
width: 44.44444%; }
.xl-five-ninths {
width: 55.55556%; }
.xl-six-ninths {
width: 66.66667%; }
.xl-seven-ninths {
width: 77.77778%; }
.xl-eight-ninths {
width: 88.88889%; }
.xl-nine-ninths {
width: 100%; }
.xl-one-tenth {
width: 10%; }
.xl-two-tenths {
width: 20%; }
.xl-three-tenths {
width: 30%; }
.xl-four-tenths {
width: 40%; }
.xl-five-tenths {
width: 50%; }
.xl-six-tenths {
width: 60%; }
.xl-seven-tenths {
width: 70%; }
.xl-eight-tenths {
width: 80%; }
.xl-nine-tenths {
width: 90%; }
.xl-ten-tenths {
width: 100%; }
.xl-one-eleventh {
width: 9.09091%; }
.xl-two-elevenths {
width: 18.18182%; }
.xl-three-elevenths {
width: 27.27273%; }
.xl-four-elevenths {
width: 36.36364%; }
.xl-five-elevenths {
width: 45.45455%; }
.xl-six-elevenths {
width: 54.54545%; }
.xl-seven-elevenths {
width: 63.63636%; }
.xl-eight-elevenths {
width: 72.72727%; }
.xl-nine-elevenths {
width: 81.81818%; }
.xl-ten-elevenths {
width: 90.90909%; }
.xl-eleven-elevenths {
width: 100%; }
.xl-one-twelfth {
width: 8.33333%; }
.xl-two-twelfths {
width: 16.66667%; }
.xl-three-twelfths {
width: 25%; }
.xl-four-twelfths {
width: 33.33333%; }
.xl-five-twelfths {
width: 41.66667%; }
.xl-six-twelfths {
width: 50%; }
.xl-seven-twelfths {
width: 58.33333%; }
.xl-eight-twelfths {
width: 66.66667%; }
.xl-nine-twelfths {
width: 75%; }
.xl-ten-twelfths {
width: 83.33333%; }
.xl-eleven-twelfths {
width: 91.66667%; }
.xl-twelve-twelfths {
width: 100%; } }
/*
Responsive widths at $breakpoint__xxl
---------------------------------------------------- */
@media screen and (min-width: 100em) {
.xxl-one-whole {
width: 100%; }
.xxl-one-half {
width: 50%; }
.xxl-two-halves {
width: 100%; }
.xxl-one-third {
width: 33.33333%; }
.xxl-two-thirds {
width: 66.66667%; }
.xxl-three-thirds {
width: 100%; }
.xxl-one-fourth {
width: 25%; }
.xxl-two-fourths {
width: 50%; }
.xxl-three-fourths {
width: 75%; }
.xxl-four-fourths {
width: 100%; }
.xxl-one-fifth {
width: 20%; }
.xxl-two-fifths {
width: 40%; }
.xxl-three-fifths {
width: 60%; }
.xxl-four-fifths {
width: 80%; }
.xxl-five-fifths {
width: 100%; }
.xxl-one-sixth {
width: 16.66667%; }
.xxl-two-sixths {
width: 33.33333%; }
.xxl-three-sixths {
width: 50%; }
.xxl-four-sixths {
width: 66.66667%; }
.xxl-five-sixths {
width: 83.33333%; }
.xxl-six-sixths {
width: 100%; }
.xxl-one-seventh {
width: 14.28571%; }
.xxl-two-sevenths {
width: 28.57143%; }
.xxl-three-sevenths {
width: 42.85714%; }
.xxl-four-sevenths {
width: 57.14286%; }
.xxl-five-sevenths {
width: 71.42857%; }
.xxl-six-sevenths {
width: 85.71429%; }
.xxl-seven-sevenths {
width: 100%; }
.xxl-one-eighth {
width: 12.5%; }
.xxl-two-eighths {
width: 25%; }
.xxl-three-eighths {
width: 37.5%; }
.xxl-four-eighths {
width: 50%; }
.xxl-five-eighths {
width: 62.5%; }
.xxl-six-eighths {
width: 75%; }
.xxl-seven-eighths {
width: 87.5%; }
.xxl-eight-eighths {
width: 100%; }
.xxl-one-ninth {
width: 11.11111%; }
.xxl-two-ninths {
width: 22.22222%; }
.xxl-three-ninths {
width: 33.33333%; }
.xxl-four-ninths {
width: 44.44444%; }
.xxl-five-ninths {
width: 55.55556%; }
.xxl-six-ninths {
width: 66.66667%; }
.xxl-seven-ninths {
width: 77.77778%; }
.xxl-eight-ninths {
width: 88.88889%; }
.xxl-nine-ninths {
width: 100%; }
.xxl-one-tenth {
width: 10%; }
.xxl-two-tenths {
width: 20%; }
.xxl-three-tenths {
width: 30%; }
.xxl-four-tenths {
width: 40%; }
.xxl-five-tenths {
width: 50%; }
.xxl-six-tenths {
width: 60%; }
.xxl-seven-tenths {
width: 70%; }
.xxl-eight-tenths {
width: 80%; }
.xxl-nine-tenths {
width: 90%; }
.xxl-ten-tenths {
width: 100%; }
.xxl-one-eleventh {
width: 9.09091%; }
.xxl-two-elevenths {
width: 18.18182%; }
.xxl-three-elevenths {
width: 27.27273%; }
.xxl-four-elevenths {
width: 36.36364%; }
.xxl-five-elevenths {
width: 45.45455%; }
.xxl-six-elevenths {
width: 54.54545%; }
.xxl-seven-elevenths {
width: 63.63636%; }
.xxl-eight-elevenths {
width: 72.72727%; }
.xxl-nine-elevenths {
width: 81.81818%; }
.xxl-ten-elevenths {
width: 90.90909%; }
.xxl-eleven-elevenths {
width: 100%; }
.xxl-one-twelfth {
width: 8.33333%; }
.xxl-two-twelfths {
width: 16.66667%; }
.xxl-three-twelfths {
width: 25%; }
.xxl-four-twelfths {
width: 33.33333%; }
.xxl-five-twelfths {
width: 41.66667%; }
.xxl-six-twelfths {
width: 50%; }
.xxl-seven-twelfths {
width: 58.33333%; }
.xxl-eight-twelfths {
width: 66.66667%; }
.xxl-nine-twelfths {
width: 75%; }
.xxl-ten-twelfths {
width: 83.33333%; }
.xxl-eleven-twelfths {
width: 91.66667%; }
.xxl-twelve-twelfths {
width: 100%; } }
/***
@modules
---------------------------------------------------------
Reusable objects that are combinations
of elements and other modules.
When you create a new module, make sure the partial is
in the modules directory, and you import it below
Comment out any partial you don't need for this app.
--------------------------------------------------------- */
/**
@site
--------------------------------------------------------
modules/_site.scss
--------------------------------------------------------
We use the naming convention of .site-* for global
modules like the header, main, and footer.
Sometimes it's beneficial to have a wrapping element
around the site, directly following the <body>. In
this case, we call that .site.
------------------------------------------------------ */
/**
@site-header
--------------------------------------------------------
modules/_site-header.scss
--------------------------------------------------------
Site-wide header
------------------------------------------------------ */
.site-header {
zoom: 1;
padding: 1.125em 0;
border-bottom: 1px solid #cfd2d2; }
.site-header:before, .site-header:after {
content: " ";
display: table; }
.site-header:after {
clear: both; }
/* @branding
--------------------------------------------------------
The logo & (optional) wordmark
Example: Branding logo
<a class="branding" href="/">
<img class="branding__logo img--title" src="images/logo.svg" alt="My Company">
<h1 class="branding__wordmark">My Company</h1>
</a>
------------------------------------------------------ */
.branding {
margin: 0 auto 1.125em;
text-decoration: none;
display: block;
text-align: center; }
@media screen and (min-width: 48em) {
.branding {
margin: 0;
float: left;
text-align: left; } }
.branding__logo {
height: 3.375em;
width: 3.375em; }
@media screen and (min-width: 48em) {
.branding__logo {
float: left;
margin-right: 1.125em; } }
.branding__wordmark {
font-size: 1.6875em;
white-space: nowrap;
line-height: 2.25em;
margin: 0; }
/*
@site-nav
--------------------------------------------------------
The main site navigation.
----------------------------------------------------- */
.site-nav {
text-align: center; }
@media screen and (min-width: 48em) {
.site-nav {
float: right; } }
.site-nav a {
display: inline-block;
height: 3.375em;
line-height: 3.375em;
padding: 0 .5em;
margin-left: 0.5625em; }
.site-nav a:first-child {
margin-left: 0; }
/**
@site-main
--------------------------------------------------------
modules/_site-main.scss
--------------------------------------------------------
The site's main content
------------------------------------------------------ */
.site-main {
display: block; }
/**
@site-footer
--------------------------------------------------------
modules/_site-footer.scss
--------------------------------------------------------
The site's global footer
------------------------------------------------------ */
.site-footer {
padding: 1.125em 0;
border-top: 1px solid #cfd2d2; }
.site-credits {
display: block;
clear: both; }
/**
@pages
--------------------------------------------------------
modules/_pages.scss
--------------------------------------------------------
Pages contain content and can have styled headers
and footers if you choose.
----------------------------------------------------- */
.page__header {
padding: 1.125em 0;
margin-bottom: 1.125em;
background: rgba(0, 0, 0, 0.025);
border-bottom: 1px solid #cfd2d2; }
/**
@alerts
---------------------------------------------------------
modules/_alerts.scss
--------------------------------------------------------
Alerts are UI elements that give important info
Example: Error
<div class="alert alert--error">
<a href="#" class="btn__close">×</a>
<p>Uh oh - something went wrong</p>
</div>
Example: Warning
<div class="alert alert--warning">
<a href="#" class="btn__close">×</a>
<p>Shake it fast, but watch yourself.</p>
</div>
Example: Success
<div class="alert alert--success">
<a href="#" class="btn__close">×</a>
<p>The secret to my success is that I learn, 25 hours a day!</p>
</div>
Example: Info
<div class="alert alert--info">
<a href="#" class="btn__close">×</a>
<p>Did you ever know that you're my hero?</p>
</div>
NOTE: The code below uses declared color units, if you'd
prefer, declare those as variables in _vars.scss
------------------------------------------------------ */
.alert {
position: relative;
border-width: 1px;
border-style: solid;
margin-bottom: 2.25em;
padding: .5rem 4rem .5rem .5rem;
line-height: 1.25; }
.alert p {
margin: 0; }
.alert .btn__close {
position: absolute;
top: 50%;
margin-top: -.75em;
right: 1em;
opacity: .5;
-webkit-transition: all .3s;
transition: all .3s;
text-decoration: none; }
.alert .btn__close:hover {
opacity: 1; }
.alert--error {
color: #e04646;
border-color: #e04646;
background: #ffe6e6; }
.alert--error .btn__close {
color: #e04646; }
.alert--error:after {
border-color: #e04646; }
.alert--warning {
color: #b29804;
border-color: #b29804;
background: #fcf7d8; }
.alert--warning .btn__close {
color: #b29804; }
.alert--warning:after {
border-color: #b29804; }
.alert--info {
color: #537df6;
border-color: #537df6;
background: #e8f3ff; }
.alert--info .btn__close {
color: #537df6; }
.alert--info:after {
border-color: #537df6; }
.alert--success {
color: #0ca129;
border-color: #0ca129;
background: #dafce1; }
.alert--success .btn__close {
color: #0ca129; }
.alert--success:after {
border-color: #0ca129; }
/**
@blocks
--------------------------------------------------------
modules/_blocks.scss
--------------------------------------------------------
Blocks contain sections of content. Blocks can have
different visual styling, but usually have the same
structure; one spacing unit margin at the bottom,
and some have borders, and padding, etc.
----------------------------------------------------- */
.block {
margin-bottom: 2.25em; }
.block--ends {
margin-top: 2.25em;
margin-bottom: 2.25em; }
/**
@callouts
--------------------------------------------------------
modules/_callouts.scss
--------------------------------------------------------
Callouts, are sections of featured content that usually
contain an icon, a title, and some text. These are
usually in a row, and call attention to highlighted features.
Example: Callout
<article class="callout">
<img class="callout__media" src="images/fpo-icon.png">
<h3 class="callout__title">Feature</h3>
<p>This callout is very impressive, and should command your attention</p>
</article>
----------------------------------------------------- */
.callout {
text-align: center; }
.callout__media {
display: block;
margin: 0 auto 1.125em;
max-height: 3em;
width: auto; }
.callout__title {
font-size: 1.5em; }
/**
@heroes
--------------------------------------------------------
modules/_heroes.scss
--------------------------------------------------------
Just your everyday, normal hero. Contains a div that has
the media (video or image) in the background, and a div
for the main content.
Example: Hero
<div class="hero">
<div class="hero__main">
<h1 class="hero__leadin">This is the leadin</h1>
<h2 class="hero__name">Name Here</h2>
<div class="hero__media"><img src="http://fillmurray.com/1000/400"></div>
</div>
------------------------------------------------------ */
.hero {
position: relative;
overflow: hidden;
margin-bottom: 2.25em; }
.hero__media {
position: relative;
z-index: 200; }
.hero__main {
position: absolute;
z-index: 210;
width: 100%;
top: 50%;
text-align: center;
color: white;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: .75em; }
@media screen and (min-width: 34.375em) {
.hero__main {
font-size: 1em; } }
@media screen and (min-width: 64em) {
.hero__main {
font-size: 1.25em; } }
/**
@modals
---------------------------------------------------------
modules/_modals.scss
--------------------------------------------------------
These are very basic modals, which simply cover the entire
viewport from top to bottom, left to right. Feel free
to edit the styles of modals to suit your needs.
--------------------------------------------------------- */
.modal {
position: fixed;
z-index: 200;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
background: rgba(255, 255, 255, 0.96);
display: none; }
.modal__container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: table;
height: 100%;
padding: 1.125em; }
.modal__close {
position: absolute;
top: 0;
right: 0;
margin: 0.37125em 0.37125em 0 0;
font-size: 3em;
border: none;
background: none;
display: block; }
.modal__close:hover, .modal__close:focus {
outline: none;
border: none;
opacity: .85; }
.modal__close:active {
opacity: .6; }
.modal__body {
display: table-cell;
height: 100%;
width: 100%;
vertical-align: middle; }
.modal__body p {
margin-bottom: 1em;
font-size: 1.5em; }
/**
@thumbnails
--------------------------------------------------------
modules/_thumbnails.scss
--------------------------------------------------------
Thumbnails are usually found within a grid or gallery,
as a teaser or preview of more content. The common
use is to have an image on top of a title and text
below, while the entire thumbnail is an anchor link.
Example: Thumbnail
<a class="thumbnail" href="/some/article">
<img class="thumbnail__media" src="http://fillmurray.com/400/200">
<div class="thumbnail__caption">
<h2>A caption title here</h2>
<p>Some more text follows to tease the rest of
the content</p>
</div>
</a>
----------------------------------------------------- */
.thumbnail {
display: block;
padding: 0.5625em;
background: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.15);
text-decoration: none; }
.thumbnail__media {
margin-bottom: 0.5625em; }
.thumbnail__caption {
font-size: 85%; }
.thumbnail__caption h1, .thumbnail__caption h2, .thumbnail__caption h3, .thumbnail__caption h4, .thumbnail__caption h5, .thumbnail__caption h5 {
margin-bottom: 0.28125em; }
/**
@video
--------------------------------------------------------
modules/_video-embeds.scss
--------------------------------------------------------
Video Embeds
----------------------------------------------------- */
.video-embed {
display: block;
width: 100%;
height: 0;
position: relative;
padding-top: 66.666%; }
.video-embed iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100% !important;
width: 100% !important; }
================================================
FILE: css/screen.scss
================================================
/****
MAIN STYLESHEET for [* Site Name Here *]
---------------------------------------------------------
BUILT WITH SKYLINE: EVOLVING CSS ARCHITECTURE
See README.md for info and credits
TABLE OF CONTENTS
@toc
- Base ............ foundations, mixins, functions, vars
- Elements ........ single elements
- Layout .......... layout objects like grids, containers
- Modules ......... objects created by combining elements
--------------------------------------------------------- */
/***
@base
---------------------------------------------------------
Your CSS begins with some global variables, a reset which
is basically Normalize, some mixins, and a print stylesheet.
----------------------------------------------------- */
// Vars
//
@import "base/vars";
// Reset
//
@import "base/reset";
// Mixins
//
@import "base/mixin-breakpoints";
@import "base/mixin-clearfix";
@import "base/mixin-font-face-importer";
@import "base/mixin-gradual-media-queries";
// Global
//
@import "base/fonts";
// Development Helpers
//
@import "base/dev-helpers";
// Print
//
@import "base/print";
/***
@elements
---------------------------------------------------------
Global styling of elements.
--------------------------------------------------------- */
@import "elements/body";
@import "elements/buttons";
@import "elements/code";
@import "elements/forms";
@import "elements/headings";
@import "elements/hr";
@import "elements/html";
@import "elements/images";
@import "elements/icons";
@import "elements/links";
@import "elements/lists";
@import "elements/quotes";
@import "elements/text";
/***
@layout
---------------------------------------------------------
A large portion of CSS is structural layout. You will use
these helpers to create the scaffolding that will support
the elements and modules that make up your site.
--------------------------------------------------------- */
@import "layout/container";
@import "layout/grids";
@import "layout/hide";
@import "layout/media";
@import "layout/ups";
@import "layout/widths";
/***
@modules
---------------------------------------------------------
Reusable objects that are combinations
of elements and other modules.
When you create a new module, make sure the partial is
in the modules directory, and you import it below.
Comment out any partial you don't need for this app.
--------------------------------------------------------- */
// Site Modules
//
@import "modules/site";
@import "modules/site-header";
@import "modules/site-main";
@import "modules/site-footer";
// Page Template Module
//
@import "modules/pages";
// Component Modules
//
@import "modules/alerts";
@import "modules/blocks";
@import "modules/callouts";
@import "modules/heroes";
@import "modules/modals";
@import "modules/thumbnails";
@import "modules/video-embeds";
================================================
FILE: example-forms.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>***YOUR-TITLE-HERE***</title>
<!-- Styles -->
<link rel="stylesheet" href="css/screen.css">
<!-- Canonical Meta -->
<link rel="canonical" href="**YOUR-URL-HERE***">
<!-- Viewport Meta-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO Meta -->
<meta name="description" content="***YOUR-CONTENT-HERE-***">
<meta name="keywords" content="***YOUR-CONTENT-HERE-***">
<meta name="robots" content="INDEX,FOLLOW">
<!-- Favicons -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png">
<meta name="apple-mobile-web-app-title" content="Unsung">
<!-- Facebook -->
<meta property="og:image" content="***YOUR-URUL-HERE-***/images/avatar.png">
<meta property="og:title" content="***YOUR-TITLE-HERE-***">
<meta property="og:site_name" content="***YOUR-SITE'S-NA
gitextract_fuxr4rg9/ ├── .gitignore ├── LICENSE ├── README.md ├── css/ │ ├── README.md │ ├── base/ │ │ ├── _dev-helpers.scss │ │ ├── _fonts.scss │ │ ├── _mixin-breakpoints.scss │ │ ├── _mixin-clearfix.scss │ │ ├── _mixin-font-face-importer.scss │ │ ├── _mixin-gradual-media-queries.scss │ │ ├── _print.scss │ │ ├── _reset.scss │ │ └── _vars.scss │ ├── elements/ │ │ ├── _body.scss │ │ ├── _buttons.scss │ │ ├── _code.scss │ │ ├── _forms.scss │ │ ├── _headings.scss │ │ ├── _hr.scss │ │ ├── _html.scss │ │ ├── _icons.scss │ │ ├── _images.scss │ │ ├── _links.scss │ │ ├── _lists.scss │ │ ├── _quotes.scss │ │ ├── _tables.scss │ │ └── _text.scss │ ├── layout/ │ │ ├── _container.scss │ │ ├── _grids.scss │ │ ├── _hide.scss │ │ ├── _media.scss │ │ ├── _ups.scss │ │ └── _widths.scss │ ├── modules/ │ │ ├── _alerts.scss │ │ ├── _blocks.scss │ │ ├── _callouts.scss │ │ ├── _heroes.scss │ │ ├── _modals.scss │ │ ├── _pages.scss │ │ ├── _site-footer.scss │ │ ├── _site-header.scss │ │ ├── _site-main.scss │ │ ├── _site.scss │ │ ├── _thumbnails.scss │ │ └── _video-embeds.scss │ ├── screen.css │ └── screen.scss ├── example-forms.html ├── example-grids.html ├── example-modules.html └── index.html
Condensed preview — 51 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (245K chars).
[
{
"path": ".gitignore",
"chars": 45,
"preview": ".DS_Store\n.sass-cache\nstylesheets/.sass-cache"
},
{
"path": "LICENSE",
"chars": 1088,
"preview": "The MIT License\n\nCopyright (c) 2014 Jeff Schram (Crush & Lovely)\n\nPermission is hereby granted, free of charge, to any p"
},
{
"path": "README.md",
"chars": 3102,
"preview": "\n\n# Skyline\nEvolving CSS Architecture\n\n### Introduction\nSkyline is a st"
},
{
"path": "css/README.md",
"chars": 1818,
"preview": "\nBUILT WITH SKYLINE: EVOLVING CSS ARCHITECTURE\n=========================================================\n\n\n\nSKYLINE CREA"
},
{
"path": "css/base/_dev-helpers.scss",
"chars": 6963,
"preview": "/**\n\n @dev helpers\n--------------------------------------------------------\n base/_dev-helpers.scss\n------------------"
},
{
"path": "css/base/_fonts.scss",
"chars": 2039,
"preview": "/**\n\n @fonts\n--------------------------------------------------------\n base/_fonts.scss\n------------------------------"
},
{
"path": "css/base/_mixin-breakpoints.scss",
"chars": 1140,
"preview": "/**\n\n @breakpoints mixin\n-----------------------------------------------------\n base/_mixin-breakpoints.scss\n---------"
},
{
"path": "css/base/_mixin-clearfix.scss",
"chars": 509,
"preview": "/**\n\n @clearfix mixin\n---------------------------------------------------------\n base/_clearfix.scss\n-----------------"
},
{
"path": "css/base/_mixin-font-face-importer.scss",
"chars": 1104,
"preview": "/**\n\n @font-face importer mixin\n-----------------------------------------------------------\n _base/_mixin-font-face-im"
},
{
"path": "css/base/_mixin-gradual-media-queries.scss",
"chars": 1703,
"preview": "/**\n\n @gradual media queries mixin\n--------------------------------------------------------\n base/_mixin-gradual-media"
},
{
"path": "css/base/_print.scss",
"chars": 1424,
"preview": "/**\n\n @print\n--------------------------------------------------------\n base/_print.scss\n------------------------------"
},
{
"path": "css/base/_reset.scss",
"chars": 915,
"preview": "/**\n\n @reset\n---------------------------------------------------------\n base/_reset.scss\n-----------------------------"
},
{
"path": "css/base/_vars.scss",
"chars": 2626,
"preview": "/**\n\n @variables\n---------------------------------------------------------\n base/_vars.scss\n--------------------------"
},
{
"path": "css/elements/_body.scss",
"chars": 463,
"preview": "/**\n\n @body\n--------------------------------------------------------\n elements/_body.scss\n----------------------------"
},
{
"path": "css/elements/_buttons.scss",
"chars": 3690,
"preview": "/**\n\n @buttons\n--------------------------------------------------------\n elements/_buttons.scss\n----------------------"
},
{
"path": "css/elements/_code.scss",
"chars": 485,
"preview": "/**\n\n @code\n--------------------------------------------------------\n elements/_code.scss\n----------------------------"
},
{
"path": "css/elements/_forms.scss",
"chars": 16382,
"preview": "/**\n\n @forms\n---------------------------------------------------------\n elements/_forms.scss\n-------------------------"
},
{
"path": "css/elements/_headings.scss",
"chars": 954,
"preview": "/**\n\n @headings\n--------------------------------------------------------\n elements/_headings.scss\n--------------------"
},
{
"path": "css/elements/_hr.scss",
"chars": 681,
"preview": "/**\n\n @hr\n--------------------------------------------------------\n elements/_hr.scss\n-------------------------------"
},
{
"path": "css/elements/_html.scss",
"chars": 660,
"preview": "/**\n\n @html\n--------------------------------------------------------\n elements/_html.scss\n---------------------------"
},
{
"path": "css/elements/_icons.scss",
"chars": 940,
"preview": "/**\n\n @icons\n---------------------------------------------------------\n elements/_icons.scss\n-------------------------"
},
{
"path": "css/elements/_images.scss",
"chars": 6584,
"preview": "/**\n\n @images\n---------------------------------------------------------\n elements/_images.scss\n-----------------------"
},
{
"path": "css/elements/_links.scss",
"chars": 935,
"preview": "/**\n\n @links\n--------------------------------------------------------\n elements/_links.scss\n--------------------------"
},
{
"path": "css/elements/_lists.scss",
"chars": 968,
"preview": "/**\n\n @lists\n--------------------------------------------------------\n elements/_lists.scss\n--------------------------"
},
{
"path": "css/elements/_quotes.scss",
"chars": 1025,
"preview": "/**\n\n @quotes\n--------------------------------------------------------\n elements/_quotes.scss\n------------------------"
},
{
"path": "css/elements/_tables.scss",
"chars": 2179,
"preview": "/**\n\n @tables\n---------------------------------------------------------\n elements/_tables.scss\n-----------------------"
},
{
"path": "css/elements/_text.scss",
"chars": 1423,
"preview": "/**\n\n @text\n--------------------------------------------------------\n elements/_text.scss\n----------------------------"
},
{
"path": "css/layout/_container.scss",
"chars": 965,
"preview": "/**\n\n @container\n--------------------------------------------------------\n layout/_container.scss\n--------------------"
},
{
"path": "css/layout/_grids.scss",
"chars": 4062,
"preview": "/**\n\n @grids\n---------------------------------------------------------\n layout/_grids.scss\n---------------------------"
},
{
"path": "css/layout/_hide.scss",
"chars": 1012,
"preview": "/**\n\n @hide\n---------------------------------------------------------\n layout/_hide.scss\n-----------------------------"
},
{
"path": "css/layout/_media.scss",
"chars": 2336,
"preview": "/**\n\n @media\n--------------------------------------------------------\n layout/_media.scss\n----------------------------"
},
{
"path": "css/layout/_ups.scss",
"chars": 4886,
"preview": "/**\n\n @ups\n--------------------------------------------------------\n layout/_ups.scss\n--------------------------------"
},
{
"path": "css/layout/_widths.scss",
"chars": 6430,
"preview": "/**\n\n @widths\n---------------------------------------------------------\n layout/_widths.scss\n-------------------------"
},
{
"path": "css/modules/_alerts.scss",
"chars": 2438,
"preview": "/**\n\n @alerts\n---------------------------------------------------------\n modules/_alerts.scss\n------------------------"
},
{
"path": "css/modules/_blocks.scss",
"chars": 677,
"preview": "/**\n\n @blocks\n--------------------------------------------------------\n modules/_blocks.scss\n-------------------------"
},
{
"path": "css/modules/_callouts.scss",
"chars": 810,
"preview": "/**\n\n @callouts\n--------------------------------------------------------\n modules/_callouts.scss\n---------------------"
},
{
"path": "css/modules/_heroes.scss",
"chars": 1094,
"preview": "/**\n\n @heroes\n--------------------------------------------------------\n modules/_heroes.scss\n-------------------------"
},
{
"path": "css/modules/_modals.scss",
"chars": 1264,
"preview": "/**\n\n @modals\n---------------------------------------------------------\n modules/_modals.scss\n------------------------"
},
{
"path": "css/modules/_pages.scss",
"chars": 569,
"preview": "/**\n\n @pages\n--------------------------------------------------------\n modules/_pages.scss\n---------------------------"
},
{
"path": "css/modules/_site-footer.scss",
"chars": 398,
"preview": "/**\n\n @site-footer\n--------------------------------------------------------\n modules/_site-footer.scss\n---------------"
},
{
"path": "css/modules/_site-header.scss",
"chars": 1629,
"preview": "/**\n\n @site-header\n--------------------------------------------------------\n modules/_site-header.scss\n---------------"
},
{
"path": "css/modules/_site-main.scss",
"chars": 325,
"preview": "/**\n\n @site-main\n--------------------------------------------------------\n modules/_site-main.scss\n-------------------"
},
{
"path": "css/modules/_site.scss",
"chars": 460,
"preview": "/**\n\n @site\n--------------------------------------------------------\n modules/_site.scss\n----------------------------"
},
{
"path": "css/modules/_thumbnails.scss",
"chars": 1047,
"preview": "/**\n\n @thumbnails\n--------------------------------------------------------\n modules/_thumbnails.scss\n-----------------"
},
{
"path": "css/modules/_video-embeds.scss",
"chars": 491,
"preview": "/**\n\n @video\n--------------------------------------------------------\n modules/_video-embeds.scss\n--------------------"
},
{
"path": "css/screen.css",
"chars": 96942,
"preview": "/****\n\n MAIN STYLESHEET for [* Site Name Here *]\n\n---------------------------------------------------------\n\n BUILT WI"
},
{
"path": "css/screen.scss",
"chars": 3047,
"preview": "/****\n\n MAIN STYLESHEET for [* Site Name Here *]\n\n---------------------------------------------------------\n\n BUILT WI"
},
{
"path": "example-forms.html",
"chars": 5891,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"chrome=1\">\n <titl"
},
{
"path": "example-grids.html",
"chars": 15272,
"preview": "<!DOCTYPE html>\n<html class=\"dev--highlight-grids dev--highlight-elements dev--show-breakpoint\">\n\n<head>\n <meta charset"
},
{
"path": "example-modules.html",
"chars": 9819,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"chrome=1\">\n <titl"
},
{
"path": "index.html",
"chars": 7037,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"chrome=1\">\n <titl"
}
]
About this extraction
This page contains the full source code of the crushlovely/skyline GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 51 files (225.3 KB), approximately 61.7k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.