NCTP

Theme Building
Let’s start with the introduction to all software you need in your pc before start
building your theme using sass

Node js installation

Node js is an open-source cross-platform on which we run JavaScript application

in real time

You can download the node by using this link given below

https://nodejs.org/en/

After open this link follow the arrow in the image below

After installing node in our pc’s we need npm(node package manager) now what
is npm basically it’s job is to manage the node packages like updating them
deleting some if required or installing some packages you don’t have to download
it separately it can automatically available to you after installing node js
Now as you already now you have power shell or cmd in your system open one of
them and run the command node –v to check the node’s version which you
installed on your system

Here’s the installation of one of the software is completed now let’s go on to the
next one

A Brief Introduction to the Command Line

First of all install Git on your computer as we use git CMD you can download the
current version by open the link below

https://git-scm.com/downloads

Download the latest version for window or Mac

After installation open the git cmd that looks like this

Now let’s start working in git cmd we use this to avoid any error throughout the
theme

As you can see above in git window only the user name or the c drive is shown yet
now by using cmd we try to make folder on our desktop

first of all lets go from our c drive to our system desktop by using cmd to achive
this run this command in the cmd

Now enter and you will go in you desktop

Now you can see above you are in your desktop folder to confirm this enter this
command in the circle which show your directory

as you can see below the list of files or folder present on my system’s desktop
Now the git installation is also complete and next we will work in our git bash

Environment Setup

Before starting our theme development we have to set up the environment in for
our theme in which we work conveniently now as you all have starter folder as we
already shared it with you place this folder on your desktop

Now go inside the starter folder on the desktop by using this command as shown
below
Now you are in your starter folder

You can see I have a folder on the desktop

You can see the inner of your starter by run this command which is underlined
You can see the css img and index file

Here I have not created sass folder yet but it’s not matter you can create it now or
later as you like

Now we are in our starter folder now here in this folder we install some packages
so let’s get started

First package that we install is npm initialize run this command to get started

Press enter to install and it take some time

Now it asked for a package name remember the package name will always be in
small case

Now just press enter to continue installation

In the end you see this message

Type “y” which means yes every this is ok

Now check in your starter folder you will see the package. json file

Now open your starter folder in your vs code and then open json file it have all the
tings you have installed

Now we are going to install sass compiler

Then press enter to continue after which node sass module package is updated in
json file and new folder added in your starter folder that contains lots of files in it
Now the package is installed

Above we learn how to install packages inside a folder now we learn how to create
a folder inside a folder now open your starter folder and then right click and open
git bash inside starter folder now from now you always do this to open git bash

As you can see we are in our starter folder

Here we learn how to make a new folder inside existing folder using commands

Right mk dir sass inside yore git

Then press enter to make it

Now you can see we have folder having name sass inside starter folder
Now we go inside our sass folder and make a file inside it so as you know we are
already in our starter folder to go inside sass folder run command “cd sass”

Now you can see we are in our sass folder

Now we make a file of name main.scss for this we use a command “touch”

You can see now you have a file in your sass folder but you can not right anything
on this file
In this main file as we cannot right anything so we use the concept of import
export as you already learn in sass and less we create multiple files and right code
in them then we import those files in our main file and then execute our main file

Now open your main file using vscode and do some code in it

First of all create a variable in the file

Now use a reset css code

Now we want to make the hole color of our body crimson so we call the variable
we have just created in our body

Now we compile the sass file for this we run a command shown below

But it generate a error to resolve this error make some changes in the script present
inside package.json file
Now again go inside your git and run the command to compile sass but now you
don’t need to rewrite just press upper key to run tha command and press enter

Now your sas file is compiled as you can see in your css folder after compiling
main.css is created and crimson color is shown there

Now go inside your index file where you see the style link just change file name
there that is style.css to main.css. As browser read the index file so all the other
files are lined with index to execute you already know this concept
Now load your index file in the browser and you can see the sass that we applied
on our body
Now you don’t need to compile again just put one more character space –w(watch)
at the end of main .css in script file that you can see below

Now after this just enter npm run compile command one more time and after that
you don’t need to run again now your code will compile automatically

For example make a variable for berder and add border on your body
Now load your browser and see border is automatically applied you don’t need to
compile your sass again

Now we learn how to install a live server using command if your vscode live
server is not working. For this run a command in your starter as you are right now
in your sass folder so use a command cd .. this command is to go one folder back
apply it first

Now install live server here for this run a command as you can see below
Enter this command and the character –g means globally that you can access your
server from any folder

Above you can see over live srerver is installed in case you received error after
installation the error usually generate due to permissions so add seudo before your
command to avoid any error

Now for running liver server write command liver-server add press enter this
command will take you to your live server
As you can see below our both server which we installed using command and the
one we are using before

Project-Settings and Custom Properties

First of all open git bash in the starter folder by right clicking

Here run command to compile sass

After closing git bash again when you open git bash you will have to run this
command again but through out the whole working from now you don’t have to
run this command untile you don’t close the git bash

Now go inside the sass folder and create three files there the purpose to create
these file is to import the whole code in main file

Here you see

Now go inside the main file and remove the whole code you can see below
Now import all three files you just created in your main file

Now go inside _base.scss file where we perform some basic things which we use
throughout our whole theme

First of all we define colors that we use in our whole theme in comment format
Now add universal selector in the same _base file due to which default padding
and margin become 0 throughout the theme
Then add another thing in this file that is box sizing property for all the selectors
and pseudo element

And then add box sizing for html

Due to this if we add padding or margin for some reasons then this will not add in
the height width of the div and our theme become error free

Now add some properties on body

Now define font size of 62.5(1rem = 10px,10px/16px=62.5%)for an html

Now we define some custom properties that we use anywhere in theme these are
actually global variables which we define in our root element (html)

Note:the syntax we use for root is double( --)