CDD Generator v2

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
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

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 new sass module in the /modules folder. This will be named for you, and 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

Subgenerators:

• Run yo cdd:module to create a new sass module (you will be asked for the module name)

Generate Documentation:

The generator comes with frontend-md bundled.

• Run frontend-md to create a FRONTEND.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