-
Run gulp. This project uses the Gulp + Livereload + Sass Project boilerplate, however all of this should already be set up for you.
-
Check that Livereload is running.
-
Check that sass is compiling. (set a variable, use the variable, then check if gulp compiles to a proper css file)
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.