ACE is a system for creating and maintaining Frontend projects. It builds on the ideas forwarded by Brad Frost where instead of designing pages, we design and develop a system of components.
This system has 2 main elements. The boilerplate, which consists of a Grunt based project, and a component generator, both of which are managed by Yeoman.
- Download the zip.
- Extract the downloaded zip
cd
into thegenerator-ace
directory- Run
npm install -g
- cd into the working directory of your project
- Run
yo ace
and follow the instructions
This task initialises the directory with the main boilerplate. You will be asked 4 questions:
- Do you want to init this directory with ACE (Y/n)
- Sweet! What identifier should we use for your app? (e.g. my-atomic-website) This is the name of your project in the package.json file
- Are you using Git? This will add a base gitignore
- Do you want your name and email to be placed in the header of all of the compoenents you create? This is useful in teams and ace will read these details from your gitconfig if present
Now your directory has the ACE boilerplate you'll want to start creating components.
You can use the same yeoman generator to create components. Just type:
yo ace
ACE knows if the project is an ACE project and decides to run either init or the component generator- Select component type
- Name component
The generator will then create a component in the following folder structure:
| --> /atoms
|--> /_atom_name
| --> _atom_name.jade
| --> _atom_name.js
| --> _atom_name.sass
| --> _demo_atom_name.jade
Pages are a little different to components, ideally these should have minimal CSS and JS, as this should all be performed on the sub-page component level.
yo ace:page
- Name component / page
- Select template type ACE will give you a choice of templates that your page will inherit, this is read from your templates dir
If your component has a dependency you can add it to the ace.json file with the following:
- Type
yo ace:add-dependency
- Select a component to add a dependency to
- Select a dependency type to add to that component
- Select a depedency to add
This will add the dependency to ace.json which is used for exporting, you will currently still need to add the dependency to your component in code.
ACE lets you export compoenents to move them between projects, this means that you can create your own library of ACE components to speed up prototyping and development.
To export with ACE you:
- Type
yo ace:export
- Select a component to export
You'll now find an export directory in the root of your project with the ace component and its dependencies packaged up in a zip.
Included in the init boilerplate is a file named ace.sublime-project
. Opening this file will launch sublime text with a custom file structure and some other small settings. File structure:
| --> /src
| --> /01. Atoms
| --> /02. Molecules
| --> /03. Organisms
| --> /04. Templates
| --> /05. Pages
Check the wiki for more details about ACE
This project is open sourced under the GPL v2 licenses. This means that anyone who distributes this code or a derivative work must make the source available under the same terms.
We welcome pull requests. This project uses nvie's super helpful gitflow branching model; as such please branch your features from develop