Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zoxon/gulp-front

Frontend boilerplate and framework based on gulp, pug, stylus and babel
https://github.com/zoxon/gulp-front

boilerplate component-library css-framework frontend hacktoberfest

Last synced: 9 days ago
JSON representation

Frontend boilerplate and framework based on gulp, pug, stylus and babel

Host: GitHub
URL: https://github.com/zoxon/gulp-front
Owner: zoxon
License: mit
Created: 2014-03-10T12:04:22.000Z (over 10 years ago)
Default Branch: master
Last Pushed: 2022-12-08T00:55:30.000Z (almost 2 years ago)
Last Synced: 2024-04-14T13:11:17.705Z (7 months ago)
Topics: boilerplate, component-library, css-framework, frontend, hacktoberfest
Language: Pug
Homepage: https://zoxon.github.io/gulp-front
Size: 18.7 MB
Stars: 262
Watchers: 28
Forks: 58
Open Issues: 12
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-starred-test - zoxon/gulp-front - Frontend boilerplate and framework based on gulp, pug, stylus and babel (Pug)

README

        # Gulp Front

_A lean and powerful, gulp-based boilerplate for better front-end coding with [Gulp](http://gulpjs.com/), [Pug](https://pugjs.org/) and [Stylus](http://stylus-lang.com/)_

[![Build Status](https://travis-ci.org/zoxon/gulp-front.svg?branch=master)](https://travis-ci.org/zoxon/gulp-front/builds)

[![GitHub issues](https://img.shields.io/github/issues/zoxon/gulp-front.svg?style=flat)](https://github.com/zoxon/gulp-front/issues)

[![GitHub forks](https://img.shields.io/github/forks/zoxon/gulp-front.svg?style=flat)](https://github.com/zoxon/gulp-front/network)

[![GitHub stars](https://img.shields.io/github/stars/zoxon/gulp-front.svg?style=flat)](https://github.com/zoxon/gulp-front/stargazers)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://github.com/zoxon/gulp-front/blob/master/LICENSE)

[![Join the chat at https://t.me/gulpfront](https://img.shields.io/badge/Telegram-join%20chat-0088cc.svg?style=flat)](https://t.me/gulpfront)

[![Join the chat at https://gitter.im/zoxon/gulp-front](https://img.shields.io/badge/gitter-join%20chat-green.svg?style=flat)](https://gitter.im/zoxon/gulp-front?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

## Demo

[zoxon.github.io/gulp-front](http://zoxon.github.io/gulp-front/)

## Documentation

More information see in [docs](docs/README.md) folder

## Core features

- Modern and fast build tool

- Module based BEM CSS framework

- Automatic icon system based on SVG Symbols

- Easy PNG Sprites generation (including @2x)

- A convenient @media mixins

- Smart image compression

## Quickstart

1.  Install the [node.js](https://nodejs.org)

2.  Clone the project or [download](https://github.com/zoxon/gulp-front/archive/master.zip) the file

    ```sh

    git clone [email protected]:zoxon/gulp-front.git --depth 1 my-project

    ```

3.  Go to project folder and run

    ```bash

    npm run setup

    ```

4.  Start dev server

    ```bash

    npm start

    ```

5.  In browser open page with address [`http://localhost:3000/`](http://localhost:3000/)

## Main tasks

- `npm run dev` - launches watchers and server

- `npm run build` - compile a project

- `npm run zip` - compile a project in zip

- `npm run deploy` - compile a project and push in `build` branch to git repository

- `npm run cleanup` - remove demo app

## Module generator

Create empty module by name in `source/modules` folder

By default generate only `*.pug` and `*.styl` files.

You can call `npm run new` with additional params like `js` and `yml`

```sh

npm run new  [js || yml]

```

## License

[The MIT License (MIT)](LICENSE)