Today, I thought maybe I should practice my frontend knowledge so I check some challenges from Frontend Mentor but all the challenges were either completed by me or were boring. I am a big fan of frontend mentor's challenges but I haven't purchased the premium version, that's why I have to stick with the free versions.
But then while surfing the internet I found DevChallenges. It is a website similar to frontend mentor's but the only difference it has, that I really like, is it provides you the Figma designs of the challenges for free.
While exploring their challenges I found a weather app. Well, you will say what's new about the weather app, yeah I know it's pretty basic but when I saw the design it just blew my mind.
The designs were very amazing. How a simple weather app that many courses or youtube videos show us can be very complex and amazing. And soon after I saw those designs I understood this app needs to be on my portfolio website, So I start building it. Here is my GitHub Repo if you want to follow. I don't know how much time it will take me to complete it.
Now, module bundler. There are plenty of module bundlers in the market like Parcel, Webpack, Snowpack, etc, but I am going to use Vite which is very fast. I have also written a blog about it Read Here. Now let's move on to the building part.
Copy the below command and paste it into your terminal for creating a Vite app.
npm init vite@latest
Give a name to your project and choose vanilla js. And then change your directory to that folder and install all the modules.
cd *your-project-name* npm install npm run dev
After that, we need to install some dependencies. We are going to install Axios for fetching data from the rest API. The API we are using is MetaWeather. And then we will install Sass.
npm install axios
npm install -D sass
Now, let's talk about folder structure. NOTE:- YOU CAN ARRANGE YOUR FOLDERS HOWEVER YOU WANT, THESE ARE HOW I LIKE TO DO. First of all create an
src folder on your root directory, it will hold all your source code except your
index.html file. Create
scss file inside your
src folder. Put your
main.js file inside of the
scripts folder and delete the
styles.css file from the root directory as we are going to use scss.
Your folder structure will look something like this.
I have also added an
assets folder which has nothing but only an image that you can download from the DevChallenge. We will use the image for styling our app.
We are going to use 7-1 pattern. I will suggest you Read Here. 7-1 pattern means you have to create 7 folders and only 1 scss file for example a base folder which will hold all your base styles like typography and resets etc. An abstracts folder will contain colors, fonts and breakpoints, and much more. And only 1 scss file you need to create.
styles.scss file there is only a single line.
@use is a special syntax that gets available to us in the recent dart-sass update. What about
@import? You can still use
@import to import all your styles in scss but if you visit the sass website they will suggest you use
@forward instead of
@import which does the same thing. They have also written that maybe in the future
@import will be deprecated and in longer in use. So, it's better to use it from now on. You can check youtube videos to learn more.
In the above case,
@use works as
@import but instead of importing every file which is inside of the
base folder which we used to do previously, it imports the whole folder.
So what's inside the base folder. You can see the picture below to understand.
base folder holds what we might call the boilerplate code for the project. In there, you might find the reset file, some typographic rules, and probably a stylesheet defining some standard styles for commonly used HTML elements.
We have a
_helpers.scss file which are all the helper classes we might be needed in the future. After that, we have a
_reset.scss file which contains margin and padding resets. You can also name it
_boilerplate.scss. Then, we have
_typography.scss which contains styling related to typography. NOTE:- IF YOU WANT TO LOOK INSIDE THE FILES MAKE SURE TO VISIT MY GITHUB REPOSITORY.
You might be asking why you are putting an underscore in front of every file name? Well because if you create files without an underscore it will create each file in the dist folder but we want only one scss file that's why we need to put it with an underscore.
One thing you will also notice that that in every folder inside of the
scss folder there is a
_index.scss file. The index file acts as a forwarder, it forwards all our files which will get imported in
styles.scss file. Previously, we import every single file in our
styles.scss file but now, we just have to import the folder.
// _index.scss @forward './reset'; @forward './helpers'; @forward './typography';
We also have an
abstracts folder inside of the
scss folder, so what does the abstracts folder contain. Well, it gathers all Sass tools and helpers used across the project. Every global variable, function, mixin, and placeholder should be put in there. I have created only two files. A
_variables.scss file for storing colors and fonts and a
_breakpoints.scss file which contain media queries that could be used in our project.
Well, only this much I have set up on day 1. I will keep posting till the project is completed. I will also share what I learned each day while creating this project. If you want to create this project on your own don't forget to visit DevChallenges and if you want to view my code, visit my GitHub Repo. If you want to talk more about anything don't forget to comment. And if you want to learn more about
@forward then I will highly suggest you watch this YouTube Video from Kevin Powell.
I haven't talked about
@forward in great detail but watching the video will clear all your doubts. Kevin Powell also has a video about organizing your sass files as I have done you can also check it Over Here. Comment if you want me to write a blog about organizing sass files and talking about