- Fork and Clone this repository onto your computer.
- Install dependencies:
$ npm install
$ npm run dev
will start browser-sync which will reload the browser for you automatically as you make changes to your Sass files (.scss
) or HTML files.
*first time test
Find the file styles.scss
and change the background-color
declaration's value to magenta
and save your file. Your browser should refresh automatically.
Level 1 introduces media queries and scss structure. Recreate the stylesheet for the following responsive layout using sass variables, inline media queries, and a mixin for the font. DO NOT cheat by inspecting the CSS file!!! Sassy Blocks Demo
- First, import the reset files:
- partials/reset
- partials/clearfix
- At minimum, define variables for:
- globally used dark color
- globally used light color
- globally used bright color
- globally used padding
- Make sure your stylesheet uses a mobile-first approach.
- Define all global styles (if any)
- then override the global styles with "medium and up" styles
- then override the medium and up" styles with "large and up" styles.
Media Query Ranges:
- Your Medium Media Query Range should apply for screen sizes with a minimum width of 600px.
- Your Large Media Query Range should apply for screen sizes with a minimum width of 900px.
Note that these ranges are NOT STANDARD, and proper ranges depend on the project, devices you are developing for, etc.
- Define a mixin for your font, and include it where appropriate:
@mixin block_font($block_font_size: 25px, $block_font_color: $dark){
font-size: $block_font_size;
color: $block_font_color;
}
Now enhance the sassy blocks with a Modular Grid. Do it without a framework like foundation or bootstrap.
See if you can do some nth-child styling for fun.