Frontend Base | HTML5, SASS & Gulp
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
gulp
src
system
.editorconfig
.gitattributes
.gitignore
README.md
fonts.list
gulpfile.js
package-lock.json
package.json
scss-lint.yml

README.md

[phoenixBase - a Frontend Boilerplate]

  • NPM
  • Gulp Tasks
  • Build Config (TYPO3 and WordPress Examples includes)
  • SASS Base

Feel free creating issues for bugs and wishes.

Table of contents

Quick start

  • clone or download the repo
  • install editorconfig in your ide (if you want use it - plugins aviable for phpstorm, coda and a lot more)
  • install packages with npm and run building task in gulp
npm install
gulp build
  • now you can start developing with
gulp watch

What's included

a lot

Dokumentation

NPM and GULP

you need install node/npm and gulp

SCSS Lint

if you want use scss-lint install it

gem install scss_lint
or
sudo gem install scss_lint

gulp task for scss-lint

gulp scss-lint

SCSS-Lint Doku https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md

Webfonts

You can use Google Fonts with JS webfontloader, or store webfonts in a "fonts" dir

SVG USe

.class {
	&:before {
		@include sprite(twitter);
		content: '';
		float: left;
		margin-right: 0.5em;
	}

	&:hover {
		&:before {
			@include sprite(twitterHover, bg);
		}
	}
}

ToDo

http://zellwk.com/blog/nunjucks-with-gulp/
https://www.npmjs.com/package/gulp-svgstore
https://github.com/addyosmani/critical

Creator

Rene Kreupl

Credits and Thanks to

Copyright and license

Code and documentation copyright 2018 Rene Kreupl,
Code released under the MIT license. Docs released under Creative Commons.