|
Size: 2358
Comment:
|
Size: 2880
Comment: Font sizes
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 24: | Line 24: |
| #3A99D3 |
|
| Line 46: | Line 48: |
| === Bootstrap themes === * [[https://bootswatch.com/|Bootswatch]]. Fave: [[https://bootswatch.com/lumen/|Lumen theme]]. * [[https://hackerthemes.com/|Hacker Themes]] |
|
| Line 49: | Line 55: |
| * 20 em ≈ 320px * 30 em ≈ 480px * 40 em ≈ 640px * 50 em ≈ 800px * 60 em ≈ 960px * 64 em ≈ 1024px |
* 20em ≈ 320px * 30em ≈ 480px * 40em ≈ 640px * 50em ≈ 800px * 60em ≈ 960px * 64em ≈ 1024px |
| Line 57: | Line 63: |
Other appealing widths: * 56rem |
|
| Line 62: | Line 72: |
| == Font sizes == {{{#!highlight css numbers=off /* Super-large top-page or mid-page heading */ font-size: 4rem; font-weight: 200; }}} |
|
| Line 63: | Line 80: |
letter-spacing: 0.8px; |
|
| Line 66: | Line 85: |
| letter-spacing: 03125em; |
|
| Line 68: | Line 89: |
| line-height: 10.9em; | line-height: 1.09em; line-height: 1.4375rem; |
| Line 84: | Line 107: |
= Background colors = * Warm off-white: background-color: hsl(30,90%,98%) |
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 }#3A99D3
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
Bootstrap themes
Bootswatch. Fave: Lumen theme.
Ems for block widths
- 20em ≈ 320px
- 30em ≈ 480px
- 40em ≈ 640px
- 50em ≈ 800px
- 60em ≈ 960px
- 64em ≈ 1024px
Other appealing widths:
- 56rem
Clearfix
Clearfix is the original method for clearfix. At SitePoint, apparently using overflow: auto also works for container elements.
Font sizes
/* Super-large top-page or mid-page heading */
font-size: 4rem; font-weight: 200;
Spacing
letter-spacing: 0.8px;
letter-spacing: .06em;
letter-spacing: 03125em;
line-height: 1.25em;
line-height: 1.09em;
line-height: 1.4375rem;
h2 { margin-bottom: 0.3em; }
CSS frameworks
Quoted file sizes are minified + gzipped.
Bulma: CSS framework based on Flexbox. Has widgets available. 19.7 KB
Pure.css. Minimal CSS framework, 3.8 KB. From Yahoo. 6 KB.
Text colors
From oldblog.samat.org (Drupal-powered blog):
- Text: main text is #1d1916 and some lighter text is #4F4F4F
Background colors
- Warm off-white: background-color: hsl(30,90%,98%)
