-
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
$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
$spacing--sm
$spacing--l
To add to these items, use Sass variables that start with $spacing--
in source/_patterns/00-base/spacing/_spacing.scss
.class {
font-family: $ff--regular;
}
Normal
Bold
Italic
.class {
font-family: $ff--alternate;
}
Normal
Bold
Italic
.class {
font-family: $ff--header;
}
Normal
Bold
Italic
$fs--36px
$fs--30px
$fs--24px
$fs--18px
$fs--16px
$fs--14px
$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
- This is a list item in an Ordered List
- An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
-
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an ordered list
- 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.
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.
et qui
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.
Site Header
Site Header
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.