At this point, you have been introduced to LESS variables, nesting, mixins, escaping, importing and more. This project incorporates a small amount of everything. You will need to be able to navigate the file structure and make the following updates:
##Project 2 - Organize imports, use mixins, functions, escaping, namespacing by building and updating a single web page.
Notice that the LESS folder in this project has several .less files now. Task 1 is to correctly import the .less files into index.less in the following order:
- reset.less
- variables.less
- mixins.less
- general-styles.less
- header.less
- cta.less
- main-content.less
- contact.less
- footer.less
Once you have imported your less files, be sure to run less-watch-compiler
-
Use all 5 mixins from the mixins.less file in anyway you want throughout the site (Hint, google the CSS properties if you don't know what they do!).
-
Use escaping to create 2 unique media query variables named "tablet" at a max-width of 768px and "phone" at 400px max-width. Now use your variables in combination with @media to introduce responsive styling to your page. (You can use code from your last project for the responsivness)
-
Create your own custom button mixin that passes values for width, height, and background color. Once you have created this mixin, introduce a button to the bottom of each
.text-contentdiv. Create unique text for each button to match the header. Example: The heading "Features" could have a button that reads "See Features." Be creative! -
Use a function to darken the background by 20% on hover for all those new buttons you just made.
Stretch
Create your own namespace for the following elements:
- Headings
- Buttons
- p tags
Once you have created your own unique namespace, apply it throughout the site using the > accessor to overrite the current styles in place.