A tribute page of George R.R Martin to the completion of the Responsive Web Design Project on FreeCodeCamp. You can find me on https://www.freecodecamp.org/shaux.
Live Server: https://shaurya-sarma.github.io/FCC-Tribute-Page/
Inspiration Credit: @Madalena.design | Codepen: https://codepen.io/Madalena-Design/full/mYNJjW
Animate.css repository: https://github.com/daneden/animate.css
By organizing styles with the SASS-preprocessor, writing styles for HTML documents becomes organized and effficient. It includes components from SMACSS, OCSS, BEM, and ACSS.
We have the styles.scss file as the main stylesheet with branching imports.
The styles directory is further divided into three sub directiories:
This includes templating stylesheets such as HTML styling, helper classes, SASS variables, functions, and mixins.
- _base.scss
- _functions.scss
- _helpers.scss
- _mixins.scss
- _variables.scss
This includes indiviual stylsheets for each component of a page: navigation bars, footers, sidebars, galleries, and main content. By splitting code into seperate sections, it is easy to make quick changes and locate certain elements or CSS rules.
For more wide-scale projects, with multiple pages, this allows for id selectors to make page-specific overrides. By using the BEM convention, id selectors will act as !important selector but still retain best practices. By using classes and id selectors (for overriding styles) elements won't struggle with specificity.
More information is found throughout the files. (Using px to rem conversions or @mixins to create media-query shortcuts)