Topics

• With BEM CSS naming, take advantage of nesting options in Sass;
• Implementing 7-1 CSS Architecture with Sass
  • Understanding the purpose of dividing CSS into categories and organizing CSS into ‘partial’ files;
  • Compiling partial Sass files into a main.scss Sass file;
• Building a grid system using floats OR installing and implementing a pre-built 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

Below are description of the versions of Natours you should save and the file/folder structure for each version:

• 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
  • *** or use sass flexbox grid and attach to your project ***

Problem Sets

Recreate the outline buttons from Bootstrap using Sass to compile your CSS.

• Use the exact HTML/CSS from the page (see below). But you need to setup a new project 05-button-set and install sass and write a Sass code in a main.scss file that compiles to your style.css file.

Use the reset and font-size management strategies introduced in the tutorials.

• Separate parts of your scss code from main.scss into appropriate 7-1 architecture’s structure folders and files.
• Make sure your main.scss file only @include statements to include all your partial files.

Button HTML

<button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-light">Light</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>

Button CSS

button {
    cursor: pointer;
}
.btn {
    display: inline-block;
    font-weight: 400;
    color: $color-black;
    text-align: center;
    vertical-align: middle;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

Button colors in Sass

$color-primary: #007bff;
$color-secondary: #6c757d;
$color-success: #28a745;
$color-info: #17a2b8;
$color-warning: #ffc107;
$color-danger: #dc3545;
$color-light: #f8f9fa;
$color-dark: #343a40;
$color-white: #ffffff;
$color-black: #212529;

For the blog

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 describe how they were used in the tutorials. Use a code block to support your description.