• hsl(352, 92%, 38%)
    $c-red
  • hsl(195, 83%, 84%)
    $c-blue
  • hsl(33, 93%, 54%)
    $c-orange
  • hsla(33, 93%, 54%, .85)
    $c-orange-transparent
  • white
    $c-white
  • hsl(0, 0%, 95%)
    $c-gray--lightest
  • hsla(0, 0%, 95%, .1)
    $c-gray--lightest--transparent
  • hsl(0, 0%, 80%)
    $c-gray--lighter
  • hsla(0, 0%, 80%, .2)
    $c-gray--lighter--transparent
  • hsl(0, 0%, 60%)
    $c-gray--light
  • hsl(0, 0%, 48%)
    $c-gray
  • hsl(0, 0%, 40%)
    $c-gray--dark
  • hsl(0, 0%, 25%)
    $c-gray--darker
  • hsla(0, 0%, 20%, .75)
    $c-gray--darker--transparent
  • hsl(0, 0%, 16.1%)
    $c-gray--darkest
  • hsla(0, 0%, 16.1%, .85)
    $c-gray--darkest--transparent
  • black
    $c-black

To add to these items, use Sass variables that start with $c- in source/_patterns/00-base/01-colors/_color-vars.scss

Opacity (Hover to see effect)
Move (Hover to see effect)
Values:
  • $trans-opacity__time: 0.3s;
  • $trans-opacity__function: ease-in;
  • $trans-opacity: $trans-opacity__time $trans-opacity__function; convenience variable for using both
  • $trans-move__time: 0.3s;
  • $trans-move__function: ease-in;
  • $trans-move: $trans-opacity__time $trans-move__function; convenience variable for using both
  • $bp--xsmall:
    380px
  • $bp--small:
    500px
  • $bp--medium:
    640px
  • $bp--large:
    768px
  • $bp--xlarge:
    1024px
  • $bp--xxlarge:
    1250px
  • $bp--xxxlarge:
    1600px
  • iPhone Portrait: 320px
  • Galaxy Nexus Portrait: 360px
  • iPhone 6 Portrait: 375px
  • iPhone 6 Plus Portrait: 414px
  • Galaxy Note 3 Portrait: 540px
  • iPhone Landscape: 568px
  • Google Nexus 7 Portrait: 604px
  • Galaxy Nexus Landscape: 640px
  • iPhone 6 Landscape: 667px
  • iPhone 6 Plus Landscape: 738px
  • iPad Portrait: 768px
  • Galaxy Note 3 Landscape: 960px
  • Google Nexus 7 Landscape: 966px
  • iPad Landscape: 1024px
  • 11" MacBook Air: 1366px
  • 13" MacBook Air: 1440px
  • 21.5" iMac: 1980px

To add to these items, use Sass variables that start with $bp-- in source/_patterns/00-base/breakpoints/_breakpoints.scss

5px : $spacing--sm
20px : $spacing--l

To add to these items, use Sass variables that start with $spacing-- in source/_patterns/00-base/spacing/_spacing.scss

'Open Sans', sans-serif

.class {
  font-family: $ff--regular;
}
      
Normal
Eaque odio deleniti tempore.
Bold
Eaque odio deleniti tempore.
Italic
Eaque odio deleniti tempore.

'Libre Franklin', sans-serif

.class {
  font-family: $ff--alternate;
}
      
Normal
Eaque odio deleniti tempore.
Bold
Eaque odio deleniti tempore.
Italic
Eaque odio deleniti tempore.

'Bitter', serif

.class {
  font-family: $ff--header;
}
      
Normal
Eaque odio deleniti tempore.
Bold
Eaque odio deleniti tempore.
Italic
Eaque odio deleniti tempore.

    sapiente quis ad
    36px: $fs--36px

    sapiente quis ad
    30px: $fs--30px

    sapiente quis ad
    24px: $fs--24px

    sapiente quis ad
    18px: $fs--18px

    sapiente quis ad
    16px: $fs--16px

    sapiente quis ad
    14px: $fs--14px

    sapiente quis ad
    12px: $fs--12px

h1 sapiente quis ad

h2 sapiente quis ad

h3 sapiente quis ad

h4 sapiente quis ad

h5 sapiente quis ad
h6 sapiente quis ad
  • This is a list item in an Unordered List
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item
  1. This is a list item in an Ordered List
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item
Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.

