All Projects โ†’ Errec โ†’ Pug Sass Boilerplate Starter Kit

Errec / Pug Sass Boilerplate Starter Kit

A Front-end template for building web apps or sites using Pug(Jade) and Sass

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Pug Sass Boilerplate Starter Kit

Compile Hero
๐Ÿ”ฐVisual Studio Code Extension For Compiling Language
Stars: โœญ 169 (+83.7%)
Mutual labels:  gulp, sass, pug, jade
Gulp Pure Start
Start your project with 'Gulp Pure Start' easily than ever!
Stars: โœญ 89 (-3.26%)
Mutual labels:  gulp, task-runner, sass, pug
Gulp Pug Starter
Frontend development with pleasure. Pug + SCSS version
Stars: โœญ 228 (+147.83%)
Mutual labels:  gulp, development-environment, sass, pug
web-generator
๐Ÿ‘‘ Gulp based task runner which creates HTML output from Pug HTML templates
Stars: โœญ 13 (-85.87%)
Mutual labels:  gulp, pug, jade
Bootstrap 4 Boilerplate
Bootstrap 4.3.1 boilerplate with Browsersync, Sass and Gulp.js
Stars: โœญ 155 (+68.48%)
Mutual labels:  gulp, boilerplate, sass
Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Stars: โœญ 134 (+45.65%)
Mutual labels:  gulp, sass, pug
Portfolio one Page Template
Free responsive one page portfolio template
Stars: โœญ 106 (+15.22%)
Mutual labels:  gulp, sass, pug
Pug Starter
Simple pug (jade) starter [framework] enabling faster delivery of HTML & CSS projects to a private server and/or automatic deployment of GitHub pages.
Stars: โœญ 328 (+256.52%)
Mutual labels:  development-environment, sass, pug
generator-vintage-frontend
Modern front-end workflow
Stars: โœญ 15 (-83.7%)
Mutual labels:  gulp, pug, jade
Gulp Scss Starter
Frontend development with pleasure. SCSS version
Stars: โœญ 339 (+268.48%)
Mutual labels:  gulp, development-environment, sass
Sassy Starter
๐ŸŽ‰ Sassy starter - HTML / SCSS (SMACSS)
Stars: โœญ 740 (+704.35%)
Mutual labels:  gulp, boilerplate, sass
Glup
Some of the gulp tutorial -ใ€Šgulp็ฌ”่ฎฐใ€‹
Stars: โœญ 136 (+47.83%)
Mutual labels:  gulp, sass, jade
Fastshell
Fiercely quick front-end boilerplate and workflows, HTML5, Gulp, Sass
Stars: โœญ 563 (+511.96%)
Mutual labels:  gulp, boilerplate, sass
Gmdjs
Grid Material Design
Stars: โœญ 24 (-73.91%)
Mutual labels:  gulp, sass, pug
Remark Boilerplate
A boilerplate to create presentations using remark, Gulp, Stylus and more.
Stars: โœญ 41 (-55.43%)
Mutual labels:  gulp, boilerplate, jade
Kratos Boilerplate
๐Ÿ”ฅ A simple boilerplate for creating statics PWA using Webpack, Pug, PostCSS and CSS Modules
Stars: โœญ 308 (+234.78%)
Mutual labels:  boilerplate, sass, pug
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: โœญ 102 (+10.87%)
Mutual labels:  gulp, boilerplate, sass
Bootstrap 4 Sass Gulp 4 Boilerplate
A Bootstrap 4.5.2 boilerplate with font-awesome, sass, gulp 4 tasks
Stars: โœญ 103 (+11.96%)
Mutual labels:  gulp, boilerplate, sass
Laravel Vue Boilerplate
๐Ÿ˜ A Laravel 6 SPA boilerplate with a users CRUD using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass, and Pug.
Stars: โœญ 472 (+413.04%)
Mutual labels:  boilerplate, sass, pug
Gulp Boilerplate
A boilerplate for building web projects with Gulp.js.
Stars: โœญ 840 (+813.04%)
Mutual labels:  gulp, boilerplate, sass

Pug-Sass Boilerplate Starter Kit

Pug-Sass Boilerplate Starter Kit is a Front-end web kit and boilerplate for building web apps or small sites using Pug(Jade) and Sass

Inspiration

This project is based on a simple and fast workflow focused mainly on the front-end task. It gives a solid starting point for newcomers who wants a ready-to-deploy local environment setup. The sources used to build this project includes:

