Plately - v 3.0.0
Plately is a starting template I use for front-end web development projects. It uses Gulp so I can quickly start coding with Nunjucks, Sass, Javascript, JSON, and image sprites.
Requirements
This project has a few basic global dependencies to make it.
- Node.js
- Gulp.js, a node task runner for automating common tasks
- NPM (node package manager)
- Bower
- Basic understanding of Nunjucks, Sass, jQuery, etc.
Folder Structure
Folders that are already there:
- app: Where the production version of your project is built
- data: Where all JSON files go that contain needed data for other files
- dist: Where the version of your project built to be shared or distributed goes
- img: Where all image files go, which are converted into a sprite map for quicker reference
- js: For all Javascript files, and must include any needed references to any Javascript dependencies in the components folder
- pages: Nunjucks code that creates the main content for each page. Will need to reference a templates file
- sass: Where all the Sass files go, separated by a folder structure for better organization
- templates: Nunjucks templates that create the HTML code around every page
Folders that are created:
These are created with the commands in the "How to Set Up" section below.
- components: All the external dependencies for the project, such as libraries and frameworks. Can be installed and managed with Bower.
- node_modules: All the npm dependencies that put the project together. Take a long time to install but are vital to creating anything at all with Plately.
Bower Dependencies
- Bourbon: A lightweight library of Sass mixins for extra functionality.
- Susy: A flexible grid tool for responsive layouts
- jQuery: A Javascript library that makes writing it and using it a couple hundred times easier.
How to Set Up
There are several terminal commands to get all the needed dependencies installed and ready to view.
npm install- This install all the node dependencies in the newly created node_modules folder.
bower install- This creates the "components" folder and installs all the components controlled with Bower.
gulp- This is the basic command that refreshes the project in either the app or build folder. The project will automatically run on your local server and open a tab in your default browser.
gulp lint- This is an optional command for spotting errors in the Javascript files, automatically making Javascript syntax corrections, and logging syntax mistakes for Sass files.
Creating the App and Dist projects
Plately is set up so Gulp build the project into the app folder. To have it go into the dist folder with optimized assets, change the prod variable on line 23 on gulpfile.js to false before running the gulp command again. Simply change it back to true to go back to the app folder.