Streamline your landing page design

Designing a landing page can be a 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

  • npm install gulp-cli -g
  • git clone https://github.com/napuzba/scss-builder.git
  • cd scss-builder
  • npm install
  • gulp
  • 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