octocatstartv headernumbered-list123split-screen

CodePen's Design Patterns

This is actually a pattern right here. It's the .mega-header pattern. The header above is a design pattern too, which contains some others, like dropdown menus. Also, all the patterns below are in a .module.

Tabs

By default, tabs change the #hash in the URL. And also by default, if a URL loads with a #hash, we'll try to activate that tab. We can stop that behavior though, with just a little preventDefault action.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, eveniet architecto quo. Amet praesentium impedit iure rerum optio, necessitatibus esse neque, omnis repellat perspiciatis deserunt rem odit doloribus, soluta at!

Omnis perferendis libero, beatae est, distinctio sit dolorem porro officiis laboriosam nemo nam. Porro architecto, veniam facere id dolorem vitae quod dignissimos, illum inventore numquam quisquam amet quam quasi fuga.

Officia, aliquid nam. Nisi commodi repellat illum accusantium eum cupiditate laborum obcaecati unde, magni libero soluta non esse ratione minus iure temporibus in sint nulla quis rem, accusamus sunt iusto!

Colors

We don't really have a "brand" color, other than the general concept of light-on-dark.

Grays

$gray-very-light
$gray-light
$gray-medium
$gray-medium-dark
$gray-dark
$gray-very-dark

Content Colors

$pensColor
$postsColor
$collectionsColor

Utility Colors

$green
$yellow / $pro
$red / $warning
$lightBlue / $linkColor

Pen Block

Pen Blocks are in groups of 6 (default) or 12. 6 is good for performance and breaks into 3x2, 2x3, and 1x6 easily. 12 is two of those same grids. 12 is opt-in based on popular demand.

Just playing with Doyle Numerics && making spirals...

Just playing with Doyle Numerics && making spirals...

Just playing with Doyle Numerics && making spirals...

Just playing with Doyle Numerics && making spirals...

Just playing with Doyle Numerics && making spirals...

Just playing with Doyle Numerics && making spirals...

Collection Block

70 Pens

Grids

Of all kinds.

70 Pens

Grids

Of all kinds.

70 Pens

Grids

Of all kinds.

Blog Post Block

A list of links from my talk "10 Things You Can & Should Do With SVG"

These were in order when I put them here, but things may change over time.

Charts and Graphs

http://www.highcharts.com/

http://oak.is/thinking/animated-svgs/

https://www.smashingmagazine.com/2014/12/chartist-js-open-source-library-responsive-charts/

http://codepen.io/chrisgannon/pen/pbzEYr

http://codepen.io/darrylhuffman/pen/reYvjM

http://www.zingchart.com/gallery/chart/#!dynamic-area-min-max

http://www.amcharts.com/

Shape Morphing

https://css-tricks.com/svg-shape-morphing-works/

...

A list of links from my talk "10 Things You Can & Should Do With SVG"

These were in order when I put them here, but things may change over time.

Charts and Graphs

http://www.highcharts.com/

http://oak.is/thinking/animated-svgs/

https://www.smashingmagazine.com/2014/12/chartist-js-open-source-library-responsive-charts/

http://codepen.io/chrisgannon/pen/pbzEYr

http://codepen.io/darrylhuffman/pen/reYvjM

http://www.zingchart.com/gallery/chart/#!dynamic-area-min-max

http://www.amcharts.com/

Shape Morphing

https://css-tricks.com/svg-shape-morphing-works/

...

A list of links from my talk "10 Things You Can & Should Do With SVG"

These were in order when I put them here, but things may change over time.

Charts and Graphs

http://www.highcharts.com/

http://oak.is/thinking/animated-svgs/

https://www.smashingmagazine.com/2014/12/chartist-js-open-source-library-responsive-charts/

http://codepen.io/chrisgannon/pen/pbzEYr

http://codepen.io/darrylhuffman/pen/reYvjM

http://www.zingchart.com/gallery/chart/#!dynamic-area-min-max

http://www.amcharts.com/

Shape Morphing

https://css-tricks.com/svg-shape-morphing-works/

...

Grids

The normal grids are float based. Note that the padded grids are not even, the last item is bigger than it should be. We could fix that by moving to Susy or being smarter in general.

But more likely, we'll switch to using all flexbox for grids (we're using them quite a bit already) - which make even grids a lot easier.

.grid

.grid-1-2
.grid-1-2
.grid-1-3
.grid-1-3
.grid-1-3
.grid-1-4
.grid-1-4
.grid-1-4
.grid-1-4

.grid.padded

.grid-1-3
.grid-1-3
.grid-1-3.last (not even)

.flex-grid

whatever
whatever
whatever

.flex-grid[data-grid-type="fill"] (even)

whatever
whatever
whatever
whatever
whatever
.grid-1-2
.grid-1-2
.grid-1-3
.grid-1-3
.grid-1-3

.flex-grid-thirds (simple shortcut pattern)

whatever
whatever
whatever

Buttons

You think you just have a handful of button styles. Then you take inventory.

Gray for different backgrounds

.button-light .button-medium .button-dark

.button on different element types

a.button

Mini Buttons

.button.mini-button

Buttons with Icons

New Pen Settings

Variations

.bold .big .fullwidth

Pagination

Special Buttons

Badges

Little text add-on. One problem with this pattern is that sometimes they are clickable and sometimes they are not and that's kinda confusing.

PRO Hire Me New / Draft Follows You

Forms

Two types. These two forms are nearly the same markup. The top one is more for wider areas and the bottom for narrower areas. There are some helper classes and stuff (like .fullwidth) for more one-off situations.

.top-label-form

This is wrong or whatever.

Icons

Inline SVG powered.

Module Types

Regular module

These are used everywhere.

This is a blank slate

This is a friendly message that explains why and probably links to stuff. It's centered to more clearly take up the space that content will eventually occupy.

!

Mega Warning Module

This is a friendly message that explains in more detail and has actionable next steps and probably links.

Something Awesome

A little color and icon go a long way.

Messages

Narrow band to explain something.
This one is closeable.

Modals