- Block level elements can become select-like items of larger screens
- Anchors / accordions become tabs
- Simple layouts becomes centered, with side padding to keep a good measure
- Block level display becomes inline-blocks, at break points
- Simple step navigation (Next > Edit Campaign) becomes breadcrumbs (Name > Edit > Publish)
- One columns becomes two, by row, to keep context
- Use arrow instead of burgerto indicate directions / movement
- Off-canvas stacked layers. Must have multiple navitation controls: <- arrow for back, Save and Cancel buttons.
- Off-canvas menus come on screen when there's enough room for them.
- Smart defauts -> Short list of popular / recent -> detailed selection if needed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[role="banner"] { | |
text-align: center; | |
.respond-min(50em, { | |
text-align: left; | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// https://github.com/jakearchibald/sass-ie/ | |
$fix-mqs: false !default; | |
@mixin respond-min($width) { | |
@if $fix-mqs { | |
@if $fix-mqs >= $width { | |
@content; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<body> | |
<h1>Heading 1</h1> | |
<h2>Heading 2</h2> | |
<h3>Heading 3</h3> | |
<h4>Heading 4</h4> | |
<h5>Heading 5</h4> | |
<h6>Heading 6</h6> | |
<ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
List of things we need to take into account: | |
1. normalize.css | |
2. Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ | |
3. IE Stylesheet Mixin for SASS: http://jakearchibald.github.io/sass-ie/ | |
List of things we can use to make life better: | |
1. Sass http://sass-lang.com/ (preferred) or Less http://lesscss.org/ | |
2. https://github.com/at-import/modular-scale | |
3. Powerful SASS Grid: http://susy.oddbird.net/ | |
4. CSS philosophy http://www.smacss.com/ |
- Blurb
- Website: http://
- Twitter account: @
- GitHub account: https://github.com/
- Photo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a href="http://twitter.com/lissijean">@lissijean</a> <a href="http://twitter.com/lunivore">@lunivore</a> <a href="http://twitter.com/llillian">@llillian</a> <a href="http://twitter.com/nativeWired">@nativeWired</a> <a href="http://twitter.com/risingLinda">@risingLinda</a> | |
<a href="http://twitter.com/dianaOfPortland">@dianaOfPortland</a> <a href="http://twitter.com/estherderby">@estherderby</a> <a href="http://twitter.com/apaipi">@apaipi</a> <a href="http://twitter.com/darciD">@darciD</a> <a href="http://twitter.com/kkirk">@kkirk</a> | |
<a href="http://twitter.com/grushkay">@grushkay</a> <a href="http://twitter.com/samlaing">@samlaing</a> <a href="http://twitter.com/karen_greaves">@karen_greaves</a> (yay! We made the list;) ) | |
<a href="http://twitter.com/joperold">@joperold</a> <a href="http://twitter.com/candicemesk">@candicemesk</a> <a href="http://twitter.com/stephbysouth">@stephbysouth</a> <a href="http://twitter.com/smamol">@smamol</a> <a href="http://twitter.com/kb2bkb">@kb2bkb</a> | |
<a href="http://twitter.c |
My ordered list:
- foo
- bar
- baz
My ordered list that keeps changing and I keep changing the numbers and arg what a pain:
- baz
- foo
OlderNewer