Colors

  • red
    color(red)
  • orange
    color(orange)
  • yellow
    color(yellow)
  • green
    color(green)
  • blue
    color(blue)
  • indigo
    color(indigo)
  • violet
    color(violet)
  • gray
    color(gray)
  • lightgray
    color(gray, light)
  • darkgray
    color(gray, dark)
  • white
    color(white)
  • black
    color(black)
  • hsl(0, 0%, 8%)
    color(black, light)

Fonts

  • Sass Variable: $font--gotham : font(gotham)

Primary font: "Gotham", sans-serif;

Primary font italic: "Gotham", sans-serif;

Primary font bold: "Gotham", sans-serif;

Font Sizes

  1. Blog meme masthead DocumentCloud Fou
  2. Cauliflower cheese cream cheese baby
  3. Hong Kong Phooey, number one super g
  4. Bacon ipsum dolor sit amet spare rib
  5. All right. Well, take care of yourself, Han
  6. Veggies sunt bona vobis, proinde vos
  7. Lorizzle pimpin' dolizzle sit amet I
  8. Now that we know who you are, I know
  9. Webtwo ipsum dolor sit amet, eskobo
  10. Nesciunt sunt cillum keytar Pitchfork
  11. Carrot cake fruitcake dessert apple
  12. The swallow may fly south with the sun
  1. Blog meme masthead DocumentCloud Fou
  2. Cauliflower cheese cream cheese baby
  3. Hong Kong Phooey, number one super g
  4. Bacon ipsum dolor sit amet spare rib
  5. All right. Well, take care of yourself, Han
  6. Veggies sunt bona vobis, proinde vos
  7. Lorizzle pimpin' dolizzle sit amet I
  8. Now that we know who you are, I know
  9. Webtwo ipsum dolor sit amet, eskobo
  10. Nesciunt sunt cillum keytar Pitchfork
  11. Carrot cake fruitcake dessert apple
  12. The swallow may fly south with the sun
  1. Blog meme masthead DocumentCloud Fou
  2. Cauliflower cheese cream cheese baby
  3. Hong Kong Phooey, number one super g
  4. Bacon ipsum dolor sit amet spare rib
  5. All right. Well, take care of yourself, Han
  6. Veggies sunt bona vobis, proinde vos
  7. Lorizzle pimpin' dolizzle sit amet I
  8. Now that we know who you are, I know
  9. Webtwo ipsum dolor sit amet, eskobo
  10. Nesciunt sunt cillum keytar Pitchfork
  11. Carrot cake fruitcake dessert apple
  12. The swallow may fly south with the sun

Headings

Lorem ipsum dolor sit amet consectetur H1

Lorem ipsum dolor sit amet consectetur H2

Lorem ipsum dolor sit amet consectetur H3

Lorem ipsum dolor sit amet consectetur H4

Lorem ipsum dolor sit amet consectetur H5
Lorem ipsum dolor sit amet consectetur H6

Paragraph

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

Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Blockquote

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.

Inline Elements

This is a text link

Thjs js a teyt ljgk

Strong is used to indicate strong importance

This text has added emphasis

Hr


Headings And Paragraphs

Lorem ipsum dolor sit amet consectetur H1

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

Lorem ipsum dolor sit amet consectetur H2

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

Lorem ipsum dolor sit amet consectetur H3

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

Lorem ipsum dolor sit amet consectetur H4

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

Lorem ipsum dolor sit amet consectetur H5

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

Lorem ipsum dolor sit amet consectetur H6

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

Unordered

  • 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

Ordered

  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

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.

Icon Mail

Icon Instagram

Icon Linkedin

Icon Twitter

Icon Menu

Favicon

Icons

Icons available

icon--instagram
icon--linkedin
icon--mail
icon--menu
icon--twitter

How to use icons

In HTML

Add the class: `icon--name-of-icon` like this: `icon--arrow-down`. So

<i class="icon--search">Search</i>
becomes Search

In Sass, as a psuedo selector

Use the mixin `icon` with the argument of the icon name like this: `@include icon(facebook);`. So

