Prosper Website Front-End
We've created a public trello board if anyone wants to help move this project forward they can assign themselves to a specific task and join the Prosper Community.
Please open all issues with this template on the main Foundation for Sites repo.
This is the official ZURB Template for use with Foundation for Sites. ZURB uses this template to deliver static code to their clients. It has a Gulp-powered build system with these features:
- Handlebars HTML templates with Panini
- Sass compilation and prefixing
- Built-in BrowserSync server
- For production builds:
- CSS compression
- Image compression
To use this template, your computer needs:
This template can be installed with the Foundation CLI, or downloaded and set up manually.
You should be comfortable with the command line interface (CLI). If you're not this tutorial won't help you get started and you'll need to learn how to use the CLI first. It's super easy.
Git clone repo
git clone firstname.lastname@example.org:prosper-community/prosper-website-front-end.git
Change directory into your cloned repo.
npm install(beware of any errors flagged during install).
foundation watch(this should open a new browser tab with the homepage of the website).
You're ready to go! See the Contributing section below.
Any contributions should be made in a new branch named according to the feature / improvement you are adding. Here is an example workflow in the CLI:
First, make sure your master branch is up to date:
git pull origin master
git checkout -b fix-mobile-nav-bug
Make any changes to the source code in the
Add your changes to git
git add .
Commit your changes:
git commit -m 'fixed mobile nav bug by changing width on li element at breakpoint medium; tested on > IE9'
Push your changes to the remote branch:
git push origin fix-mobile-nav-bug
Open up the repository on Github and select 'Submit Pull Request'
Detail the changes you made and mention any contributors for review.
Always let someone else in the Prosper Community review your pull request and merge into master. Never push directly into master or merge your own branches.
File Structures, Styles & Naming Conventions
The basic file structure of the
src folder is as follows:
- img (all images go here)
- js (all scripts go here)
- scss (all styles go here)
- data (you guessed it, your data goes here)
- helpers (reusable Panini helpers here)
- layouts (these are your base page layouts, at the moment there is only one single-column layout
pagescontent is fed into this layout)
- pages (individual pages and thei)
- partials (reusable blocks of html such as
- styleguide (Foundation 6 Template has a Gulp task that dynamically generates a styleguide. Can be customized by editing
Any changes you make should take place in one of the above folders. Don't create any new root-level folders within
scss folder is structured according to the SMACSS convention with one small exception:
03-modules is named as
03-components as to be congruent with Foundation 6's component-based design.
- 01-base (base styles go here:
- 02-layout (layout associated styles (prefixed by
l-) go here:
- 03-components (all of your componentrelated styling should go here and be organized by each component:
- 04-state (all state related styling should go here. Read SMACSS if you don't know what this means)
The CSS selector naming conventions you write should follow BEM. If you find a component that doesn't follow these naming conventions, a pull request would be welcomed to make our codebase more consistent and maintainable.
If you've never followed SMACSS or BEM before, it's a great opportunity to improve your SCSS chops and write cleaner more modular style sheets.
How It Works
If you're curious how all the pieces of the fit together, here's a basic overview:
node_moduleshas all of the development dependencies needed to run all of the Gulp tasks for this template.
gulpfile.js. If you're curious about any one of the tasks, take a look at the gulpfile and read more into Gulp.
- Foundation-CLI acts as a layer of abstraction above gulp to simplify things a bit. When you run
foundation, you're really running
gulp watch. When you run
foundation buildyou're really running
gulp build --production
- Once satisfied with the state of
src, you can run the
foundation buildtask which will compile and minify all your scripts into one script, process and minify all your styles into one stylesheet, and all your pages through the layouts into individual HTML pages. It will also compress your images using gulp-imagemin. It puts everything into a root-level
distfolder which can then be put into the CMS in production.
Front-End & Prosper CMS
All changes to the website should start at this Prosper Website Front-End repo and when everything is good to go built into a
dist folder that can be then extended into the Prosper CMS. If you find an issue with the front-end of the Prosper CMS, please fix it in this front-end repo first and then add it to the CMS. This will keep the two repos consistent and up-to-date.
A basic workflow for this could be:
- Identify bug on the production site
- Fire up the front-end and replicate bug
- Fix bug on the front-end
- Build for production
- Copy necessary files / assets into the Prosper CMS
Copyright (c) 2015-2016 Prosper Community