Advanced layout system demo

In this repo, we are going to learn advanced layout system such as grid layout and flex layout.

Also including some lib demo for easy layout our website.

Content

• Grid Layout

  • 01 Grid basic
  • 02 Grid columns and Grid rows
  • 03 Grid gap
  • 04 Grid named line
  • 05 Grid template areas
  • 06 Grid minmax
  • 07 Grid repeat basic
  • 08 Grid repeat with auto-fill or auto fit
  • 09 Grid auto-flow
  • 10 Grid ordering
  • 11 Grid nesting grid layout
  • 12 Grid template shorthand

• Flex layout

  • 01 flex direcction
  • 02 justify content

• SCSS

  • 01 Install node-sass
  • 02 Partial file and variable
  • 03 Parent selector
  • 04 Color fns
  • 05 @mixin & @content
  • 06 @extend & #{}
  • 07 @for loop
  • 08 @each
  • 09 @function(09-function)