css - unders/mywiki GitHub Wiki

Tutorial

• html-and-css

Course

• thecssworkshop.com/css-basics
• Layout lab
• learn-design

Layout

• understanding-css-layout-block-formatting-context

Buttons

• Stripe button - codepen

Forms

• form-validation-with-javascript
• HTML Spec form-control-infrastructure
• autofill-what-web-devs-should-know-but-dont
• form-validation-ux-html-css
• CodePen Form - Material design
• Codepen Form - autocomplete

Tools

• gridsetapp
• animate.css

Animate

• 8-simple-css3-transitions-that-will-wow-your-users
• learning-css-animations-by-example
• animating-border

Video

• Making Sense of the New CSS Layout
• Lea Verou - CSS Variables: var(--subtitle);

CSS variables

• postcss-css-variables
• start-using-css-custom-properties

Codepen

• Start using CSS Grid Layout today
• simpl.info - simplest possible examples of HTML, CSS and JavaScript
• text-spinners
• building-themes-with-css4-color-features
• youmightnotneedjs

Learn

• /neat-stuff-with-html-css
• presentation/modern-layouts-getting-out-our-ruts

Colors

• 2016/04/web-developer-guide-color
• colourlovers color palette tool

Flexbox

• flexbugs

Grid

• aug-15-2017/heres-super-quick-way-try-out-css-grid
• Griddy
• CSS Grid Template Builder
• grid-fallbacks
• cssgridgarden
• developer/css-grid/
• Web/CSS/CSS_Grid_Layout
• css-grid-layout
• Intro to CSS Grid
• a-complete-guide-css-grid-layout/
• css/complete-guide-grid
• gridbyexample
• feb-27-2017/learn-css-grid
• CSS Grid - Table layout is back

Progressive enhancement

• 2017/07/enhancing-css-layout-floats-flexbox-grid

Box Alignment

• Box Alignment Cheatsheet

Custom variables

• difference-between-types-of-css-variables

Inspiration

• a-redesign-with-css-shapes
• 8-awesome-examples-of-mobile-navigation-on-responsive-websites
• Magazine Layouts