Neverending Package Mountain
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


    Yeoman Breakpoint Generator

    The Yeoman Breakpoint generator is an opinionated starting point for responsive Breakpoint projects. It uses Node, Yeoman, Grunt and Bower to scaffold a project, manage dependencies and ready static files for production. It uses RequireJS to structure your Javascript into modules. It uses Bourbon for CSS3 mixins and Modernizr for progressive enhancement. The generator has project defaults for Wordpress or you can have it assume a vanilla setup.

    To learn how to use the Breakpoint grid system please refer to the Breakpoint project's repo.

    Preping Your Computer

    Breakpoint's scaffolding requires Sass 3.2, Node, Yeoman, Grunt, Bower and this generator to be installed on your system.

    Install Sass: $ gem install sass

    Install Node: or from the command line.

    Install Grunt, Yeoman, Bower and the Breakpoint generator...

    $ npm install -g grunt-cli bower yo generator-breakpoint

    Running the Generator

    From the root of your project folder run...

    $ yo breakpoint

    The generator will install the Grunt and Bower configs wherever you run that command. Your HTML, CSS and JS installation can vary depending on the type of backend you are using. The generator defaults the website root to the current directory. If you want your website root to be placed in a subdirectory you can specify it when propted.

    Working with Grunt

    When in development your front end assets will be placed in a 'dev' folder. During development Grunt will compile your Sass and lint your JS. You can have grunt watch your dev folder for changes...

    $ grunt watch

    You can also manually trigger a Sass compile by typing $ grunt.

    When pushing to production, Grunt will compile, concat and minify your front end assets and place them in a new folder called 'static'. Your HTML needs to point to this folder in the production environment. To create a build type...

    $ grunt build

    The easiest way to have your HTML templates switch between development and production versions of your front end assets is to include some logic in your templates. An example of what this looks like is...

    <?php if (WP_DEBUG) : ?>
        <script data-main="/wp-content/themes/mytheme/dev/js/main" src="/wp-content/themes/mytheme/dev/bower_components/requirejs/require.js"></script> 
    <?php else : ?>
        <script data-main="/wp-content/themes/mytheme/static/js/main" src="/wp-content/themes/mytheme/static/js/vendor/require.js"></script> 
    <?php endif; ?>




    npm i generator-breakpoint

    Downloadsweekly downloads








    last publish


    • avatar