Paragraph One Eaque odio deleniti tempore.


Paragraph Two after an hr Minus est ut assumenda et omnis. Omnis eaque doloremque dignissimos voluptas quia in.

Header 1

Paragraph following an h1 Quis itaque totam quia sunt omnis rem est. Assumenda est consequatur soluta. Nam et omnis expedita hic quia. Incidunt ut saepe ipsam maiores doloremque repellendus. Harum ipsam et repudiandae et non eligendi eaque asperiores. Autem sit ducimus sit consequatur velit. Quae sit optio et recusandae neque.

Header 2

Paragraph following an h2 Quis itaque totam quia sunt omnis rem est. Assumenda est consequatur soluta. Nam et omnis expedita hic quia. Incidunt ut saepe ipsam maiores doloremque repellendus. Harum ipsam et repudiandae et non eligendi eaque asperiores. Autem sit ducimus sit consequatur velit. Quae sit optio et recusandae neque.

Header 3

Paragraph following an h3 Quis itaque totam quia sunt omnis rem est. Assumenda est consequatur soluta. Nam et omnis expedita hic quia. Incidunt ut saepe ipsam maiores doloremque repellendus. Harum ipsam et repudiandae et non eligendi eaque asperiores. Autem sit ducimus sit consequatur velit. Quae sit optio et recusandae neque.

Header 4

Paragraph following an h4 Quis itaque totam quia sunt omnis rem est. Assumenda est consequatur soluta. Nam et omnis expedita hic quia. Incidunt ut saepe ipsam maiores doloremque repellendus. Harum ipsam et repudiandae et non eligendi eaque asperiores. Autem sit ducimus sit consequatur velit. Quae sit optio et recusandae neque.

Header 5

Paragraph following an h5 Quis itaque totam quia sunt omnis rem est. Assumenda est consequatur soluta. Nam et omnis expedita hic quia. Incidunt ut saepe ipsam maiores doloremque repellendus. Harum ipsam et repudiandae et non eligendi eaque asperiores. Autem sit ducimus sit consequatur velit. Quae sit optio et recusandae neque.

Header 6

Paragraph following an h6 Quis itaque totam quia sunt omnis rem est. Assumenda est consequatur soluta. Nam et omnis expedita hic quia. Incidunt ut saepe ipsam maiores doloremque repellendus. Harum ipsam et repudiandae et non eligendi eaque asperiores. Autem sit ducimus sit consequatur velit. Quae sit optio et recusandae neque.

This is a text link.

Italic text is used for stylistic purposes in i

This text has added emphasis in em

Bolded text is used for stylistic purposes in b

Strong is used to indicate strong importance in strong

This text is superscript

This text is subscript

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

icon--close
icon--menu
icon--search
















et qui

Minus est ut assumenda et omnis. Omnis eaque doloremque dignissimos voluptas quia in.

Minus est ut assumenda et omnis. Omnis eaque doloremque dignissimos voluptas quia in.

    
      drup(){cd /var/www/$1/sites/default/ (cdd && git pull && drush updatedb)}
    
  

This example shows how to automate your startup environment.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Lorem ipsum dolor sit ased do labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Lorem ipsum dolor sit ased do labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Lorem ipsum dolor sit ased do labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ased do labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ased do labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Block 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Blog Page

Actual content goes here. (See pages)

Site Footer

A long blog post about how the Cobbler's Children have no shoes...n@

Lorem ipsum dolor sit ased do labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ased do labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ased do labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Eaque odio deleniti tempore.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Eaque odio deleniti tempore.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Lorem ipsum dolor sit ased do labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

    
      
  drup()
  {
  cd /var/www/$1/sites/default/
  cowsay 'Changing directory to /var/www/'$1'/sites/default'
  cowsay 'Temporarily moving to root. Updating core.'
  (cdd && git pull && drush updatedb)
  cowsay 'Moving back to /var/www/'$1'/sites/default. Updating the '$1' repo.''
  git pull
  cowsay 'Clearing cache'
  drcc
  cowsay 'Here is the state of your Features:''
  drf
  cowsay -f eyes 'Your site is ready go to. Let's go make some internet.''
  }
    
  

Here is some code that does some awesome stuff

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Lorem ipsum dolor sit ased do labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Amet sit aut totam officiis. Similique adipisci est hic quae optio animi.

Site Footer