[School Landing Page – Part 2, Section 2] Folder Structure & Sass Setup

[School Landing Page – Part 2, Section 2] Folder Structure & Sass Setup

📸 School Landing Page Project – Section 2: Folder Structure & Sass Setup

In this section, we’re going to dive into how I set up the Sass files and the project folder structure. Having a well-organized folder structure is super important if you want your project to be maintainable and scalable down the road. We’ll also go over some handy libraries and tools that make coding easier and how they help keep things smooth during development.

---

✨ What is Sass Architecture?

Sass is all about making styling more efficient, and one way to do that is by organizing your styles in a clean, structured way. This is where Sass architecture comes in, which helps to break your code into smaller, manageable pieces. The goal here is to make your project easy to maintain and expand as it grows.

📦 The 7-1 Architecture

The 7-1 architecture is a popular way of structuring your Sass files. It’s called "7-1" because there are seven main folders and one main file to rule them all. Here's a quick rundown of the folders:

• abstracts: Variables, mixins, and functions go here
• base: This is where you’ll put your base styles, like resets or typography
• components: All your reusable UI components like buttons, cards, etc.
• layout: Styles that define the layout of the page (header, footer, navigation, etc.)
• pages: Styles for specific pages (if you have a multi-page site)
• themes: Custom themes for the project
• vendors: Styles for third-party libraries or plugins

This architecture helps you keep things tidy and makes it easy to reuse and update styles across your project.

---

📦 How I Tweaked the Sass Architecture

I decided to use the 7-1 architecture, but with a few tweaks to suit my project. Here’s what I changed:

1. No pages folder
   
   Since this is a single-page project, I didn’t need a pages folder. It’s useful for multi-page sites, but in my case, it wasn’t necessary.

2. No themes or vendors folders
   
   I didn’t use any external libraries or themes, so I left these out.

3. Renamed layout to sections
   
   I swapped layout for sections to better reflect how I’m organizing the project. Each section of the page gets its own folder, making it easy to manage styles for different parts of the page.

---

🗂️ Project Folder Structure

Here’s a quick overview of my project folder structure:

• abstracts: Variables, mixins, and functions
• base: Base styles (e.g., resets, typography)
• components: UI components (buttons, cards, etc.)
• sections: Individual page sections

This structure helps keep the code organized, readable, and easy to scale as the project grows.

---

🚀 Handy Libraries and Tools

Now that we’ve covered the folder structure, let’s talk about the tools and libraries that make our lives easier while coding. These tools help automate tasks, so we can focus more on building and less on managing.

---

🖥️ Running a Live Server

While building the project, it’s essential to see changes in real-time. That’s why I’m using live-server — it automatically refreshes the page whenever a file changes, so you don’t have to keep manually reloading the browser.

📦 How to Install live-server

First, let’s get live-server installed. It’s super easy:

npm install live-server --save-dev

---

📦 Why npm-run-all Is a Must

We’re using npm-run-all to run multiple commands at once. It lets us run both the Sass compiler and the live server at the same time, which is super convenient. It saves us the hassle of running each command separately.

🔧 How to Install npm-run-all

Run the following command to install npm-run-all:

npm install npm-run-all --save-dev

Then, update your package.json scripts section like this:

"scripts": {
  "watch:sass": "sass sass/main.scss css/style.css -w",
  "devserver": "live-server",
  "start": "npm-run-all --parallel devserver watch:sass"
}

This way, when you run npm start, both the live server and Sass will start at the same time!

---

🔜 Next up...

With Part 2 done, we’re ready to move into Part 3, where we’ll start writing some real code! This next section will focus on building the HTML layout and organizing it with semantic tags. Stay tuned for more on how we’ll structure the page and style it using Sass!

---

Thanks for reading! 😊