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

Workflow

  1. npm install gulp-cli -g
  2. git clone https://github.com/napuzba/scss-builder.git
  3. cd scss-builder
  4. npm install
  5. gulp
  6. The browser should open with the contents of app/index.html located in app directory.
  7. Design your page. Every time you change the files in app - the page should automatically refreshed.
  8. After you are satisfied with the results, use the files under dist directory