Terminal, Git, npm, Framework with Materialize + SASS Tutorial
Framework tut using the terminal, npm, github, materialize, all while implementing a design with material design components.
Deep knowledge and understanding of the system will come from using this. It's super user level ish yo!
GitHub tools to improve your workflow. Set up a repo to improve the way you store your projects.
Utilize a rad framework that will speed up your development time.
This is for mac
Lets learn how to fire up the terminal and navigate around that.
Cmd + spacebar type in terminal and hit enter
File structure - you start out at x location and you need to navigate to where you want to create your project folder.
When you launch terminal it starts you in macintosh HD > Users > YourName So we need to navigate to where you would like to put your project folder. There’s some basic terminal commands that we should discuss.
ls shows a list of what is in the directory
mkdir creates a new directory
cd changes the directory so you can move around the computer
mv is for moving a file around
rm deletes
ctrl + c exits the process
So now we wanna move up to the Applications(there are two so make sure you go up two folders) folder.
Type in cd .. and hit enter(push enter to execute the commands) to move jump up a folder.
Type in ls it should list
Applications
Creative Cloud Files
Desktop
Documents
Downloads
type cd .. again to go up to the location you want to put your project.
It's gonna need to go into the spot with your local host projects. If you need to get a local server on your laptop so download and install this one. MAMP Then install it. Now navigate to the Mamp folder inside of the applications folder.
Do this by hitting cd mamp/htdocs
Let's create the location for the project. Type mkdir frameworkStarter
In that folder you just created type git init
Now we are cloning the the github repo!!! Type into the terminal
git clone https://github.com/mushel/materialize101.git
There's gonna be all the files from that repo that will appear in the directory
Start mamp double click on the icon or start it by hitting command spacebar and typing in mamp and enter then hit start servers button. Now you can navigate to the page with the repo we just cloned in your browser.
Navigate to your localhost localhost:8888/frameworkstarter
Here is the npm page that we are gonna snag off github
npmjs materialize
Install Sass to really get saucy with yah css preposing.
Run the command
npm init
You will be prompted to answer several questions about your project, after which npm will generate a package.json file in your folder.
Then run this to install the npm for sass
npm install node-sass
Pop that file open and insert this code to the "scripts section". * Add a comma at the end of the test line too.
"scss": "node-sass --watch sass -o css"
Then just run this code and change a sass file to see things happen
npm run scss
