Our Goal
Our goal is to create a static web page set up, working with SCSS. There are some dependencies to compile the SCSS to CSS, starting a local server and also browser live reload. Here is the boilerplate to automate all this process in simple steps. It also includes documentation for some mixins. Which made you easy to play with mixins.
System Requirements
For using this service, your machine needs to have Node.js and Gulp pre-installed. If you did didn't have those please find the installation method. This is used to compile the SCSS, livereload and also for starting local server.
Note: You just need to install Node.js and Gulp, no need to create a project.
Documentation
Project manual setup
-
Open terminal
-
Navigate to the project folder in terminal
cd your-project-folder-path -
Clone the repository
git clone https://github.com/swasatz/static-site.git -
Move the contents from the cloned folder to parent
- For Mac users:
mv static-site/* . - For Windows user follow the given steps:
- Move to the static folder
cd static-site - Run
move *.* .. - Then run
for /r . %a in (.) do @move %a ..
- Move to the static folder
- For Mac users:
-
Remove the empty cloned folder
rm -rf static-site -
Install all dependencies
npm install -
To compile SCSS to CSS run
gulp scss, to watch each and every change in files(HTML, CSS, js) rungulp watch -
To start local server run
gulp serve
That's it you are all set, open http://localhost:3000/ in the browser. If any changes are done in the code, the browser automatically reloads and update the latest changes.
(or) use shorthand method to avoid too much terminal commands (only for mac users)
- Follow first two points
- Run the given script in the terminal
git clone https://github.com/swasatz/static-site.git && mv static-site/* . && rm -rf static-site && npm install && gulp watch & gulp serve
👏 you are all set... open http://localhost:3000/ in the browser to view the page.
Mac app
💻 This is only of the Mac users, simply download the mac app and run. Since it needs to access external app(terminal) we need to give permission to allow access(Reference in attachment).
Starting the project for next time, you didn't need to run above app.
- Just navigate to the folder in terminal.
- Run
gulp watch & gulp serve
Reference for mac permission
Mixins
The main purpose of a mixin is to make a set of properties reusable. Like SCSS/SASS variables (where you define your values on a single location), Sass mixins allow you to define properties on a single location.
We have created mixins for most commonly used properties like Button, Background,Prefixer, Media Queries.
You can see the full documentation here.
Licensing
MIT License
Copyright © 2019, Satheesh Kumar S
Organization Mallow Technologies Private Limited
All rights reserved.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Social
You can also find me at:
👉Dribbble👈
👉Codepen👈
👉Stackoverflow👈
👉Medium👈