Skip to content

p3yman/frontier

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 

πŸš€ Frontier

A starter for front-end projects with gulp

This is a workflow for front-end and ui projects. Works done with this workflow is:

  • Sass: Watch, compile, add source maps, autoprefix, minify, csscomb and rtl
  • HTML: Use partials, conditions and loops using gulp-file-include
  • JS: Concat, uglify and minify js files with seperation of vendor and libraries files.
  • Images: Compression
  • Fonts: Copy
  • Build: Backup source, zip and clear dist

Packages used:

  • gulp-csscomb has a config file that is placed in route folder called .csscomb.json. You can change it's configs using it's own documentations.

Install

  • Make sure you have these installed
  • Clone this repository using git clone https://github.com/peyman3d/frontier.git FOLDERNAME
  • CD to the folder cd FOLDERNAME
  • Run npm install to install the node.js dependencies
  • Run gulp to start gulp workflow watchers

Folder structure

I tried to make folder structure as simple as it can and it's like this:

project
└── src
    β”œβ”€β”€ fonts
    β”œβ”€β”€ html
    β”‚   β”œβ”€β”€ elements // for elements like post-item.html
    β”‚   β”œβ”€β”€ partials // for partials like header.html or sidebar.html
    β”œβ”€β”€ images
    β”œβ”€β”€ js
        β”œβ”€β”€ vendor // for external plugins like jquery
        β”œβ”€β”€ lib // for project js files
    └── sass // for sass files. you can set inner structure as you want

About

πŸš€ A workflow for front-end projects with gulp

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published