This project shows examples of advanced usage of CSS and SASS. This WordPress theme features navigation and popups animations made of pure CSS. In this project I utilize many examples of the lesser-known CSS declarations that helps create next generation websites, with feature queries for browsers that are behind on the innovation curve.
For this project I used Local by Flywheel to quickly spin up a local WordPress environment, along with NPM and WPGulp. WPGulp helps with:
- Sass to CSS conversion
- JS concatenation
- Watch files for changes
I used most of the newest CSS features to create an all CSS navigation and CSS popup that uses the super useful checkbox hack. On most of the elements you’ll notice a slant-like design that breaks up the boxy layout look. I even put to use background gradients on images, videos and headers to bring everything to life.