Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/darktasevski/frontend-starter-kit
A boilerplate for frontend projects powered by Gulp, HTML5 bolierplate, Sass, PostCss and Webpack(for Babel transpiling).
https://github.com/darktasevski/frontend-starter-kit
automation css development-workflow eslint-config frontend gulp gulp-tasks postcss prettier sass scss webpack
Last synced: 3 months ago
JSON representation
A boilerplate for frontend projects powered by Gulp, HTML5 bolierplate, Sass, PostCss and Webpack(for Babel transpiling).
- Host: GitHub
- URL: https://github.com/darktasevski/frontend-starter-kit
- Owner: darktasevski
- License: mit
- Created: 2017-06-30T14:18:32.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-11T19:40:01.000Z (over 6 years ago)
- Last Synced: 2024-05-22T08:07:15.335Z (7 months ago)
- Topics: automation, css, development-workflow, eslint-config, frontend, gulp, gulp-tasks, postcss, prettier, sass, scss, webpack
- Language: CSS
- Homepage:
- Size: 1.94 MB
- Stars: 21
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
This project is bootstraped with
# Frontend Starter Kit
A boilerplate for frontend projects powered by [Gulp](https://github.com/gulpjs/gulp), latest [HTML5 bolierplate](https://github.com/h5bp/html5-boilerplate), [Sass](http://sass-lang.com/), [PostCss](https://github.com/postcss/postcss), [Webpack](https://webpack.js.org/)(for transpiling latest ES6/ES7), and [Eslint](https://eslint.org/) with [AirBnB config](https://github.com/airbnb/javascript) and [Prettier](https://github.com/prettier/prettier).
### Prerequisites
* Small amount of time to setup config :)
* [npm](https://www.npmjs.com/get-npm).
* [Gulp](https://github.com/gulpjs/gulp)
### Installing
After you clone or download this repository, you can kickstart your project just with `npm install` in your terminal. After required packages are downloaded you can start using starter kit, or make changes to folder structure to suit your needs( remove images or icons folder if you are not using any images, or disable some gulp tasks that you don't need for your project etc. etc.)
## Getting Started
### Gulp Tasks
#### gulp watch
The basic usage of Frontend Starter Kit starts with `gulp watch` task, and it's the main gulp task. I usually start with this one first, and I recommend keeping this one turned on while you are working on your code, because it starts [Browsersync](https://www.browsersync.io) server on `localhost://3000` and is syncing with your work everytime it's saved. Depending on what file you've just saved it starts gulp styles or gulp scripts tasks automatically.
**Usage**: just type in terminal `gulp watch` .
#### gulp styles
This task starts CSS processing, which process your code through Sass first, then through a few postcss plugins one by one. Code is being transpiled to CSS supported syntax, vendor prefixes are added for some properties, and a bunch of other things that you can look up in plugins docs.
This is how processing tree looks like:
```javascript
.pipe($.sass().on('error', $.sass.logError))
.pipe($.postcss([
require('postcss-partial-import')({
prefix: '_',
extension: '.css'
}),
require('postcss-assets')({
basePath: 'app',
loadPaths: ['assets/images'],
cachebuster: true
}), // assets url handling -- https://github.com/borodean/postcss-assets
require('postcss-normalize')({ browsers: 'last 2 versions' }),
fontMagician({
hosted: ['./app/assets/fonts']
}), // https://github.com/jonathantneal/postcss-font-magician
require('postcss-cssnext')(), // http://cssnext.io/features/
sorting({
order: [
'custom-properties',
'dollar-variables',
'declarations',
'at-rules',
'rules'
],
'properties-order': 'alphabetical',
'unspecified-properties-position': 'bottom'
}),
require('postcss-reporter')()
]))
```
I'll explain shortly what each of this plugins do.
[postcssurl()](https://github.com/postcss/postcss-url) Allows you to fix url()s according to postcss to and/or from options (rebase to to first if available, otherwise from or process.cwd()).
[postcss-assets](https://github.com/borodean/postcss-assets) Amazing plugin, imo the greatest option is that this allows you to resolve() image file locations instead of writing down exact url, but there are several other interesting features.
[('postcss-normalize')](https://github.com/jonathantneal/postcss-normalize) PostCSS Normalize lets you use the parts of normalize.css you need, based on your project’s browserlist. You can specify which versions of browsers are you going to support in options like this `require('postcss-normalize')({browsers: 'last 2 versions'})`.
[fontMagician](https://github.com/jonathantneal/postcss-font-magician) plugin that magically generates all of your @font-face rules. NOTE: hosted fonts option doesn't seem to work.
[cssnext()](https://github.com/postcss/postcss) PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today. It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support. Really powerfull plugin with long list of [features](http://cssnext.io/features/).
[PostCSS Sorting](https://github.com/hudochenkov/postcss-sorting) PostCSS plugin to keep rules and at-rules content in order.
**Usage:** `gulp styles`
#### gulp scripts
`gulp scripts` task is compiling all javascript files into one main file`( temp/scripts/App.js )` and while on it transpiling all ES6 code to ES5 through Webpack/Babel, so we can use new ES6 syntax in our work and not worry about browser support.
**Usage:** `gulp scripts`
#### gulp modernizr
`gulp modernizr` provides support for older browsers( IE6, IE7.. ) that doesnt support flexbox or other new CSS and Js stuff. This task is started automaticaly each time a js file is saved while in `gulp watch` mode, but it can be started manually with `gulp modernizr` command.
#### gulp build
`gulp build` task triggers building a docs directory in which all files are moved from development to production, CSS/HTML and Js are minified and optimized, images and icons are compressed and new source paths are build in index.html with help of [usemin](https://github.com/zont/gulp-usemin). The docs folder is the folder with files that end user is going to use.
## Contributing
Fork it if you can see a way to improve it or suggest improvenments, PR's are welcome.
## Changelog
* 0.3.2 Cleaned, simplified and restructured Sass files, removed a few plugins and added postcss-sorting.
* 0.3.1 Updated Webpack and several other packages.
* 0.3.0 Improved Sass support and proccessing, added a bunch of default Sass mixins, functions and placeholder variables. Also implemented possibility of using HTML templates.
---
* 0.2.0 Added Sass support, updated dependencies and removed Lost Grid in favor of native CSS Grids
---
* 0.1.5 Added gulp-load-plugins to build, and improved perfomance and startup time of tasks
* 0.1.4 Changed deprecated es-2015 babel preset to babel-preset-env., and added HTML minifier to build.
* 0.1.3 Removed gulp-uglify( problems with minifying ES6 code, and moved to babel-minify.
* 0.1.2 added Font Magician PostCss plugin to bundle.
* 0.1.1 commited initial setup to Github.
## Author
* **Darkø Tasevski** - _Initial work_ - [Puritanic](https://github.com/Puritanic)
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Acknowledgments
* Hat tip to everyone who's code was used!