# Exercises

# Exercise 1

• Topics involved: variables, functions and nesting
• Study the code in exercise1/dist/index.html, which results in the following output (without any styling):

• Write SCSS code in exercise1/scss/style.scss to achieve the following result:

• Instructions:
  • Declare (and use) a variable $fontstack and store the imported Google font 'Gotu' in this variable
  • Declare (and use) a variable $fontsize with value 16px
  • Declare a variable $primary with value lightskyblue. Use a Sass function to darken this color and save the result in the variable $primary_dark
    • Later on, you can change this color to another "light" color, e.g. lightpink (0:27 in solution video) or aquamarine (0:37 in solution video) and your whole page (including the navbar) will be "re-colored"
  • Add a universal reset, apply a standard line-height and add some paddings where needed
  • The #container should be centered horizontally and has a maximum width of 800px
  • The text color of the major heading h1 is $primary-dark
  • Use the flexbox technique to transform the unordered list in the nav element to a full-blown navbar
    • Use nesting (so that the other list in the document is not affected)
    • The background-color of the items equals $primary, while the outline (gives better results than border) and link texts are shown in $primary-dark
    • When hovering over a menu-item, the link is made bold and the colors (color and background-color) are switched in a transition of 1s
    • For small screens, the menu-items are placed beneath each other. From screen widths of 650px or larger, the menu-items are placed besides each other
  • Adjust the left margin of the unordered list in the main element (so that the bullets are horizontally aligned with the rest of the document)

# Exercise 2

• Topics involved: variables, functions and mixins
• Study the code in exercise2/dist/index.html, which results in the following output (without any styling):

• Write SCSS code in exercise2/scss/style.scss to achieve the following result:
  • Extra small (< 576px) screen:
    
  • Small (< 768px) screen:
    
  • Medium (>= 768px) screen or larger:
    
• Instructions:
  • Declare 2 variables $small (with value 576px) and $medium (with value 768px)
  • Write a mixin layout with 2 arguments $color and $size (with default value 14px), which sets
    • the (text) color to $color
    • the background-color to the inverted color of $color, but with an adjusted $lightness of 20%
    • the font-size, margin and padding equal to $size
    • the line-height equal to 1.5 (or $size*1.5)
    • a solid border of 5px in color $color
  • Add a universal reset and some paddings where needed
  • Use Verdana (with a suitable fallback font)
  • Use the mixin layout to give #container a layout based on darkred (and the default $size of 14px)
  • On small screens, the layout should be based on darkblue and 16px
  • On medium screens (or larger), the layout should be based on darkgreen and 20px

# Exercise 3

• Topics involved: variables, functions, nesting, mixins and partials
• Study the code in exercise3/dist/index.html, which results in the following output (without any styling):

• Write SCSS code in exercise3/scss to achieve the following result:

• Instructions:
  • Make 3 new partials: _variables.scss, _mixins.scss and _reboot.scss
  • In your main file style.scss, you import the Google font 'Anton' and these 3 partials (in the correct order)
  • _variables.scss
    • Declare 3 variables $fontstack-titles ('Anton' with a suitable fallback font) , $fontstack-text (Verdana with fallback font) and $small (600px)
  • _mixins.scss
    • Copy the mixin layout (from Exercise 2) to this file
  • _reboot.scss
    • Add a universal reset
    • body:
      • font: $fontstack-text
      • layout based on white and 1rem for extra small screens (< 600px)
      • layout based on black and 1.25rem for small screens or larger (>= 600px)
    • main heading:
      • font: $fontstack-titles with size 1.75rem
      • some padding at the bottom
    • paragraphs (in article)
      • some padding at the bottom
    • links in all states:
      • block elements with a width of 130px
      • font: $fontstack-titles
      • layout based on black and 1rem (remove the margin on the left!)
    • links when hovered:
      • layout based on dimgray and 1rem

# Exercise 4

• Topics involved: nesting, mixins and partials
• Study the code in exercise4/dist/index.html, which results in the following output (without any styling):

• Write SCSS code in exercise4/scss to achieve the following result:

