Skip to content

j10ra/front-end-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

front-end-template

What is this?

This is a propsed templating system which will help FEDs get started on a project to maintain best practices and standards accross the team.

The template is pre built with foundation framework - I would recommend this as the framework is built and integrates well with scss

Structure

.
├── app
|  └── assets
|  |    ├── fonts
|  |    ├── images
|  |    ├── js
|  |    └── scss
|  |        └── _app
|  |        ├── _foundation
|  |        └── main.scss
|  ├── data
|  ├── layouts
|  ├── pages
|  └── partials
├── build (will be generated when running grunt)
├── Gruntfile.js
├── package.json
├── bower.json

Build your project in app/ folder
data/ : you can place json files here and use it in your pages for content population
pages/ : this is where you build your pages
partials/ : partials can be a header or footer for multiple layout styles and can also be modules
layouts/ : serves as your primary layout, each of the pages located in pages/ folder is inserted here

Dependencies

Skip this if you already have them

  • Download and install node.js on your machine.
  • Open your terminal or command line type node or npm to check if node.js is successfully installed.
    If not found, create the path stated in the error (this is for windows)
  • Using the command line, install Grunt: Type npm install -g grunt-cli - this will install grunt on your machine and be globally available
  • Download and install ruby on your machine
  • Restart your terminal or command line and type in gem to check if ruby is successfully installed
  • Install Compass via gem: Type gem install compass
  • Your now set up!

Running FED template

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a gruntfile.js as well as install and use Grunt plugins. Once you're familiar with that process, you may run the template using the pre built grunt tasks below

Go to the root directory where the template is forked or cloned

  • Right click on the directory and Git Bash here or use terminal or cmd
  • npm install to install node modules from the package.json, see package.json for dependencies
  • bower install to install packages from bower.json, see bower.json for dependencies
Grunt Tasks
Grunt Task Description
Default
$ grunt
assemble:site Compiles handlebar files (layout, partial, pages)
compass:dev Compiles scss files
jshint Helps to detect errors and potential problems in js code
connect:livereload Automatically reloads the page on update
copy Copy files automatically
watch Updates files on save
Build
$ grunt build
assemble:site Compiles handlebar files (layout, partial, pages)
compass:build Compiles scss files - minified
jshint Helps to detect errors and potential problems in js code
uglify Concatinates, combine and minify js files
copy Copy files automatically
pngmin Optimize png for smaller size
combine_mq Combine matching media queries into one media query definition

Note: Update and or edit everything on the app folder - all action is in here while build folder contains all the compiled HTML and assets

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published