HTML

<div class="demo-random-icon">Random icon here</div>

CSS

.demo-random-icon {
    @include icon(facebook);
}

becomes

Random icon here.

In Sass, as a text-replacement

This may be more familiar for those coming from image sprites. Use the mixin `icon` with the argument of the icon name plus "$text-replace: true" as an argument: `@include icon(twitter, $text-replace: true);`. So

HTML

<div class="demo-text-replace-icon">This text will be gone</div>

CSS

.demo-text-replace-icon {
  @include icon('twitter', $text-replace: true);
  height: 16px;
  width: 16px;
}
becomes
This text will be gone

You're responsible for height, width, positioning, etc.

Adding and generating icons

SVG files added to `source/images/icons/src/` while running `grunt` are automatically added to the font face. To manually compile icon fonts, run `grunt icons-build`.

Files of note

  1. images/icons/icon-font-template.ai: 512px x 512px Adobe Illustrator template that each font should fit within. Export as SVG from this template at full 512px size.
  2. scss/00-config/_icons.scss: Defines variables used for icons
  3. scss/10-base/_icons-base.scss: Defines mixins used
  4. scss/30-global/_icons-application: Generates the starting CSS styles for default .icon--something elements

Btn

Button

Select Menu

Curabitur quis nunc nibh.

Textarea

Sed nec lacus sed nibh iaculis luctus.

Textfield

Aenean quis leo sit amet tellus tempus cursus.

Checkbox

Nullam hendrerit, justo et iaculis tristique, ligula risus pretium erat, sed tempus lacus felis ut nulla.

Checkboxes

Phasellus blandit ullamcorper diam vel porta.

Radio Buttons

Duis orci nunc, lacinia in malesuada et, euismod id turpis.

Submit

File Upload

In faucibus feugiat urna sit amet elementum.

Managed File

Phasellus sagittis, orci vel laoreet molestie, urna orci imperdiet elit, quis ultricies orci mauris vel ante.

Fieldset

Fieldset
Etiam vel dui posuere lectus auctor viverra vitae id eros.
Morbi eget odio elit, et cursus odio.
Ut dignissim convallis eros, viverra luctus lacus consequat ac.

Star Rating

Rate

Table

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

Ligatures

fluff traffic finishes flowers truffles establish

Normal

CharacterLigatureNumeric reference
ff&#64256;
fi&#64257;
fl&#64258;
ffi&#64259
ffl&#64260;
long s t&#64261;
st&#64262;

Italic

CharacterLigatureNumeric reference
ff&#64256;
fi&#64257;
fl&#64258;
ffi&#64259
ffl&#64260;
long s t&#64261;
st&#64262;

Other Characters

CharacterLigatureNumeric reference
Small sharp s, German (sz ligature)ß&#223;
Capital thorn, IcelandicÞ&#222;
Small thorn, Icelandicþ&#254;
Latin capital letter AEÆ&#198;
Latin small letter aeæ&#230;
Capital IJ ligatureIJ&#306;
Lowercase ij ligatureij&#307;
Latin capital ligature OEŒ&#338;
Latin small ligature (misnomer) oeœ&#339;
Capital NJ ligatureNJ&#458;
Leading capital Nj ligatureNj&#459;
Lowercase nj ligaturenj&#460;
Capital DZ ligatureDZ&#497;
Leading capital Dz ligatureDz&#498;
Lowercase dz ligaturedz&#499;

Byline

Address

Company Name
1234 Main St.
Anywhere, 101010, CA
U.S.A
+1.888.123.4567

Heading Group

This is the heading group's main heading

This is the heading group's subheading

Blockquote With Citation

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.

Quote Source

Intro Text

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

Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

SassConf Speakers Panel. l-r: Una Kravets, tktktk, Elise tktktk, Mason Wendell, Jina Bolton, Natalie, tktktk

Talk Title

Lorem ipsum dolor sit amet consectetur

Talk Description

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

Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

One Up

1/1

Two Up

1/2
1/2

Three Up

1/3
1/3
1/3

Four Up

