CSS

todo

  • design steal 8164.org
  • StackOverflow team
  • Sass: Mixin or Placeholder?
  • simplelineicons preview
  • node-sass vs sass-loader
  • Responsive Websites With Bootstrap 3 by Mark Zamoyta Pluralsight course page Jan 2015. Learn to create a modern, responsive website using Bootstrap 3.
  • CSS3 In-Depth by Estelle Weyl Pluralsight course page Feb 2013
  • Modern Web Layout with Flexbox and CSS Grid Pluralsight course page 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 Feb 2013
  • Responsive In-Browser Web Page Design with HTML and CSS Pluralsight course page 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
  • estelle/CSS-Workshop 6 hours workshop covering almost everything in CSS2 and CSS3 with demo and CSS3 In-Depth CSS3 In-Depth Pluralsight course page, css selectors demo. jQuery & CSS3 Selectors article. slides.
  • select[ivizr] is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
  • ::after pseudo-element mdn
  • https://www.quackit.com/html_5/tags/html_fieldset_tag.cfm
  • text-align qk
  • text-align-last qk
  • https://www.quackit.com/css/properties/css_text-align.cfm
  • line-height qk, fun
  • nth-child pseudo-selector tester, std
  • Polyfills. A shim that mimics a future API providing fallback functionality to older browsers. HTML5 Cross Browser. Regressive Enhancement.

Bootstrap

  • mobile-first, wroblewski site and online book
  • Bootstrap 4 overview and samples
  • Responsive Websites With Bootstrap 3 by Mark Zamoyta Pluralsight course page Jan 2015. Learn to create a modern, responsive website using Bootstrap 3.
  • my Bootstrap3 grid sample on codepen
  • Multi-Device Layout Patterns 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 to your <head>.
  • List of glyph icons, v3.2.2
  • Navigation bar

Flexbox

  • Modern Web Layout with Flexbox and CSS Grid Pluralsight course page 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

Almanac

« wiki