Build CSS


Class names that are generated by "Kittn", use the BEM syntax. BEM is one of the easiest ways to write Oriented CSS object. Surely you can build a lot more delicate with Smacss, but should not forget that the issue is simply a principle of object-oriented programming here. One should therefore not make a religion out of the topic - the final product will always be CSS with all its drawbacks.

The Develeloper is free to decide whether he wants his class named after the BEM build syntax, in which case you can rely on the BEM mixins, thus obtaining a central node to make global modifications to the syntax.

.root__child => Element
.root--modifier => Modifier
.root---instance => Instance

Instance is similar to a modifier, with the difference that the styles of the parent element are applied. The instance can then be expanded with additional Styles.

By default BEM elements marked with a double underscore __ and BEM Modifier with a double hyphen --, Instances with a tripple hyphen ---. Who does not agree, this may change the Sass Setup file (src/framework/_defaults.scss) on the by adjusting the $kittn-bem Map accordingly.
The corresponding mixins: Link

Framework Structure

The framework is in contrast to 2.0 Kittn, now separated stronger. The necessary files can be found under src/framework/. Those who want to can extend the framework for specific projects.

Framework Structure

.. core
.... functions
.... mixins
.... placeholder
.. generators
.. methods
.. partials
.. patterns
Sass Basics

To generate the CSS file, you use the workfile.scss from the style directory (src/style/). But first the structure:

Styling Structure

.. application // Put your Sass Partials here
.... components // Sass Comps
.... elements // Sass Elements
.... layout // Block Elemens
.... app.scss // import File
.. maps // Sass Map Files
.. vendor // Place for Styles from Scripts
.. _loader.scss // Main Import File
.. _setup.scss // Global Style Setup
.. _workfile.scss // Your Work File
.. style.scss // Can have a other name

The name for the files style.scss may differ if you have specified a different name when you activate the toolkit, as it may be that there is no xxxxi8.scss file exists when the IE8 compatibility was turned off.

Work always with _workfile.scss file and the contents of this file into the respective style.scss imported and converted by the compiler to a CSS file.

This file will import the content from the _workfile, but filter out this specific content. For example, Contents that are tagged with the variable old, will not include here.

Using Jacket the developers to work on a file, route-specific styles on different files.

In Kittn you work principally with two Jacket variables. old marked contents which migrate in IE8 stylesheet and modern is intended only for modern browsers. If you want you can of course still expand.

You not need to worry about CSS3 prefixes the gulp-autoprefixer will insert it on any Compile.

Loader File

With the _loader.scss file, all required files are loaded. The order is already given proof should not be changed.

Setup File

Almost all settings can be changed and extended over _setup.scss (find under src/style/).

Build Structure


To generate HTML files, for example, to build a prototype, you can use HTML compiler like Jade or Twig. Jade and Twig differ less in their features, more in the syntax. The compiler will but set the project start (can also be completely disabled).

When active, the generator is in the src/ directory template/ directory integrated, there is also some basis are files (example with Twig).

Template Folder

Files in the root of the template directory are compiled to HTML files. In parts/ are larger template blocks as the header and the block to load the script files. In templates/ directory contains Main Templates, as a basis for Child Templates in the root.

The compiler will only work with the data of the template/ directory

Without Compiler

If you work for example on a WordPress template, the compiler would there rather inappropriate, because you actually have to copy only those files. To stay with the example of the Wordpress template, all the files for the template, added to the structure directory.
Gulp will copy these files when changing to the appropriate directory.

The Compiler is this, if not already, be switched off in the config.json (template.compiler). Gulp-Watch will then monitor the Structure directory (src/structure/) on changes to the files .

Build JS

Main JS File

In src/js/ directory is the app.js file (can be renamed but). That is our main file events and scripts are controlled with Javascript. The file passes through a Gulp task, all in addition jsHint also the advantage that you can attach partials.

//=require _conditionizr.js

// Main JS File
$(document).ready(function() {
// Paste your JS here

The file passes through a Gulp task, all in addition jsHint also the advantage that you can attach partials. The Gulp-Include (Link) Plugin takes care of the background to the integration.
Important the default task must be active so that the JS files through the process.

The filename of the partials should begin with an underscore.


To use JS files, they must first be processed with Gulp. JS files are then either in the JS directory dist/assets/js/ copied or they are combined and copied to the JS directory.

In the config.json you will find the following block:

kittn config files

Everything under jsCopy will be simply copied, under jsCombine identifies thes files for the Combination. When you include new JS Files start the rebuild process:

$ gulp rebuild:js

Working with Images


The directory structure is particularly important for the preparation and processing of the images files.

There we have four directories src/images/, divided into Vector and bitmaps.

bitmapSingle-assets => Single Bitmap Images
bitmapSprite-assets => Images for Bitmap Sprites
vectorSingle-assets => Single Vector Images
vectorSprite-assets => Vector Images for Vector Sprites

When new image files added in the source directory, they are transmitted with Gulp in the dist/ directory. Image files destined for sprites are integrated into the respective sprites. Image files seperately be used (eg textures) are only copied. The required command:

$ gulp rebuild:images

Once the image data has been transferred, you can use this with the image Mixins. When using the mixins, you have to not worry about the paths or sizes because the be written during Rebuild Task the image maps (src/style/maps/).

Kittn v2 dosent Support Retina and NonRetina Bitmap Sprites, because for HighDPI Images SVG is the better alternative. You can also include Sprite Images with HighDPI (Bitmap), and Scale it down with the Sprite Mixin.

Photoshop Generator

Inside the Image folder, there are empty PSD files, they own but only for users who already work with Photoshop, because here is only the generator.

The syntax is relatively easy to handle:

Generator Syntax
  • filename.png Generates a PNG
  • 200% filename.gif Generates a gif with a 200% scaling
  • filename.jpg70% Generates a JPG with 70% quality

More information about the generator (German)