Designing a landing page can be cumbersome process. Each time you change your css, images and html - you should refresh your browser and check how the page is displayed in several resolutions. The scss-builder allows you to streamline the design process.
See in action
Under the hood
scss-builder use gulp. gulp is known for its ability to automate and enhance your workflow which otherwise will be error-prone and time consuming. Running the gulp command inside scss-builder directory will open the default browser and serve app/index.html file. When you change any file in the app directory and save it, the page will be reloaded in the browser automatically after the following steps:
- The app/main.scss will be preprocessed with sass
- The images under app/img will be optimized and reduced in size
npm install gulp-cli -g
git clone https://github.com/napuzba/scss-builder.git
- The browser should open with the contents of app/index.html located in app directory.
- Design your page. Every time you change the files in app - the page should automatically refreshed.
- After you are satisfied with the results, use the files under dist directory