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