design2 – Sass nesting – 7-1 architecture – grid system

Tutorials

  • Section 05 Natours Adv. CSS & Sass, videos 030 – 034
  • Notes for Section 05
  • This week you’re going to take your Natours project through three updates, each with a technical focus:
    • 031 – moving your CSS to Sass and nesting selectors where appropriate.
    • 032 – reorganizing your Sass code into a 7-1 Sass architecture.
    • 034 – writing your first grid system using Sass

Files to upload

  • 031 Sass nesting
    • natours/v5-1/index.html
    • natours/v5-1/package.json
    • natours/v5-1/css/style.css
    • natours/v5-1/img/all-image-files
    • natours/v5-1/sass/main.scss
  • 032 7-1 architecture
    • natours/v5-2/index.html
    • natours/v5-2/package.json
    • natours/v5-2/css/style.css
    • natours/v5-2/img/all-image-files
    • natours/v5-2/sass/main.scss
    • natours/v5-2/sass/abstracts/_functions.scss
    • natours/v5-2/sass/abstracts/_mixins.scss
    • natours/v5-2/sass/abstracts/_variables.scss
    • natours/v5-2/sass/base/_animations.scss
    • natours/v5-2/sass/base/_base.scss
    • natours/v5-2/sass/base/_typography.scss
    • natours/v5-2/sass/base/_utilities.scss
    • natours/v5-2/sass/components/_button.scss
    • natours/v5-2/sass/layout/_header.scss
    • natours/v5-2/sass/pages/_home.scss
  • 034 grid system
    • all files above copied and updated to natours/v5-3
    • natours/v5-3/sass/layout/_grid.scss

Blogging Questions

There is a ton of CSS architecture covered in these three videos and how to use Sass to implement your 7-1 architecture. But hidden in there are a few bits of interesting CSS to mull:

  • :not() pseudo selector
  • calc() function
  • [] attribute selector with the ^ operator used.
  • ::after pseudo selector to write a clearfix hack

Pick two of these and described how they were used in the tutorials. Give an example piece of code using Enlighter to support your description.

Leave a comment

Your email address will not be published. Required fields are marked *

css.php