The goals of this project are to display a solid understanding of SASS and implement a style guide that could be used to jumpstart future project and get them off the ground faster. Implement best practices in respect to file naming and file structure conventions as well as with use of various SASS features including the creation of advanced mixin techniques for media queries. This project provided only a tablet and desktop mockup, leaving the design and development of the layout for screen sizes relevant to mobile devices on the student.
- HTML5
- CSS3
- SASS
- Chrome Dev Tools
- Editors
- Terminal
- git and github
- Mobile First Responsive Design
- Fluid width Responsive Design
- Various advanced sass techniques such as functions, loops, mixins and more
Sass is an important tool in a modern Front End Web Developer’s toolbox. It's used by many developers to make styling web pages with CSS easier and faster. Create a style guide that can act as your own personal and custom Bootstrap that you can drop into any of your projects to speed up styling, layout and development in general.
In this project, we’ve provided an index.html file with a set of class names already defined. You will be responsible for creating rules to style the web page using each of those class names. This will provide you with a set of classes that you can then use in other projects to apply similar styles. You'll create a sass project to do this, using partials, variables, extends, and mixins to apply the styles and classes to the style guide page. When done, you’ll have a Sass micro-framework to quickly prototype other websites.
NOTE: The Front End Web Development Techdegree is meant to train you in HTML, CSS and JavaScript, and let you practice and show your mastery of these fundamental building blocks of the web. Because of that, please avoid using frameworks like Bootstrap, Foundation, Skeleton, and so on for this project. Even though you may end up using frameworks like these professionally, you still need to know and be able to implement designs with your own knowledge of HTML, CSS and JavaScript.
In addition, please avoid submitting any projects that rely on a server-side technology like PHP or Ruby on Rails.