1/4
1/4
1/4
1/4

Breakpoints

  • $width-xsmall:
    400px
  • $width-small:
    480px
  • $width-medium:
    640px
  • $width-large:
    768px
  • $width-xlarge:
    1024px
  • $width-xxlarge:
    1280px
  • $width-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

Post Teaser

Block Headline Byline

Tweet Rwd Hard

Block Hero

Block Thumb Headline

Block Headline

Block Inset

Intro Image

16x9 Image
16x9 Image

Talk Events

Events

  • Lorum Ipsum [KEYNOTE] - Lorem ipsum, consectetur
  • Lorum Ipsum - Lorem ipsum, consectetur
  • Lorum Ipsum - Lorem ipsum, consectetur

Talk Sample Slide

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Talk Sample Slide Slideshare

Talk Video

Talk Video Vimeo

Talk Slides

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Talk Reactions

Lorum ipsum dolor site amet

some_dude via Some Site

Portfolio Overview Item

Portfolio Navigation Item

  • Lorum Ipsum
    Lorum Ipsum
  • Figure With Caption

    4x3 Image
    This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.

    Search

    Search

    Comment Form

    Primary Nav

    Footer Nav

    Tool Nav

    Breadcrumbs

    Footer Nav

    Pagination

    1. 1
    2. 2
    3. 3
    4. 4
    5. 5
    6. 6
    7. 7

    Tabs

    Social Share

    Accordion

    Single Comment

  • So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

  • Alert

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

    Site Name

    The Coding Designer

    Site Subtitle

    Mason Wendell

    Lock Up

    The Coding Designer

    Mason Wendell

    Monogram

    M
    W

    Button Logo Name Title

    Button Logo Name Title Rectangle

    Button Logo Name

    Button Logo Title

    Favicon

    M
    W
    M
    W
    M
    W
    M
    W

    Header

    Footer

    Article Body

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis.

    Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.

    16x9 Image

    Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.

    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.

    Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.

    • 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

    Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?

    Comment Thread

    59 Comments

    • Like button audience atomization overcome Colbert bump Free Darko inverted pyramid we will make them pay, digital circulation strategy Like button totally blowing up on Twitter church of the savvy. Pictures of Goats section open source discuss Frontline analog thinking filters paidContent.

    • Queso caerphilly cheesecake. Parmesan chalk and cheese port-salut port-salut babybel cottage cheese cheesy grin pepper jack. Croque monsieur paneer st. agur blue cheese emmental airedale monterey jack bavarian bergkase cheese triangles. Halloumi parmesan.

    • Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.

    • Boudin sausage jerky pastrami ground round salami biltong. Sausage fatback strip steak doner pork loin, pork belly drumstick ham short loin hamburger shankle. Short ribs sirloin rump tri-tip beef biltong. Meatball pig salami, jowl pork loin fatback short loin drumstick andouille.

    • I find your lack of faith disturbing. A tremor in the Force. The last time I felt it was in the presence of my old master. Don't act so surprised, Your Highness. You weren't on any mercy mission this time. Several transmissions were beamed to this ship by Rebel spies. I want to know what happened to the plans they sent you. The plans you refer to will soon be back in our hands.

    1. 1
    2. 2
    3. 3
    4. 4
    5. 5
    6. 6
    7. 7

    Latest Posts

    Latest Posts Manual

    Recent Tweets

    Related Posts

    Clipped Images

    Cage!

    Murray!

    Whoa.

    I Want Moire!

    Shake it off!

    Clipped Portfolio Landing

    Cage!

    Murray!

    Whoa.

    I Want Moire!

    Shake it off!

    Intro

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

    Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    16x9 Image
    16x9 Image

    Talk

    Lorem ipsum dolor sit amet consectetur

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

    Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Events

    • Lorum Ipsum [KEYNOTE] - Lorem ipsum, consectetur
    • Lorum Ipsum - Lorem ipsum, consectetur
    • Lorum Ipsum - Lorem ipsum, consectetur
    Lorem ipsum dolor sit amet consectetur
    Lorem ipsum dolor sit amet consectetur

    Lorum ipsum dolor site amet

    some_dude via Some Site

    Portfolio Overview

    Portfolio Navigation

    Portfolio Navigation Manual

    Portfolio Item

    Score.org

    Engage and create relationships with entrpreneurs.

    What I did

    Client:

    SCORE

    Responsibilities:

    • Art Direction
    • Lead Designer
    • Presentations
    • Kick-off lead
    • Front End Development
    • Prototyping

    Agency:

    Phase2
    Screenshots of Score.org Screenshots of Score.org Screenshots of Score.org Screenshots of Score.org Screenshots of Score.org Screenshots of Score.org Screenshots of Score.org Screenshots of Score.org Screenshots of Score.org Screenshots of Score.org Screenshots of Score.org Screenshots of Score.org Screenshots of Score.org Screenshots of Score.org Screenshots of Score.org

    Teaser

    Title

    Square Thumbnail

    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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Plan Details

    Humanitarian Programme Cycle

    Response Planning Module

    Pilot
    English
    Logged in as username

    Plan Details

    Name and Date
    Location(s)
    + Add Additional Country - Remove Country

    About

    About Mason Wendell

    Mason Wendell podium

    Mason Wendell is a Responsive Web Design, UX and Visual Design, Sass and CSS expert. He's passionate about getting to the core of what a client needs and turning that into the right design solution. He's a pioneer of the technique of using code to create designs directly in the browser. This gives him a unique perspective to find innovative ways to solve design challenges for his clients. 

    He's a leader and innovator in using Sass to write styles. He created the popular Breakpoint tool for responsive web design. He's the co-creator of Sassy Modular Scale which helps to create beautiful typography.

    He's an active public speaker, and speaks regularly at large and small events about web design, both from a creative and technical point of view.  

    Experiment

    Fading in Sequentially

    For a project I needed to call attention to an arbitrary number of “cards” while showing that each was an individual item. This led me to the idea that I could animate them in rapid sequence.

    See the Pen Cards Fade in by Mason Wendell (@codingdesigner) on CodePen.

    Speaking

    Speaking

    I’ve been speaking at meetups, bar camps, and regional and national conferences for the last six years.

    I often speak about Designing in the Browser, Drupal, Sass and Compass, and Responsive Web Design. I produced a video podcast that teaches people about how they can use these tools and techniques creatively. I also blog at The Coding Designer and The Sass Way.

    Videos on Vimeo

    https://vimeo.com/codingdesigner/videos

    Thinking Inside The Box Inside The Box Inside The Box

    • Devsigner Con 2015 [KEYNOTE] - Portland, OR - (link)[http://www.devsignercon.com/conference/keynote]
    • Capital Camp
    • Design 4 Drupal
    • Sass Summit
    • SassConf 2014
    • DrupalCon 2014, Austin, TX
    • slides some reactions:
    • https://twitter.com/bkrall/status/474308270555791360
    • https://twitter.com/michaelgiaimo/status/474301519475388416
    • https://twitter.com/TXChetG/status/474298313739862016

    Managing Responsive Web Design With Sass And Breakpoint

    Designing with a Living Style Guide

    Responsive Web Design

    Mobile and Responsive Design with Sass

    Intro to Sass

    The Coding Designer’s Survival Kit (Sass)

    Design in the Browser

    Video

    Intro to Breakpoint

    Post

    Balancing Ideal Sass and Ideal CSS

    Sass makes CSS fun again, right? Well yeah, but that also makes it easy to forget that we’re still writing CSS. We can get caught up in all the new tools and tricks that Sass lets us do so easily that we lose sight of some CSS that might not be as awesome as we think it is. Last night at the Philadelphia Sass Meetup I set out to talk about the finer points of using mixins and extendable selectors, and ended up exploring how we can find the balance between a great Sass codebase and close-to-ideal compiled CSS.

    Balancing Ideal Sass and Ideal CSS - Buttons

    1. Let’s just style a button. - Sassmeister Example
    2. Create a mixin. DRY Sass, but bloated CSS - Sassmeister Example
    3. Convert to an extended class. DRY Sass and small CSS - Sassmeister Example
    4. Convert that extended class to a silent extendable. Even better! - Sassmeister Example
    5. Maybe we need an alternate version of the button? Let’s try some manual overrides. Good CSS, but we could have DRYer Sass - Sassmeister Example
    6. We’ll try creating a new silent extendable that calls our mixin with a new argument. Better Sass but now our CSS is starting to bloat. - Sassmeister Example
    7. So now we’ll split our mixin into a ‘base’ mixin for the styles that are common to all buttons, and a ‘colors’ mixin to handle our alternate colors. We’ll create a %button extendable by calling both mixins, and a %button-cta extendable that extends %button and calls the button-colors mixin for its overrides. Clean Sass and clean CSS! Sassmeister Example
    8. What about RWD? Well it gets trickier. Extendables need to be scoped to their media query, so we need to redefine our extendables within a media query. The CSS is pretty clean but now the Sass is becoming a little hard to work with. - Sassmeister Example
    9. Instead of worrying about scoping those media queries we’ll call the mixins within the selector nest. This creates more css than we need, but the Sass is much easier to work with. - Sassmeister Example

    Don’t extend native elements

    1. Extending a native element once seems ok. - Sassmeister Example
    2. But if we keep going we see a lot of (probably) unintended comma-separated selectors start to pile up. In a real project this gets pretty obsene. - Sassmeister Example
    3. So instead let’s define some silent extendables and then use them to define our native element styles as well as any extensions to them. Managable Sass and clean CSS! - Sassmeister Example
    Posted on Thursday, August 1st, 2013

    Post Breakpoint 1

    Breakpoint 1.0

    Breakpoint Title Card

    Don’t feel like reading? Go get it now


    About a month ago I was working on a responsive site, and trying to do it right. So instead of setting break points to match device dimensions (for phone, tablet, and desktop) I would set break points when my content and design needed them. Taking this kind of control over your responsive design means two things:

    1. You probably have a LOT more media queries
    2. And you lose track of why you used each one.

    I needed a system to manage media queries.

    As anyone who knows me knows, I’m a huge Sass nerd. Like, huge. So of course I was already trying to manage my breakpoints with my own system of variables and a super-cool mixin. Well that mixin was quickly growing unweildly, so I knew it was time to make something better.

    I started with a few assumptions

    1. Most queries test the min-width feature.
    2. Variables are a good way to manage queries in a growing project.
    3. It’s nice to have a short easy syntax, that would still allow for complex queries when needed.

    So I started with the syntax and worked it out from there. Since I wanted something simple I settled on using a mixin called “breakpoint”. That’s easy to remember. And since I’m making some assumptions on common use cases I decided to pass that mixin an argument that could contain just a simple numerical value. So, the simplest and most common use of breakpoint goes like this:

    Simple use

    1
    2
    3
    4
    $breakpoint-medium-width: 500px;
    .foo {
      @include breakpoint($breakpoint-medium-width) {...}
    }

    Which compiles to:

    1
    @media (min-width: 500px) {.foo {...}}

    min/max use

    I expanded the syntax to accept numerical pairs, signifying a min/max relationship. The default feature is min/max-width.

    1
    2
    3
    4
    $breakpoint-medium-not-wide: 500px 700px;
    .baz {
      @include breakpoint($breakpoint-medium-not-wide) {...}
    }

    Which compiles to:

    1
    @media (min-width: 500px) and (max-width: 700px) {.baz {...}}

    Feature / value pairs

    I can’t limit this to just one kind of feature test, so if you pass in a feature name and a value it knows what to do.

    1
    2
    3
    4
    $breakpoint-not-too-wide: max-width 700px;
    .wtf {
      @include breakpoint($breakpoint-not-too-wide) {...}
    }

    Which compiles to:

    1
    @media (max-width: 700px) {.wtf {...}}

    Stack ‘em up

    Since I want to be able to create as complex a query as needed you can stack these up in a comma-separated list. You can even use one-sided tests like monochrome

    1
    2
    3
    4
    $breakpoint-wide-portrait-mono: max-width 700px, orientation portrait, monochrome;
    .zztop {
      @include breakpoint($breakpoint-wide-portrait-mono) {...}
    }

    Which compiles to:

    1
    @media (max-width: 700px) and (orientation: portrait) and (monochrome) {.zztop {...}}

    I use this a lot. All over the place. Giving my breakpoint variable names that make sense keeps me organized, and the syntax makes me faster. Yay!

    Collaborate, refine, add features

    I told my friends about this, and one in particular practically pounced on it. My good buddy @snugug had been working on another solution to managing media queries and decided that Breakpoint would be a good engine for his syntax as well as the default one. And once he gets his claws in something he doesn’t let go. And that’s awesome, because now I can very happily say that Breakpoint is ready for prime time.

    You want configuration options? You got ‘em.

    You want to use ems instead of pixels? (You should.) Now Breakpoint can do the calculation for you.

    You want to use device-pixel-ratio? (You shouldn’t.) Breakpoint will convert those to resolution for you.

    Sam added these features as well as a ton of refinements to the code base. Everyone, thank Sam, OK? He’s pretty rad.

    Add a break point at the point where it breaks.

    Go get it now!

    Posted on Wednesday, June 27th, 2012

    Post Fixing H Fj

    Fixing H&FJ Font Previews

    HFJ Font Previews

    I'm considering Hoefler & Frere-Jones webfonts for a new project. The service looks great but I haven't signed up yet. This may be different once I've paid for something, but for now their web preview kind of sucks. (sorry H&FJ) I want to test my own text before making such a big commitment but they only show their own promo text. To fix that I created a little bookmarklet that adds the 'contenteditable' attribute to all the preview spans. Now you can click any of those lines and type whatever you like. It's been helpful to me. Enjoy.

    Drag this to your bookmarks: H&FJ Webfont Preview Use on pages like this: H&FJ Knockout

    Update

    Posted on Wednesday, July 10th, 2013

    Post Responsive Drupal

    Responsive Web Design and Drupal

    We love Responsive Web Design, and we love Drupal. But do they love each other? After working on a number of RWD and Drupal projects this year, I’m happy to report that they get along just fine. Though “Love” might be stretching it a bit.

    Can Drupal and RWD be Pals?

    Drupal is a great platform for managing content and for building everything from simple blogs to very complex applications. By connecting Drupal’s building blocks, you can build just about any functionality you need. That’s amazing, especially if you’ve ever struggled to build any aspect of that on your own. My Drupal a-ha moment came when I realized that I’d never need to write a user log-in on my own again. Smarter people than me were on the case.

    But that speaks to two key aspects of Drupal that aren’t directly related to RWD. Drupal is primarily a back-end tool that excels when the building blocks are abstracted to be applicable to as many use cases as possible. Defining views and content types rightly doesn’t prescribe any layout or visual design, leaving those tasks to your creativity in the theming layer.

    The best Drupal themes are also the ones that are the most general, allowing you to add all the custom details yourself. Good design is in the details, and the details are always custom. A good starter theme gives you the tools you need to have total control over those details and then gets out of your way. Themes that provide a full visual design must have their place, but I’ve never had a client that wanted to look like everyone else who installed the same theme. When a starter theme gets out of your way, you get something pretty fantastic: a back end system that provides the data and markup you need and a blank canvas where you can write whatever CSS and JavaScript you want to make something unique and delightful.

    Responsive Web Design, just like any other flavor of design, is all about custom solutions. The difference is that we have the opportunity to change and refine the design around different browser characteristics, like the browser width. It’s natural that a designer would want a system to help with all this added complexity, but in most aspects, Drupal doesn’t provide such a system. But then again, it doesn’t provide a system for logo design either. It’s just not the right tool for that particular task.

    Personally, I prefer Drupal as a blank canvas. With tools like Sass and the whole wide world of css techniques, I think we have some pretty great options already.

    Posted on Tuesday, February 12th, 2013

    Relationship