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

Removed

• [data] Removed example.json. Finally there won't be need to delete it every time new project bootstrapped with Kotsu.

Added

• [grunt] Added .o-show-grid to exceptions in uncss task.
• [templates] Added ability to specify specific for page themeColor via themeColor in Gray Matter.

Changed

• [ci] Switched to alpine linux distribution as base layer for nginx container.

• [package] Updated dependencies.

• [package] Moved linting and testing dependencies to devDependencies.

• [misc] Upated Stylelint scss rules to 1.4.1.

• [styles] Updated Ekzo to 2.4.0

• [styles] Since Ekzo 2.4.0 doesn't provide spacing for icons and sprites any more, added them to Kotsu in form of .Icon--left and .Icon--right.

• [styles] Renamed _Icons.scss to _Icon.scss.

• [styles] Since Ekzo 2.4.0 also doesn't provide .o-btn size variations and default paddings for buttons, added them in form of .Btn* component.

• [styles] .Btn by default extends .o-btn.

• [styles] Followed Ekzo changes:

  • Set settings, which shouldn't generate CSS properties, to null;
  • Converted $ekzo-line-height to $ekzo-line-heights map and using new ekzo-line-height() to retrieve values from it;
  • Added .o-svg-icon to imports.

• [templates] Used new .Btn* instead of .o-btn* and .Icon* instead of .o-icon*.