Techdegree Project 4

Web Style Guide

View on GitHub

Summary

This project required customising the properties a set of pre-defined class names in a provided index.html file. These classes were styled in Sass partial files.

Details

Sass lets allows developers to use features such as variables, nesting, mixins, inheritance and others. This project requires using Sass partials to create rules to style the web page, providing a set of classes that can then be used in other projects to apply similar styles.

This project required utilising partials, variables, extends, and mixins to apply the styles and classes to the style guide page, building a Sass micro-framework to quickly prototype other websites.

Solution

To complete this project, I began by creating a scss folder in your project with the following subfolders: utilities (to contain partials for global variables, extends, mixins, and functions), base (for the normalize.css file and base styles that are used in the project), components (to contain partials for each part of your site: grid, typography, navigation, images, buttons, forms).

Each subfolder contains an _index.scss file, used to import each sass partial file in the folder. A styles.scss file in the root of your Sass project imports all _index.scss partials into a main styles.scss file (making sure the imports are in the correct order for styling).

The utilities folder contains a partial for variables for repeated values such as fonts, breakpoints, and colors. This partial is imported into the utilities/index.scss file. The utilities folder also contains a partial for mixins (including media queries and flexbox settings) and a partial for your placeholders (links, images, headlines, and nav items).

All styles for this project are be applied using the classes listed in the comment at the top of the index.html file. These classes are styled in the components folder. The components folder contains a separate partial for the flexbox grid, typography, navigation, images, buttons and forms.

The base folder includes a normalize.css file and a base.scss file. The base.scss file only applies styles to three different elements directly: the universal selector (*), ul elements and p elements

Extra Credit

To achieve an 'Extra Credit' grade in this project, I used the flexbox mixin to apply flexbox properties in your project. I also used the media query mixin to apply all media queries throughout the project.

Profile picture of Thomas Moore

Get in touch

I'm always open to hearing about freelance product design and development projects (or if you just want to say hi!)