|
Size: 430
Comment: Clearfix
|
Size: 1893
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| * [[http://markapp.io/|MarkApp: Building apps with HTML]]. Widgets and libraries that can be used without writing any JavaScript. * [[http://youmightnotneedjs.com/|You Might Not Need JavaScript]]. Various widgets and libraries that are HTML/CSS only. * [[http://kushagragour.in/lab/hint/|Hint.css]]: Pure CSS-only tooltip library == Link colors == === One === {{{ background-color: #f2f2f2; /* Sidebar */ background-color: #f7f7f7 text-color: black; a:link { color: #1863a1 } a:visited { color: #751590 } a:focus { color: #0181eb } a:hover { color: #0181eb } a:active { color: #01579f } }}} == Highlight styles == Lorem Ipsum e-mail: background-color: gold, which is the same as Gary Johnson's e-mail campaign: #FFD700 Highlight text-shadow, from http://www.audiocheck.net/testtones_highdefinitionaudio.php: {{{#!highlight css numbers=off text-shadow: -3px 0px 3px yellow, 3px 0px 3px yellow, 6px 0px 6px yellow, -6px 0px 6px yellow; }}} == Flexbox == * [[http://yoksel.github.io/flex-cheatsheet/|Flexbox Cheatsheet]] == Animations == * [[http://animista.net/|Animista]]: Wizard that lets you browse and create keyframe-based animations == Twitter Bootstrap == * [[https://github.com/winjs/winstrap|winjs/winstrap: The official Bootstrap theme for Microsoft's Modern design language]] |
|
| Line 3: | Line 49: |
| * 40em =~ 640px * 50em =~ 800px * 64em =~ 1024px |
* 20 em ≈ 320px * 30 em ≈ 480px * 40 em ≈ 640px * 50 em ≈ 800px * 60 em ≈ 960px * 64 em ≈ 1024px |
| Line 12: | Line 61: |
== Spacing == letter-spacing: .06em |
MarkApp: Building apps with HTML. Widgets and libraries that can be used without writing any JavaScript.
You Might Not Need JavaScript. Various widgets and libraries that are HTML/CSS only.
Hint.css: Pure CSS-only tooltip library
Link colors
One
background-color: #f2f2f2;
/* Sidebar */
background-color: #f7f7f7
text-color: black;
a:link { color: #1863a1 }
a:visited { color: #751590 }
a:focus { color: #0181eb }
a:hover { color: #0181eb }
a:active { color: #01579f }
Highlight styles
Lorem Ipsum e-mail: background-color: gold, which is the same as Gary Johnson's e-mail campaign: #FFD700
Highlight text-shadow, from http://www.audiocheck.net/testtones_highdefinitionaudio.php:
text-shadow: -3px 0px 3px yellow, 3px 0px 3px yellow, 6px 0px 6px yellow, -6px 0px 6px yellow;
Flexbox
Animations
Animista: Wizard that lets you browse and create keyframe-based animations
Twitter Bootstrap
Ems for block widths
- 20 em ≈ 320px
- 30 em ≈ 480px
- 40 em ≈ 640px
- 50 em ≈ 800px
- 60 em ≈ 960px
- 64 em ≈ 1024px
Clearfix
Clearfix is the original method for clearfix. At SitePoint, apparently using overflow: auto also works for container elements.
Spacing
letter-spacing: .06em
