generator-cdd
v3.2.5
Published
Yeoman generator
Downloads
50
Readme
CDD Generator v3.2.5
Features
A basic gulp build-kit, including our in-house scss starter template, based on the generator-gulp-webapp
Same features as generator-gulp-webapp:
- CSS Autoprefixing
- BrowserSync
- libsass
- jslint
- Image optimization
- Bower
- pixrem for automatic rem -> px fallback!
The SASS base kit
Our in-house SASS base kit should be used as a base for all projects. It's been developed through a lot of iterations, currently structured like this:
- core - Contains a base set of partials that will be part of every project. These include the grid system, normalise, layout and helper classes/functions
- Foundation - This lays on top of core, adding project specific modifiers and config files containing project-wide variables.
- modules - This holds the projects modules. These are independent and reusable chunks of code that can be reused throughout the project and other projects.
- vendor - External libraries
For a full description on how to use this setup, check out our (Front-End Guidelines)[https://github.com/cddnation/FED-Guidelines]
SASS Folder Structure
styles/
|- main.scss ________________________________ # SCSS Imports for (projectName)
|- _inbox.scss ______________________________ # Inbox (shame file)
styles\vendor/
|- _external.scss ___________________________ # External styles
styles\modules/
|- _module.scss _____________________________ # Example module
styles\mixins/
|- _breakpoints.scss ________________________ # Responsive breakpoints.
|- _typography.scss _________________________ # Typography mixins
|- _utilities.scss __________________________ # General helper mixins
styles\foundation/
|- _attributes.scss _________________________ # Global Attribute Modifiers
|- _base.scss _______________________________ # Base-level tags
|- _config.scss _____________________________ # Global Settings
|- _fonts_.scss _____________________________ # Global Font loader
styles\core/
|- _grid.scss _______________________________ # CSSWizandry grids
|- _helpers.scss ____________________________ # Helpers (placeholders)
|- _normalise.scss __________________________ # normalize.css v3.0.0 | MIT License | git.io/normalize
|- _print.scss ______________________________ # Print media styles
Getting Started
(First time only): To use this generator, run the following:
npm install -g generator-cdd
Then, start the generator with yo:
yo cdd
The generator will ask you a few questions about common libraries to include. It has also got a perch setting, which alters where the bower includes gets injected in the gulp task.
If you get any errors, you might have to re-run npm install with sudo!
Subgenerators
When writing your sass module, simply use the following subgenerator to generate a either a sass module or a js module in the appropriate /modules folder. This will be named for you, and sass partials will be injected into the loader main.scss.
yo cdd:module
Developing
When you start the build you need to tell gulp-pixrem the base font size, so that it can automatically generate px fallback values for <IE8. Look for the pixrem task and update to match your base font size.
Once this is done, use the following commands when developing:
- Run
gulp serve
to preview and watch for changes - Run
bower install --save <package>
to install frontend packages using Bower - Run
gulp
to minify and build your application into the /dist folder
Generate Documentation:
The generator comes with frontend-md bundled.
- Run
frontend-md
to create aFRONTEND.md
file with the folder structure and documentation from your js and scss files. Check their (github)[https://github.com/animade/frontend-md] for more information.
License
MIT