• Instructions:
  • Make 2 new partials: _mixins.scss and _reboot.scss
  • In your main file style.scss, you import these 2 partials (in the correct order)
  • _mixins.scss
    • Write a mixin frame with 6 parameters
      • $thickness: thickness of the border
      • $style: style of the border (default = solid)
      • $color-border: border color (default = #OOO)
      • $color-bg: background-color (default = #eee)
      • $padding: space on the inside of the element (default = 10px)
      • $radius: rounding applied to the element (default = 15px)
      • and, when hovering: a box-shadow in 0.75 opaque black, 5px to the right and the bottom, with a blur of 10px
  • _reboot.scss
    • Add a universal reset and some padding below the main heading
    • body:
      • font: Geneva with a suitable fallback font
      • black text on gray (#ccc) background
    • article:
      • maximum width of 800px, centered
      • white (#fff) background
      • centered content
    • section
      • Use flexbox to display the images next to each other (with equal space between them), and on multiple lines when needed
      • img (in section)
        • width and height equal to 225px
        • some margin at the bottom
        • Add some layout using the mixin frame:
          • 1st image: border thickness 3px, no other parameters specified
          • 2nd image: border thickness 3px, border style dotted, no other parameters specified
          • 3rd image: border thickness 3px, border style solid, border color mediumseagreen, no other parameters specified
          • 4th image: border thickness 6px, border style solid, border color #b8181b, background #e7d5c2, 20px space on the inside and rounding of 40px
          • 5th image: border thickness 6px, border style dashed, border color rgb(109,85,106), peru background, 20px space on the inside and rounding of 50%
          • 6th image: border thickness 3px, background #aac5d9, 20px space on the inside and rounding of 50%, no other parameters specified

            TIP

            Use the nth-child() (pseudo-class) selector to identify the different images

# Exercise 5

• Topics involved: variables, functions, mixins, partials and advanced topics
• In this exercise, you start from the source code of TMF (see Example 2)
• In index.html, we already added
  • some new classes to the body and main element
  • extra paragraphs with some new classes assigned to it

<body class="bg-gray-50">
<main class="container bg-white-90 py-4">
    ...

    <h2>Exercise 5</h2>
  
    <h3>&lt;p class="box-success"&gt;</h3>
    <p class="box-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet architecto, dicta
      distinctio doloremque explicabo fuga illo inventore ipsa iste libero maxime mollitia nesciunt nostrum nulla 
      perspiciatis quidem.</p>
  
    <h3>&lt;body class="bg-gray-50"&gt;</h3>
    <p>Changes the background color of the <code>body</code> element</p>
  
    <h3>&lt;main class="container bg-white-90 py-4"&gt;</h3>
    <p>Changes the background color and (vertical) padding of the <code>main</code> element</p>
  
    <h3>&lt;p class="bg-info-40 p-3"&gt;</h3>
    <p class="bg-info-40 p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi 
      blanditiis ducimus iusto magnam modi officiis provident reprehenderit sunt veritatis? Ad commodi culpa 
      earum eligendi enim incidunt?</p>
</main>
</body>
 
        Copied!
    

• It's up to you to write the Sass code that will generate these new classes such that the index page looks as follows:

• Instructions:
  • .box-primary, .box-danger, ...
    • Add a new partial helpers/_box.scss
    • Use an @each rule to define the classes .box-primary, .box-danger, ... which change an element into a "box" with colors based on the colors defined in $color-map
      • The text color equals the specified color
      • The background-color equals the specified color, but with an alpha value of 0.15
      • Add a solid, 1px border in the specified color, but with an adjusted $lightness of -10%
      • Add a padding and margin-bottom of 1rem
      • Add a border-radius of 0.25rem
    • Afterwards, try moving the "box code" to a mixin color-box in mixins/_colorbox.scss
      • Import this new partial mixins/_colorbox.scss at the correct place in style.scss
      • The mixin color-box should have (at least) one parameter for the $color (but you might add different parameters as well)
  • .bg-primary-50, .bg-danger-90, ...
    • Add a new partial helpers/_background.scss
    • Use a nested iteration (@for within @each or vice versa) to generate the classes .bg-primary-X, .bg-danger-X, ... with X equal to 0, 10, 20, ..., 100
      • The background-color should be set to the specified color, with an alpha value of X/100
  • Classes for padding (.p-3, .pt-5, ...) and margin (.mx-2, ml-0, ...)
    • Add a new partial helpers/_spacing.scss
    • Use a @for rule to define the padding classes .p-X, .px-X, .py-X, .pt-X, .pr-X, .pb-X and .pl-X to add (overall, horizontal, vertical, top, right, bottom and left) padding
      • The value of X ranges from 0 to 5 (included!) resulting in a padding value of X/3rem
    • Similarly, generate also the corresponding (overall, horizontal, vertical, top, right, bottom and left) margin classes .m-X, .mx-X, .my-X, .mt-X, .mr-X, .mb-X and .ml-X