/sassy-front-page

Project to learn SASS

Primary LanguageCSS

SASSy Front Page

View on Github Pages https://jonburdon.github.io/sassy-front-page/

Project aims

  1. Demonstrate how a home page might be structured using SASS.
  2. To give the author a basic awareness of SASS.

Technologies

  • HTML
  • CSS
  • SASS
  • Git

Functionality

  • SASS Preprocessing used for all CSS
  • Variables used to set basic theme colours.
  • SASS colour functions used to adapt the theme colours set
  • Nesting used to make more readable and less repetitive
  • Import used to import header part of SASS
  • Use mixins to add vendor prefixes to transform
  • Use Extend/Inheritance to share properties between selectors

Future Plans

  1. Make fully responsive
  2. Use more operators to explore this feature of SASS
  3. Use SASS Colour Functions to control a colour scheme with a wider range of colours in the palette
  4. Use partials to make css more modular and reusable
  5. Re-use Header in a sub page
  6. Create a footer which is reused on sub pages
  7. Add social media buttons which re-use as much code as possible
  8. Use Operators to create elements of specific width, or to control

Credits

https://sass-lang.com/guide Used to learn and for SASS snippets. Original snippets taken from this guide.