CSS

Todo

  • design steal 8164.org 1
  • StackOverflow team 2
  • Sass: Mixin or Placeholder? 3
  • simplelineicons 4 preview
  • node-sass vs sass-loader 5
  • Responsive Websites With Bootstrap 3 by Mark Zamoyta Pluralsight course page 6 Jan 2015. Learn to create a modern, responsive website using Bootstrap 3.
  • CSS3 In-Depth by Estelle Weyl Pluralsight course page 7 Feb 2013
  • Modern Web Layout with Flexbox and CSS Grid Pluralsight course page 8 by Brian Treese, Jan 2016. Explore the modern world of web layout with the Flexible Box Module and CSS Grid Layout.
  • CSS3 In-Depth by Estelle Weyl Pluralsight course page 7 Feb 2013
  • Responsive In-Browser Web Page Design with HTML and CSS Pluralsight course page 9 by Karen Menezes, Sep 2015. In this HTML and CSS tutorial, we’ll learn how to create a responsive site from scratch by prototyping directly in the browser.
  • CSS Grid Layout (aka “Grid”). Complete Guide to Grid 10
  • estelle/CSS-Workshop 11 6 hours workshop covering almost everything in CSS2 and CSS3 with demo 12 and CSS3 In-Depth CSS3 In-Depth Pluralsight course page 7, css selectors demo 13. jQuery & CSS3 Selectors 14 article. slides 15.
  • select[ivizr] is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
  • ::after pseudo-element mdn 16
  • quackit.com: Html Fieldset Tag.Cfm 17
  • text-align qk 18
  • text-align-last qk 19
  • quackit.com: Css Text Align.Cfm 20
  • line-height qk 21, fun 22
  • nth-child pseudo-selector tester 23, std 24
  • Polyfills. A shim that mimics a future API providing fallback functionality to older browsers. HTML5 Cross Browser 25. Regressive Enhancement.

Bootstrap

  • mobile-first, wroblewski site 26 and online book 27
  • Bootstrap 4 overview 28 and samples 29
  • Responsive Websites With Bootstrap 3 by Mark Zamoyta Pluralsight course page 6 Jan 2015. Learn to create a modern, responsive website using Bootstrap 3.
  • my Bootstrap3 grid sample 30 on codepen
  • Multi-Device Layout Patterns 31 March, 2012. by Luke Wroblewski
    • Mostly Fluid: multi-column layout, stacks columns vertically
    • Column drop: starts with a multi-column layout and ends up with a single column layout, dropping columns along the way as screen sizes get narrower. Unlike the Mostly Fluid pattern, the overall size of elements in this layout tend to stay consistent. Adapting to various screen sizes instead relies on stacking columns
    • Layout Shifter: does the most to adapt across different screen sizes. That is, different layouts are used on large, medium, and small screens. Because this inherently requires more work, it seems to be less popular than the previous two patterns. This is where a lot of innovative design is happening.
    • Content Reflow: change display characteritics of individual elements depending on viewport characteristics (media queries)
    • Tiny Tweaks
    • Off Canvas
  • add the responsive viewport meta tag 32 to your <head>.
  • List of glyph icons 33, v3.2.2
  • Navigation bar
    • Supported content 34 like .navbar-nav
    • navbar forms sample 35
    • A fixed header 36 that will animate its size on scroll. ngx2 37.
    • navigation bar is hidden on small screens and replaced by a button 38 in the top right corner. bootstrap 3.3.7 and jquery 1.9
    • fixed to top 39 with bootstrap 4 and jquery 3.

Flexbox

  • Modern Web Layout with Flexbox and CSS Grid Pluralsight course page 8 by Brian Treese, Jan 2016. Explore the modern world of web layout with the Flexible Box Module and CSS Grid Layout.
  • Quick guide to flexbox 40

MDN Resources

  • CSS first steps — learn CSS module 43 on MDN
  • How CSS works 44 on MDN
  • Styling a biography page — CSS assessment 45 on MDN

W3C Resources

  • W3C learn CSS 46
  • CSS3 in Style — W3C Talk, 2012 47

Style Stage

style stage — a modern CSS showcase 48; manual (flex) 49; sweet spooky 50; StageOS 51; old book 52

CSS-WWW2012 Demos

  • Adjacent Sibling Combinator 53
  • Selector Child 54
  • Media queries with min-height 55
  • Multi-column width and count 56
  • Multi-column gap and rule 57
  • column-fill: balance vs auto 58
  • Multi-column span 59

CSS Units

  • CSS Units 60

Almanac

  • list-style * 41
  • media queries 42 on MDN
< «