and
Example: Code in a paragraph
This is a cool paragraph about a classname called .franz
----------------------------------------------------- */
// 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
Option 1
Option 2
Option 3
Option 4
Selects can have added sizing classes, .select--s and .select--l
Example: Small select
Option 1
Option 2
Option 3
Option 4
Example: Large select
Option 1
Option 2
Option 3
Option 4
------------------------------------------------------ */
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
Example: Small Textarea
Example: Large 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
Don't label me, I'm a free spirit
------------------------------------------------------ */
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
-------------------------------------------------------- */
.form__header {
padding-bottom: 1em;
margin-bottom: 2em;
border-bottom: 1px solid #888;
}
/* @fieldsets
--------------------------------------------------------
Fieldsets group together related fields.
Example: Fieldset
Personal Information
Your Name
Your Email
Must be a valid email address
Fieldsets are also nested inside other fieldsets.
Example: Nested Fieldsets
Personal Information
Your Name
Your Email
Must be a valid email address
Address
Address 1
Must be a valid email address
Address 2
Must be a valid email address
-------------------------------------------------------- */
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
Your Name
Example: Field with hint
Your Email
Must be a valid email address
Example: Field with Error
Your Email
Sorry, that email is in use.
Example: Field for a select input
Select your favorite
Pizza
Tacos
Burgers
Example: Field for a textarea input
Your Name
-------------------------------------------------------- */
.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
Choose your favorite
Example: Field with input group of checkboxes
Select your favorites
Example: Field with input group list modifier
Select your favorites
------------------------------------------------------ */
.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
--------------------------------------------------------- */
.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
This is an h1 heading
This is an h2 heading
This is an h3 heading
This is an h4 heading
This is an h5 heading
This is an h6 heading
Additionally, we add classnames so you
can apply the styling of, for instance, an h1 to an h2.
Example: H1 styled like an H3
This is an h1 but looks like an h3
------------------------------------------------------ */
// 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:
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. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-------------------------------------------------------- */
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
+
Example: Close Icon
×
------------------------------------------------------ */
.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
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.
Example: Image, Natural Width
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.
Example: Image, Center
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.
------------------------------------------------------ */
.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
etc. & Webkit tap highlight
Example: link
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-------------------------------------------------------- */
/* @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
List item here
List item here
List item here
List item here
Nested Item
Nested Item
Nested Item
Nested Item
Example: Ordered List
List item here
List item here
List item here
List item here
Nested Item
Nested Item
Nested Item
Nested Item
-------------------------------------------------------- */
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:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
The source
-------------------------------------------------------- */
blockquote {
// Any custom styles below...
}
/* @pull-quote
--------------------------------------------------------
Large quotes pulled from body text.
Example:
This is an awesome pull quote!
-------------------------------------------------------- */
.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
Heading
Heading
Heading
Heading
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
------------------------------------------------------ */
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
Heading
Heading
Heading
Heading
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
------------------------------------------------------ */
// 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
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. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-------------------------------------------------------- */
p {
margin-bottom: 1em;
line-height: 1.25*$unit;
}
/* @inline
--------------------------------------------------------
Common inline elements
Example: inline elements
Lorem Ipsum is bold text of the strong printing and typesetting industry. Lorem Ipsum is italic simply dummy text emphasized of the printing and typesetting industry.
Your content goes here...
------------------------------------------------------ */
$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
...
...
...
...
...
...
...
...
...
...
...
...
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
...
...
...
...
...
...
...
...
...
...
...
...
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
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.
Example: Media object, right
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.
--------------------------------------------------------- */
// 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
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
----------------------------------------------------- */
// 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
×
Uh oh - something went wrong
Example: Warning
×
Shake it fast, but watch yourself.
Example: Success
×
The secret to my success is that I learn, 25 hours a day!
Example: Info
×
Did you ever know that you're my hero?
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
Feature
This callout is very impressive, and should command your attention
----------------------------------------------------- */
.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
This is the leadin
Name Here
------------------------------------------------------ */
.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
My Company
------------------------------------------------------ */
.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; //
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 . 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 caption title here
Some more text follows to tease the rest of
the content
----------------------------------------------------- */
.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
I will change color at MD breakpoint
-------------------------------------------------------- */
@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
Regular Button
Example: Buttons using buttons
Regular Button
------------------------------------------------------ */
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
Secondary button
------------------------------------------------------ */
.btn--secondary {
background: none;
border: 1px solid white;
color: white; }
/* @btn--large
--------------------------------------------------------
A btn modifier, large
Example: .btn--large
Large button
------------------------------------------------------ */
@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
Here's some text Cool button text keeps going
------------------------------------------------------ */
.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
Block button
------------------------------------------------------ */
.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
Block button
------------------------------------------------------ */
.btn--icon {
background: transparent;
border: none;
padding: 0;
font-size: 1em; }
/**
@code
--------------------------------------------------------
elements/_code.scss
--------------------------------------------------------
Code elements like and
Example: Code in a paragraph
This is a cool paragraph about a classname called .franz
----------------------------------------------------- */
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
Option 1
Option 2
Option 3
Option 4
Selects can have added sizing classes, .select--s and .select--l
Example: Small select
Option 1
Option 2
Option 3
Option 4
Example: Large select
Option 1
Option 2
Option 3
Option 4
------------------------------------------------------ */
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
Example: Small Textarea
Example: Large 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
Don't label me, I'm a free spirit
------------------------------------------------------ */
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
-------------------------------------------------------- */
.form__header {
padding-bottom: 1em;
margin-bottom: 2em;
border-bottom: 1px solid #888; }
/* @fieldsets
--------------------------------------------------------
Fieldsets group together related fields.
Example: Fieldset
Personal Information
Your Name
Your Email
Must be a valid email address
Fieldsets are also nested inside other fieldsets.
Example: Nested Fieldsets
Personal Information
Your Name
Your Email
Must be a valid email address
Address
Address 1
Must be a valid email address
Address 2
Must be a valid email address
-------------------------------------------------------- */
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
Your Name
Example: Field with hint
Your Email
Must be a valid email address
Example: Field with Error
Your Email
Sorry, that email is in use.
Example: Field for a select input
Select your favorite
Pizza
Tacos
Burgers
Example: Field for a textarea input
Your Name
-------------------------------------------------------- */
.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
Choose your favorite
Example: Field with input group of checkboxes
Select your favorites
Example: Field with input group list modifier
Select your favorites
------------------------------------------------------ */
.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
--------------------------------------------------------- */
.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
This is an h1 heading
This is an h2 heading
This is an h3 heading
This is an h4 heading
This is an h5 heading
This is an h6 heading
Additionally, we add classnames so you
can apply the styling of, for instance, an h1 to an h2.
Example: H1 styled like an H3
This is an h1 but looks like an h3
------------------------------------------------------ */
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:
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. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-------------------------------------------------------- */
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
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.
Example: Image, Natural Width
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.
Example: Image, Center
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.
------------------------------------------------------ */
.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
+
Example: Close Icon
×
------------------------------------------------------ */
.icon {
color: inherit;
display: inline-block;
font-style: normal;
vertical-align: middle;
font-size: 1em; }
/**
@links
--------------------------------------------------------
elements/_links.scss
--------------------------------------------------------
Links, etc. & Webkit tap highlight
Example: link
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-------------------------------------------------------- */
/* @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
List item here
List item here
List item here
List item here
Nested Item
Nested Item
Nested Item
Nested Item
Example: Ordered List
List item here
List item here
List item here
List item here
Nested Item
Nested Item
Nested Item
Nested Item
-------------------------------------------------------- */
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:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
The source
-------------------------------------------------------- */
/* @pull-quote
--------------------------------------------------------
Large quotes pulled from body text.
Example:
This is an awesome pull quote!
-------------------------------------------------------- */
/**
@text
--------------------------------------------------------
elements/_text.scss
--------------------------------------------------------
Some basic styles to paragraphs and
inline styles
----------------------------------------------------- */
/* @paragraphs
--------------------------------------------------------
Example: Paragraphs
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. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-------------------------------------------------------- */
p {
margin-bottom: 1em;
line-height: 1.40625em; }
/* @inline
--------------------------------------------------------
Common inline elements
Example: inline elements
Lorem Ipsum is bold text of the strong printing and typesetting industry. Lorem Ipsum is italic simply dummy text emphasized of the printing and typesetting industry.
Your content goes here...
------------------------------------------------------ */
.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
...
...
...
...
...
...
...
...
...
...
...
...
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
...
...
...
...
...
...
...
...
...
...
...
...
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
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.
Example: Media object, right
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.
--------------------------------------------------------- */
.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
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
----------------------------------------------------- */
/*
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 . 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
My Company
------------------------------------------------------ */
.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
×
Uh oh - something went wrong
Example: Warning
×
Shake it fast, but watch yourself.
Example: Success
×
The secret to my success is that I learn, 25 hours a day!
Example: Info
×
Did you ever know that you're my hero?
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
Feature
This callout is very impressive, and should command your attention
----------------------------------------------------- */
.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
This is the leadin
Name Here
------------------------------------------------------ */
.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 caption title here
Some more text follows to tease the rest of
the content
----------------------------------------------------- */
.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
================================================
***YOUR-TITLE-HERE***
Example Form
Here's an example form to give you a head start.
You'll find more examples in the comments of the modules/_forms.scss partial.
================================================
FILE: example-grids.html
================================================
***YOUR-TITLE-HERE***
Skyline uses a simple, but powerful responsive grid system.
Grid layout is achieved by using a wrapping div called a 'grid-wrapper', and shortened to the classname .gw.
Within the grid-wrapper, grid units are added, and shortened to the classname .g.
These grid units then have responsive classnames added to them, which specify their widths at different viewports.
Responsive width classes start with a two-letter prefix (xs, sm, md, lg, xl) and follow with the width, written in easy-to-read fractions (one-half, two-thirds, seven-elevenths, etc.).
NOTE: The HTML element on this page has the classes .dev--highlight-elements .dev--highlight-grids .dev--show-breakpoint from base/_dev-helpers.scss. These enable some helper classes that highlight elements at breakpoints
A basic grid example
Each grid unit below has the following classes: sm-one-half md-one-third lg-one-sixth xl-one-twelfth. These classes determine the grid unit's width at these viewports:
Default : grid units are 100%At SM : one-halfAt MD : one-thirdAt LG : one-sixthAt XL : one-twelfth
An example of a grid units with unique sizes
The grid units below use different combinations of responsive width classes for a more complex grid.
An example of a ludicrous grid
Just to illustrate the flexibility of this grid system, here's an example of a ludicrously complex grid.
Grid example using ups
For a grid wrap containing equally-sized grid units, like a gallery of thumbnails for instance, use the responsive ups classes from layout/_ups.scss. With these classes applied to the .grid wrapper, you won't need to specify widths on each individual grid unit.
Default : 100%At XS : two-upAt SM : three-upAt MD : four-upAt LG : six-upAt XL : twelve-up
A nested grid example
Grids can be nested within grids
A double-nested grid example
It's unusual, but sure - you can nest a nested grid.
================================================
FILE: example-modules.html
================================================
***YOUR-TITLE-HERE***
Alerts
Alerts are UI elements that give important info.
×
ERROR: Uh oh - something went wrong
×
WARNING: Shake it fast, but watch yourself.
×
SUCCESS: The secret to my success is that I learn, 25 hours a day!
×
INFO: All the planets can fit in the space between the earth and moon.
Callouts
Callouts are those 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.
We're putting these into a small 2 up, medium 4 up grid
Feature
This callout is very impressive, and should command your attention
Feature
This callout is very impressive, and should command your attention
Feature
This callout is very impressive, and should command your attention
Feature
This callout is very impressive, and should command your attention
Thumbnails
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.
We're putting these into a small 2 up, medium 4 up grid
Modals
Click the button below to see our basic starter modal.
Show Modal
Modal content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam sint illo asperiores deleniti doloribus, voluptatibus distinctio dolorem ipsam non soluta officia architecto totam sit adipisci explicabo minima ad aliquam. Doloribus?
×
================================================
FILE: index.html
================================================
***YOUR-TITLE-HERE***
I am a hero
With a main element with text, and a background image.
Call To Action
Feature
This callout is very impressive, and should command your attention
Feature
This callout is very impressive, and should command your attention
Feature
This callout is very impressive, and should command your attention
Feature
This callout is very impressive, and should command your attention
Here's a simple block section with some text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ipsam, minima, rerum asperiores eos amet beatae rem autem dignissimos excepturi molestias dolores delectus itaque aperiam corporis quibusdam deleniti cumque maxime.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ipsam, minima, rerum asperiores eos amet beatae rem autem dignissimos excepturi molestias dolores delectus itaque aperiam corporis quibusdam deleniti cumque maxime.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ipsam, minima, rerum asperiores eos amet beatae rem autem dignissimos excepturi molestias dolores delectus itaque aperiam corporis quibusdam deleniti cumque maxime.
This is a grid example. This div has responsive width classes.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ipsam, minima, rerum asperiores eos amet beatae rem autem dignissimos excepturi molestias dolores delectus itaque aperiam corporis quibusdam deleniti cumque maxime.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ipsam, minima, rerum asperiores eos amet beatae rem autem dignissimos excepturi molestias dolores delectus itaque aperiam corporis quibusdam deleniti cumque maxime.
This is a grid example. This div also has responsive width classes.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ipsam, minima, rerum asperiores eos amet beatae rem autem dignissimos excepturi molestias dolores delectus itaque aperiam corporis quibusdam deleniti cumque maxime.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ipsam, minima, rerum asperiores eos amet beatae rem autem dignissimos excepturi molestias dolores delectus itaque aperiam corporis quibusdam deleniti cumque maxime.
Skyline is intended for IE9+ with optional legacy support in the works