Differences between revisions 4 and 17 (spanning 13 versions)
⇤ ← Revision 4 as of 2017-04-14 07:48:23 →
Size: 1571
Editor: SamatJain
Comment: Merge CSS into CascadingStyleSheets
← Revision 17 as of 2021-11-03 07:16:48 → ⇥
Size: 2880
Editor: SamatJain
Comment: Font sizes
Deletions are marked like this. Additions are marked like this.
Line 6: Line 6:
== Link colors ==
Line 7: Line 8:
=== 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
Line 30: Line 48:
=== Bootstrap themes ===

 * [[https://bootswatch.com/|Bootswatch]]. Fave: [[https://bootswatch.com/lumen/|Lumen theme]].
 * [[https://hackerthemes.com/|Hacker Themes]]
Line 33: 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 41: Line 63:

Other appealing widths:

 * 56rem
Line 45: Line 71:

== Font sizes ==

{{{#!highlight css numbers=off
/* 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.

 * [[http://bulma.io/|Bulma]]: CSS framework based on Flexbox. Has widgets available. 19.7 KB
 * [[http://purecss.io/|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%)

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

Ems for block widths

  • 20em ≈ 320px
  • 30em ≈ 480px
  • 40em ≈ 640px
  • 50em ≈ 800px
  • 60em ≈ 960px
  • 64em ≈ 1024px

from Responsive enhancement

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%)

SamatsWiki: CascadingStyleSheets (last edited 2021-11-03 07:16:48 by SamatJain)