New Programs Makers

    generator-timewarp

    1.0.4 • Public • Published

    TIMEWARP

    A simple, mobile-first COMPASS boilerplate for single page web apps.

    SCSS folder

    _core.scss Is the place where to put variables declarations (colors, spacings, widths) and typography stuff (fonts imports, font variables, etc). You will also find a ready to use set of useful mixins.

    Sass variables naming convention

    color- is the prefix for colors variables. font- is the prefix for fonts variables. spacing- is the prefix for spacings variables (margin, paddings). width- is the prefix for width variables. height- is the prefix for height variables. lineHeight- is the prefix for line height variables.

    Resetting styles

    Timewarp comes with normalize and Meyer's reset. Choose you own, including it into style.scss.

    style.scss No style in there, just imports. If you want to change something, edit the corresponding _layout.wathever.scss file.

    Mobile first

    The css architecture is splitted into common breakpoints to help you in responsive development. Starting with baseline shared styles (_layout.common.scss) and introducing more advanced layout rules when screen size permits keeps code simpler, smaller and more maintainable. That's why you will find files for common breakpoints: 1240up for large screens, 1030up for regular desktop screens, 768up for tablets and small laptops, 481up for phablets.

    JS folder

    Files naming convention

    app. is the prefix for your app core files. lib. is the prefix for external libraries and dependencies (ex. angular, jquery, etc). plugin. is the prefix for jquery plugins.

    Javascript included files

    app.controller.js angularjs app boilerplate. app.main.js should contain jquery and presentational stuff. plugin.boilerplate.js a jquery plugin boilerplate. lib.analytics.js google analytics, just set the GA code.

    Grunt

    Time warp comes with grunt to minify, concat, than uglify your scripts.

    Compass

    Time warp comes with compass to help you styling things faster.

    Install

    npm i generator-timewarp

    DownloadsWeekly Downloads

    0

    Version

    1.0.4

    License

    MIT

    Last publish

    Collaborators

    • mcarella