The Fellowship of Ring

Getting Started

Clone this repository into your system.

In the project directory, you can run:

npm run compile:sass

Compiles your scss code into css and updates the styles.css file

Folder Structure

📦puzzles-2.0
┣ 📂css : To save all the css files
┣ 📂img : To save all images
┣ 📂js : To save all the javascript files
┣ 📂pages : To save various pages
┣ 📂sass : To save all your scss files
┃ ┗ 📂base : basic project definitions
┃ ┃ ┣ 📜_base.scss : low level basics like resets and styles for HTML and body selectors
┃ ┃ ┗ 📜_animations.scss: for animations
┃ ┃ ┗ 📜_typography.scss: for typography
┃ ┃ ┗ 📜_utilities.scss: for utilities
┃ ┗ 📂abstract : code that's not going to output any css.
┃ ┃ ┣ 📜_functions.scss :
┃ ┃ ┗ 📜_mixins.scss:
┃ ┃ ┗ 📜_variables.scss:
┃ ┗ 📂components : Reusable UI components
┃ ┗ 📂layout : layout elements work on all pages
┃ ┃ ┣ 📜_header.scss : example
┃ ┃ ┗ 📜_footer.scss: example
┃ ┗ 📂pages : specific styles for a specific page,
┃ ┃ ┣ 📜_home.scss : example
┃ ┣ 📜main.scss: to import all the files that are in these folders.
┣ 📜index.html : Home Page