Differences between revisions 1 and 7 (spanning 6 versions)
⇤ ← Revision 1 as of 2011-02-17 08:52:40 →
Size: 153
Editor: SamatJain
Comment: Ems for block widths
← Revision 7 as of 2017-08-16 00:03:30 → ⇥
Size: 2143
Editor: SamatJain
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 8: Line 57:

== Clearfix ==

[[http://www.positioniseverything.net/easyclearing.html|Clearfix]] is the original method for clearfix. At [[http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats/|SitePoint]], apparently using `overflow: auto` also works for container elements.

== Spacing ==

letter-spacing: .06em

= 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.

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

from Responsive enhancement

Clearfix

Clearfix is the original method for clearfix. At SitePoint, apparently using overflow: auto also works for container elements.

Spacing

letter-spacing: .06em

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.

SamatsWiki: CascadingStyleSheets (last edited 2025-03-04 05:22:00 by SamatJain)