kotsu

Kotsu

Overview

Clean, opinionated foundation for new projects — to boldly go where no man has gone before.

How to use

1. Clone or download and unpack to desired location
2. Download and install latest version of node.js
3. Install grunt-cli globally: npm install -g grunt-cli
4. Install jspm globally: npm install -g jspm
5. Install GraphicsMagick (recommended) or ImageMagick for your OS. Note: it's mandatory to install one of them before running npm install
6. Set your environment variables [guide]
7. Install project dependencies: npm install
8. (optional) Add your repository to Travis for automatic tests
9. (optional) Set up Continuous Deployment with CircleCI or Werker Docker following our guide
10. Code live with: grunt
11. Build with: grunt build
12. Deploy and enjoy your life

What's inside?

• Reasonable structure for frontend projects
• Static pages generation
• Prepared configs for quick Continuous Deployment and automatic tests setup
• Grunt with pre-configured tasks
• Nunjucks, a full featured templating engine
• In-built Nunjucks globals and filters for formatting numbers, dates, getting current page url, locale, breadcrumb, etc.
• Human readable urls
• HTML5 boilerplate files based on best practices
• i18n with node-gettext
• Sass compiler with source maps generation, autoprefixing, optimization, minification and linting
• Ekzo Sass framework
• jspm with ES6 support, managing and bundling JavaScript dependencies
• standard for linting and automatic formatting JavaScript
• Live reload powered by Browser Sync
• Automatic sitemap.xml generation with grunt-sitemap-xml
• Automatic sprites generation with Spritesmith
• Automatic images compression via TinyPNG
• Automatic responsive images generation with grunt-responsive-images
• Separate not optimized files in development, and
• Compiled and minified files for production

And a lot more under the hood. We just didn't have time to document all features. Yet.

Examples

Deployed version of Kotsu from master branch can be found here.

Note that Examples section so far features only least part of predefined elements and features.

Browsers support

JavaScript

Works in:

IE9+, Edge 12+, Chrome 21+, Firefox 28+, Safari 6.1+, Opera 12.1+, Opera Mobile 12.1+, iOS Safari 7+, Android 4+.

If you need to support advanced ES6 features in IE11 and below like Promise or Objest.assign, uncomment import 'babel-polyfill' in main.js. See details here.

Default build shipped with jQuery 3.1.0+ which doesn't support IE8. Replace it with pre 3.0.0 version if you need support of IE8.

CSS

Default layouts powered by Ekzo, which implies following requirements to fully work:

IE10+, Edge 12+, Chrome 21+, Firefox 28+, Safari 6.1+, Opera 12.1+, Opera Mobile 12.1+, iOS Safari 7.1+, Android 4.4+.

Provides graceful degradation for IE9 and IE8. Details can be found here.

If you don't want support of IE9 and below, remove IE() macro call from base layout.

Outdated Browser message

In IE9 and below will be displayed banner before page content with message that user's browser is outdated and link to Outdated Browser. If you don't want that message to be displayed, remove OutdatedBrowser() macro call.

License

Copyright 2014 LotusTM. Licensed under the Apache 2.0 license.

Changelog

1.3.1

Added

• [ci] Added support for AppVoyer

Changed

• [package] Removed devDependencies section and all packages moved to dependencies section since it's impossible to use kotsu with npm install --production or --only flag, see

Fixed

• [grunt] Updated uncss rules to ignore not only .is-*, but also .*is-*, .*has-* and .*not-*. This allow to use more specific selectors, like .nav-is-active when needed.
• [templates] Fixed Nav component not passing depth to Items caller.