tiagoporto / generator-swill-boilerplate Goto Github PK

:beer: The front-end Boilerplate that you need to start easily customizable multi-device development.

Home Page: https://tiagoporto.github.io/swill-boilerplate

JavaScript 57.35% HTML 5.60% CSS 37.05%

boilerplate generator yeoman-generator css stylus sass yeoman generates-sprites swill-boilerplate javascript html-validation handlebars es2015 es2016 es2017 gulp eslint gh-pages unit-testing autoprefixer

generator-swill-boilerplate's Introduction

Swill Boilerplate Generator

LIKED ? Leave a ⭐ : 😞

Yeoman generator for Swill Boilerplate

Features

Cleans the assets (build, images, CSS, JS) in the project to maintain the directory organization
Compresses Images
Generates Sprites with .png
Generates Sprites with .svg and a .png to fallback
Analyzes CSS with CSS Lint
Prefixes CSS with Autoprefixer
Compiles Sass or Stylus (Catches Stylus errors and shows them directly on the page, as in Sass)
Combines matching media queries into one
Concatenates and minifies scripts
Analyzes JavaScript with ESLint
Compiles ES2015, ES2016 and ES2017
Validates HTML
Notifies when tasks are complete
Monitors changes in the files and reloads the browser with BrowserSync
Uses Jasmine & Karma to test JavaScript
Builds the project compressing HTML, CSS and JS
Pushes the build folder to gh-pages branch
Uses JavaScript Standard Style

Installation

If you have [email protected] or highest

npx -p yo -p generator-swill-boilerplate yo swill-boilerplate

If lower [email protected]

npm install -g yo generator-swill-boilerplate

Then generate your new project:

yo swill-boilerplate

Docs

Swill Boilerplate

generator-swill-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

megakote rafaelicobr yanmagale lucasmaiaesilva friendsandcompany rajibmitra kamalawasthi bituka berniechiu niblongbiesconnor jarleborn mindjuice vijayakrishnnacs adrendon albsugy gugacavalieri

generator-swill-boilerplate's Issues

Change bower dependencies -> npm

Comments in minified css

Keep important comments in minified css.

Bower packages

Analyze the separation of CSS of the bower packages and include in html.

Suggested improvements in Sass

Hi @tiagoporto, I want to help you with some improvements in your Sass functions and helpers.

I forked your project already and I'll create a PR with my suggestions but I've a doubt:

Why are you using both sass extensions? I refer to sass and scss extensions in the same project

It's better to choose one and keep it.

Add option to add service worker

Option to update old project using swill boilerplate

Default values and valid default code

If, during setup, the user does not populate an option and instead hits "Enter" then values should fall-back to default values, e.g. page title to "untitled", logo anchor href to "http://www.somewhere.com" etc.

The provided HTML, CSS and JavaScript should validate according to the installed rules.

Vertical rhythm

Implement vertical rhythm

Suggested improvements in Sass

Hi @tiagoporto, I want to help you with some improvements in your Sass functions and helpers.

I forked your project already and I'll create a PR with my suggestions but I've a doubt:

Why are you using both sass extensions? I refer to sass and scss extensions in the same project

It's better to choose one and keep it.

Which one you'll prefer to use?

Notify

Verify all notifications

update es2015 to es2017

Add gulp-merge-media-queries

Sprite recompiling

Hi, could you test this template with two .scss files?

failed to locate @import file

Followed instructions, installed Node modules and Bower libraries, then:

`
Daniels-MacBook-Pro:swill-boilerplate [username] $ gulp --compile
[19:13:57] Using gulpfile ~/GitHub/swill-boilerplate/gulpfile.js
[19:13:57] Starting 'default'...
[19:13:57] Starting 'clean'...
[19:13:57] Finished 'default' after 13 ms
[19:13:57] Finished 'clean' after 32 ms
[19:13:57] Starting 'handlebars'...
[19:13:57] Starting 'images'...
[19:14:04] Starting 'bitmap-sprite'...
[19:14:04] Starting 'vetor-sprite'...
[19:14:04] Starting 'styles-helpers'...
[19:14:04] Starting 'vendor-scripts'...
[19:14:05] Finished 'bitmap-sprite' after 1.72 s
[19:14:05] Finished 'vetor-sprite' after 1.7 s
[19:14:05] gulp-imagemin: Minified 0 images
[19:14:05] Finished 'styles-helpers' after 1.72 s
[19:14:06] Finished 'vendor-scripts' after 1.18 s
[19:14:06] Finished 'handlebars' after 8.57 s
[19:14:06] gulp-imagemin: Minified 4 images (saved 312.38 kB - 94.3%)
[19:14:06] Finished 'images' after 9.16 s
[19:14:06] Starting 'svg2png'...
[19:14:06] Finished 'svg2png' after 5.77 ms
[19:14:06] Starting 'svg-inline'...
[19:14:06] Finished 'svg-inline' after 11 μs
[19:14:06] Starting 'styles'...
/Users/ [username] /GitHub/swill-boilerplate/src/stylesheets/stylus/styles.styl:17:9
13| // Vendors
14| // @import "../../public/bower_components/"
15|
16| // Vertical Rhythm module from Compass ported to Stylus
17| @import "../vendors/vertical-rhythm-port-from-compass/_vertical-rhythm"
---------------^
18|
19|
20| /*! ==================================================================

failed to locate @import file ../vendors/vertical-rhythm-port-from-compass/_vertical-rhythm.styl

[19:14:19] Finished 'styles' after 13 s
[19:14:19] Starting 'scripts'...
[19:14:33] Finished 'scripts' after 13 s
[19:14:33] Starting 'serve'...
[19:14:33] Finished 'serve' after 601 ms
[BrowserSync] Access URLs:

   Local: http://localhost:3000
External: http://192.168.0.2:3000

      UI: http://localhost:3001

UI External: http://192.168.0.2:3001

[BrowserSync] Serving files from: public/
`