Features

  • Pug-Sass ready.
  • Easy to deploy your production files
  • Performance optimization: minify and concatenate JavaScript, CSS, HTML and images
  • Live browser reloading with BrowserSync
  • Includes:

Requirements

Optionals

Getting Started

After Node.js, npm, Gulp and Bower(optional) installation, you can create a new project based on pug-sass-boilerplate-starter-kit by doing the following:

Install From Source

First, clone the project:

$ git clone https://github.com/Errec/pug-sass-boilerplate-starter-kit.git <my-project-name>

Initialize npm on <my-project-name> directory

$ cd <my-project-name>
$ npm init

Install Gulp locally

$ sudo npm install gulp --save-dev

Finally, install Gulp required dependencies

$ sudo npm install gulp-uglify browser-sync gulp-plumber gulp-autoprefixer gulp-sass gulp-pug gulp-imagemin gulp-cache gulp-clean-css gulp-sourcemaps gulp-concat beeper gulp-util gulp-rename gulp-notify --save-dev

get start demo gif

Optionally, if you want to add external components and libraries, initialize Bower and install the dependencies to be used in your next project (e.g.: jQuery, Bootstrap, Modernizer).

$ bower init
$ bower install jquery --save
$ bower install bootstrap --save

Running Your Local Server With Gulp

After the installation of all requirements and its dependencies, your local web development environment is ready to run. Setup your initial files with gulp setup. This command is only necessary the first time the project is set or if the build folder is deleted.

$ gulp setup

Now run your local server using the watch task

$ gulp watch

This task will open the browser window usually with the URL http://localhost:3000/. Any saved changes made to the project files, will reload automatically the browser.

gulp task demo gif

Project Structure

The structure presented in this boilerplate is grouped primarily by folder content and file type. Please note that this structure is only meant to serve as a guide, it is by no means prescriptive.

.
โ”œโ”€โ”€ build/                      # Store processed/minified files - your project's deployable output
โ”œโ”€โ”€ img/                        # Main folder for image files
โ”œโ”€โ”€ js/                         # Main folder for JS files
โ”‚   โ”œโ”€โ”€ vendor/                 # Store third part library files (e.g.: jquery, bootstrap)
โ”‚   โ””โ”€โ”€ main.js                 # Index JS code goes here
โ”œโ”€โ”€ styles/                     # Main folder for cascade style files
โ”‚   โ”œโ”€โ”€ modules/                # Store third party modules and initializers (e.g.: normalize, reset)
โ”‚   โ”œโ”€โ”€ variables/              # Store sass variables files
โ”‚   โ””โ”€โ”€ main.scss               # Index Sass goes here
โ”œโ”€โ”€ templates/                  # Main folder for pug template files
โ”œโ”€โ”€ .bowerrc                    # Change bower library destination path from its default
โ”œโ”€โ”€ gulpfile.js                 # Setup Gulp tasks
โ””โ”€โ”€ index.pug                   # Index pug markup goes here

The build/ Contents

.
โ”œโ”€โ”€ build/
    โ”œโ”€โ”€ img/                    # Contains the compressed and optimized image files
    โ”œโ”€โ”€ css/                    # Contains the concatenated/minified .css files and .map files
    โ”œโ”€โ”€ js/                     # Contains the concatenated/minified/uglyfied .js files and .map files
    โ”‚   โ””โ”€โ”€ vendor/             # Store third party libraries
    โ””โ”€โ”€ index.html              # Minified html index file

The Gulp plugins

  • Autoprefixer : Write CSS rules without vendor prefixes.
  • beeper : Beeps when an error happens.
  • BrowserSync : Keep multiple browsers in sync after file save.
  • cache : Keeps an in-memory cache of files images so only changed images are compressed with Imagemin plugin.
  • clean-css : CSS optimizer and minifier.
  • concat : Concatenates .js files into bundle.js.
  • imagemin : Minify PNG, JPEG, GIF and SVG images.
  • notify : Send error messages to Mac Notification Center, Linux notifications or Windows >= 8.
  • plumber : Prevent pipe breaking caused by errors from gulp plugins.
  • Pug : Compile your Pug templates into HTML.
  • rename : Rename minified files adding .min suffix.
  • SASS : Compile your SASS or SCSS into CSS.
  • sourcemaps : Create CSS and JavaScript map files to debug the code within compressed files.
  • uglify : Minify JavaScript files.
  • gutil : Log the error message with red highlighting for easier reading.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].