kouto swiss - A complete CSS framework for Stylus

Stylus is great, but… where’s my Compass/Bourbon?

Here comes kouto swiss, the missing CSS toolbox for Stylus!

kouto swiss gives you a lot of mixins, functions and utilities to code faster, and include the power of caniuse website to make your stylesheets fits your compatibility needs.

Usage

Included in compilation with grunt

To use kouto swiss with grunt, you can use grunt-contrib-stylus, and include kouto swiss in your use option for the task.

module.exports = function( grunt ) {
    grunt.loadNpmTask( "grunt-contrib-stylus" );

    grunt.initConfig( {
        "stylus": {
            "options": {
                "compress": false,
                "use": [
                    require( "kouto-swiss" )
                ]
            },
            "styles": {
                "files": {
                    "css/styles.css": "stylus/styles.styl"
                }
            }
        }
    };
};

Included in compilation with gulp

To use kouto swiss with gulp, use gulp-stylus and include kouto swiss in your use option for the task.

var gulp = require( "gulp" ),
    koutoSwiss = require( "kouto-swiss" ),
    stylus = require( "gulp-stylus" );

gulp.task( "styles", function() {
    gulp.src( "stylus/styles.styl" )
        .pipe( stylus( {
            "use": koutoSwiss()
        } ) )
        .pipe( gulp.dest( "css" ) );
} );

Included in compilation with third-party tools

To use kouto swiss with third-party tools like Codekit or Prepros, you should include kouto swiss on your project by yourself. You can download it on github.

More information coming soon.

As middleware, for on the fly compilation.

There's an exemple of how to use stylus with kouto-swiss within Connect or Express.

var connect = require( "connect" ),
    stylus = require( "stylus" ),
    koutoSwiss = require( "kouto-swiss" ),
    server = connect();

function compile( str, path ) {
    return stylus( str )
        .set( "filename", path )
        .set( "compress", true )
        .use( koutoSwiss() );
}

server.use( stylus.middleware( {
    src: __dirname,
    compile: compile
} ) );

Stylus API

To gain access to the kouto swiss tools from your Stylus files, simply add:

@import "kouto-swiss"

Using nib with kouto swiss

kouto swiss is highly inspired by nib.

As kouto swiss and nib shares some functions & mixins names, it's not a great idea to use nib and kouto swiss together.

In simple terms : importing kouto swiss after nib will break some of nib's features, and importing nib after kouto swiss will break some of kouto swiss' features.

kouto swiss has been coded in the way to provide a complete alternative to nib.

If you look after some features of nib that you don't find in kouto swiss, create an issue topic to request it, or, even better if you can, submit a pull request!

no conflict mode & mixins aliases

If you use kouto-swiss with other mixin libraries (such as bootstrap-stylus), variables & mixin name colisions may happen.

To avoid that problem, all the functions & mixins of kouto-swiss are also available with the ks- prefix/namespace before their name.

You should include the kouto-swiss lib first in your stylesheets, before any other library.

no-conflict mode

You can also use the no-conflict mode : this will disable all the public or potentially conflicting variables & mixins name used by kouto-swiss, letting only the ks- prefixed variables & mixins availables.

To use the no-conflict mode, simple set the ks-no-conflict variable to true before including kouto-swiss.

ks-no-conflict = true
@import "kouto-swiss"

Reset

`meyer-reset()`

A global reset, using's the Eric Meyer's CSS reset v2.

Example

Usage

meyer-reset()

Result

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

`box-sizing-reset()`

The box-sizing reset, setting the box-sizing property to border-box.

For more information, read the post "Box-sizing: Border-box FTW" by Paul Irish.

Note: From version 0.10, the box-sizing-reset() function has changed his behaviour when its called from the root level : it use an inheritance pattern, which produce the same result, and is more reliable for cases where you want to use an other box model for a part of your page.

Example

Usage


box-sizing-reset()

article
    box-sizing-reset()

Result

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
article *,
article *:before,
article *:after {
  box-sizing: border-box;
}

`normalize()`

The normalize reset makes browsers render all elements more consistently and in line with modern standards.

For more information, refers to the original normalize repository, by Nicolas Gallagher.

Note: Kouto Swiss include normalize version 5.0.0

Example

Usage

normalize()

Result

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}

Mixins

calc()

Add vendor-prefix for the css3 calc() function.

Signature

calc( expr [, fallback ] )

expr: expression for calc. Must be quoted.
fallback: a fallback value for unsupported browsers. Optional.

Example

Usage

body
    width: calc( "100% - 80px" )

body
    width: calc( "100% - 80px", 90% )

Result

body {
  width: -webkit-calc(100% - 80px);
  width: calc(100% - 80px);
}

body {
  width: 90%;
  width: -webkit-calc(100% - 80px);
  width: calc(100% - 80px);
}

font-face()

Simple @font-face mixin.

Signature

font-face( name, font-src [, weight [, style [, formats [, svg-font-name ] [, local-font-name ] ] ] ] )

name: name of the font, used for font-family
font-src: the path for the font, minus the extension
weight: the weight of the font, for font-weight. Optional.
style: the style of the font, for font-style. Optional.
formats: the formats to includes. Optional. Default: eot woff2 woff truetype svg Accepted words: eot woff2 woff truetype ttf opentype otf svg local
svg-font-name: the svg font name. Optional. Default: use the name parameters.
local-font-name: the local font name. Optional. Default: use the name parameters.

Example

Usage

font-face( "Roboto", "./fonts/Roboto-Regular-webfont", normal )

font-face( "Roboto", "./fonts/Roboto-Italic-webfont", normal, italic )

font-face( "OpenSans", "./fonts/OpenSans", formats: woff )

Result

@font-face {
  font-family: "Roboto";
  font-weight: normal;
  src: url("./fonts/Roboto-Regular-webfont.eot");
  src: local("Roboto", url("./fonts/Roboto-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto-Regular-webfont.woff2") format("woff2"), url("./fonts/Roboto-Regular-webfont.woff") format("woff"), url("./fonts/Roboto-Regular-webfont.ttf") format("truetype"), url("./fonts/Roboto-Regular-webfont.svg#Roboto") format("svg");
}

@font-face {
  font-family: "Roboto";
  font-weight: normal;
  font-style: italic;
  src: url("./fonts/Roboto-Italic-webfont.eot");
  src: local("Roboto"), url("./fonts/Roboto-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/Roboto-Italic-webfont.woff2") format("woff2"), url("./fonts/Roboto-Italic-webfont.woff") format("woff"), url("./fonts/Roboto-Italic-webfont.ttf") format("truetype"), url("./fonts/Roboto-Italic-webfont.svg#Roboto") format("svg");
}

@font-face {
  font-family: "OpenSans";
  src: url("./fonts/OpenSans.woff") format("woff");
}

keyframes & animation

To make animations with css3, you'll need to use the animation property & the @keyframes structure.

The animation property is already handled in kouto swiss by the vendors mecanism.

The @keyframes structure is currently handled by the Stylus language.
Note: as precised on the stylus documentation, the vendor expansion of the @keyframes structure will be removed from Stylus in 1.0 version. When this time will come, we'll had that behaviour to kouto swiss.

Example

Usage

@keyframes my-rainbow-animation
    0%
        color: red
    14%
        color: orange
    28%
        color: yellow
    42%
        color: green
    56%
        color: blue
    70%
        color: indigo
    84%
        color: violet

div.rainbow
    animation rainbow 3s linear

Result

div.rainbow {
  -webkit-animation: rainbow 3s linear;
  animation: rainbow 3s linear;
}
@-moz-keyframes my-rainbow-animation {
  0% {
    color: #f00;
  }
  14% {
    color: #ffa500;
  }
  28% {
    color: #ff0;
  }
  42% {
    color: #008000;
  }
  56% {
    color: #00f;
  }
  70% {
    color: #4b0082;
  }
  84% {
    color: #ee82ee;
  }
}
@-webkit-keyframes my-rainbow-animation {
  0% {
    color: #f00;
  }
  14% {
    color: #ffa500;
  }
  28% {
    color: #ff0;
  }
  42% {
    color: #008000;
  }
  56% {
    color: #00f;
  }
  70% {
    color: #4b0082;
  }
  84% {
    color: #ee82ee;
  }
}
@-o-keyframes my-rainbow-animation {
  0% {
    color: #f00;
  }
  14% {
    color: #ffa500;
  }
  28% {
    color: #ff0;
  }
  42% {
    color: #008000;
  }
  56% {
    color: #00f;
  }
  70% {
    color: #4b0082;
  }
  84% {
    color: #ee82ee;
  }
}
@keyframes my-rainbow-animation {
  0% {
    color: #f00;
  }
  14% {
    color: #ffa500;
  }
  28% {
    color: #ff0;
  }
  42% {
    color: #008000;
  }
  56% {
    color: #00f;
  }
  70% {
    color: #4b0082;
  }
  84% {
    color: #ee82ee;
  }
}

placeholder()

Outputs vendor-prefixes for placeholders.
Must be called from a ruleset.

Example

Usage

input
    color: #f00
    +placeholder()
        color: #f99

Result

input {
  color: #f00;
}
input::-webkit-input-placeholder {
  color: #f99;
}
input:-moz-placeholder {
  color: #f99;
}
input::-moz-placeholder {
  color: #f99;
}
input:-ms-input-placeholder {
  color: #f99;
}

ratio-box()

Give an element with unknown or fluid width a fixed aspect ratio.

Inspired by Scut.

Example

Usage

.ratio-box-default
    ratio-box()

.ratio-box-1x1
    ratio-box( 1/1 )

.ratio-box-2x1
    ratio-box( 2/1 )

Result

.ratio-box-default {
    overflow: hidden;
    position: relative;
}
.ratio-box-default:before {
    content: "";
    display: block;
    height: 0;
    padding-top: 100%;
}
.ratio-box-1x1 {
    overflow: hidden;
    position: relative;
}
.ratio-box-1x1:before {
    content: "";
    display: block;
    height: 0;
    padding-top: 100%;
}
.ratio-box-2x1 {
    overflow: hidden;
    position: relative;
}
.ratio-box-2x1:before {
    content: "";
    display: block;
    height: 0;
    padding-top: 50%;
}

linear-gradient()

Display a linear-gradient.

Note: must be used in a background-image property.

Signature

linear-gradient( start, stops... )

The implementation of linear-gradient follows the CSS3 specs.

Example

Usage

div
  background-image: linear-gradient( -45deg, yellow, green )

div
  background-image: linear-gradient( to top right, red, white 30%, blue )

Result

div {
  background-image: -webkit-linear-gradient(135deg,#ff0,#008000);
  background-image: -moz-linear-gradient(135deg,#ff0,#008000);
  background-image: -ms-linear-gradient(135deg,#ff0,#008000);
  background-image: -o-linear-gradient(135deg,#ff0,#008000);
  background-image: linear-gradient(-45deg,#ff0,#008000);
}
div {
  background-image: -webkit-linear-gradient(bottom left,#f00,#fff 30%,#00f);
  background-image: -moz-linear-gradient(bottom left,#f00,#fff 30%,#00f);
  background-image: -ms-linear-gradient(bottom left,#f00,#fff 30%,#00f);
  background-image: -o-linear-gradient(bottom left,#f00,#fff 30%,#00f);
  background-image: linear-gradient(to top right,#f00,#fff 30%,#00f);
}

radial-gradient()

Display a radial-gradient.

Note: must be used in a background-image property.

Signature

radial-gradient( stops... )

The implementation of radial-gradient follows the CSS3 specs.

Example

Usage

div
    background-image: radial-gradient( 50% 50%, black, white )

div
    background-image: radial-gradient( ellipse at center, yellow 0%, green 100% )

Result

div {
  background-image: -webkit-radial-gradient(50% 50%,#000,#fff);
  background-image: -moz-radial-gradient(50% 50%,#000,#fff);
  background-image: -ms-radial-gradient(50% 50%,#000,#fff);
  background-image: -o-radial-gradient(50% 50%,#000,#fff);
  background-image: radial-gradient(50% 50%,#000,#fff);
}
div {
  background-image: -webkit-radial-gradient(ellipse at center,#ff0 0%,#008000 100%);
  background-image: -moz-radial-gradient(ellipse at center,#ff0 0%,#008000 100%);
  background-image: -ms-radial-gradient(ellipse at center,#ff0 0%,#008000 100%);
  background-image: -o-radial-gradient(ellipse at center,#ff0 0%,#008000 100%);
  background-image: radial-gradient(ellipse at center,#ff0 0%,#008000 100%);
}

repeating-linear-gradient()

Display a repeating-linear-gradient.

Note: must be used in a background-image property.

Signature

repeating-linear-gradient( start, stops... )

The implementation of repeating-linear-gradient follows the CSS3 specs.

Example

Usage

div
    background-image: repeating-linear-gradient( rgb( 26, 198, 204 ), rgb( 26, 198, 204 ) 7%, rgb( 100, 100, 100 ) 10% )

div
    background-image: repeating-linear-gradient( -45deg, transparent, transparent 25px, rgba( 255, 255, 255, 1 ) 25px, rgba( 255, 255, 255, 1 ) 50px)

div
    background-image: repeating-linear-gradient( to left top, blue, green 40%, red );

Result

div {
  background-image: -webkit-repeating-linear-gradient(#1ac6cc,#1ac6cc 7%,#646464 10%);
  background-image: repeating-linear-gradient(#1ac6cc,#1ac6cc 7%,#646464 10%);
}
div {
  background-image: -webkit-repeating-linear-gradient(135deg,transparent,transparent 25px,#fff 25px,#fff 50px);
  background-image: repeating-linear-gradient(-45deg,transparent,transparent 25px,#fff 25px,#fff 50px);
}
div {
  background-image: -webkit-repeating-linear-gradient(right bottom,#00f,#008000 40%,#f00);
  background-image: repeating-linear-gradient(to left top,#00f,#008000 40%,#f00);
}

repeating-radial-gradient()

Display a repeating-radial-gradient.

Note: must be used in a background-image property.

Signature

repeating-radial-gradient( stops... )

The implementation of repeating-radial-gradient follows the CSS3 specs.

Example

Usage

div
    background-image: repeating-radial-gradient( black, black 5px, white 5px, white 10px )

div
    background-image: repeating-radial-gradient( ellipse farthest-corner, red, black 5%, blue 5%, green 10% )

Result

div {
  background-image: -webkit-repeating-radial-gradient(#000,#000 5px,#fff 5px,#fff 10px);
  background-image: repeating-radial-gradient(#000,#000 5px,#fff 5px,#fff 10px);
}
div {
  background-image: -webkit-repeating-radial-gradient(ellipse farthest-corner,#f00,#000 5%,#00f 5%,#008000 10%);
  background-image: repeating-radial-gradient(ellipse farthest-corner,#f00,#000 5%,#00f 5%,#008000 10%);
}

Vendors Prefixes

kouto swiss comes with automatic vendor prefixer for the following properties.
You can define the behavior of the prefixer by changing the value of the global variable ks-vendors-prefixes.

Recommended prefixes (by default)

By default, kouto swiss use the data from caniuse website to select the prefixes to use.

You can select which version of browsers you want to support by modifying the following global variables.

ks-support-ie = 9
ks-support-firefox = 30
ks-support-chrome = 30
ks-support-safari = 6
ks-support-opera = 20
ks-support-ios-safari = 6
ks-support-opera-mini = false
ks-support-android-browser = false
ks-support-blackberry-browser = false
ks-support-opera-mobile = false
ks-support-android-chrome = false
ks-support-android-firefox = false
ks-support-ie-mobile = false

You can set a number, which will act as "greater or equal" support, a semver range string, or the false value, to be ignored.

If you want to ignore the caniuse recommendations, add the features you want to ignore to the ks-support-ignore-features global variable.

For the properties not registered in caniuse, the implementation is based on the list of Peter Beverloo.

You can set the following global variable to use the recommended prefixes for the variable.

ks-vendors-prefixes = recommended

The following properties are not registered in caniuse.

Supported properties

The following properties are implemented by the vendor mecanism and will be automaticaly prefixed using caniuse data: align-content, align-items, align-self, animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, appearance, backface-visibility, background-clip, background-origin, background-size, border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat, border-image, box-shadow, box-sizing, clip-path, column-count, column-fill, column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, columns, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, grid, grid-area, grid-auto-columns, grid-auto-flow, grid-auto-position, grid-auto-rows, grid-column, grid-column-end, grid-column-start, grid-row, grid-row-end, grid-row-start, grid-template, grid-template-areas, grid-template-columns, grid-template-rows, hyphens, justify-content, mask, opacity, order, perspective, perspective-origin, transform, transform-origin, transform-style, transition, transition-delay, transition-duration, transition-property, transition-timing-function, user-select

Unregistered properties

The following properties are not registered (yet?) in caniuse, and use the prefixes as indicated:

appearance: -webkit -moz
backface-visibility: -webkit -ms

Specific prefixes

If you want specific prefixes, you can force them by setting the global variable ks-vendors-prefixes with the prefixes you want.

No vendor prefixes

ks-vendors-prefixes = false

If you don't want to let kouto swiss to add vendor prefixes, and do the job yourself with such plugins like autoprefixer, simply set ks-vendors-prefixes to false.

The `vendor` mixin

You can also define your own vendors mixins with the kouto swiss built-in vendor mixin.

vendor( property, value [, feature = null [, prefixes = null [, official = true ] ] ] )

property: the css property to use.
value: the value for the property.
feature: the name of the feature in caniuse website, which will automatically set the prefixes.
prefixes: the list of prefixes to use, if feature is set to false.
official: a boolean to display the non-prefixed property, if feature is set to false.

Example

Usage


button
    hyphens: manual

ks-support-ie = 11

button
    hyphens: manual

ks-vendors-prefixes = o ms webkit moz

button
    backface-visibility: visible

ks-vendors-prefixes = recommended

button
    backface-visibility: visible

ks-vendors-prefixes = false

button
    backface-visibility: visible

button
    vendor( "columns", auto auto, feature: "multicolumn" )

button
    vendor( "columns", auto auto, prefixes: webkit moz ms o )

button
    vendor( "columns", auto auto, prefixes: webkit moz ms o, official: false )

ks-support-ignore-features = "css3-boxsizing" "css-animation"

button
    animation: none 0s ease 0s 1 normal none
    box-sizing: content-box

Result

button {
  -webkit-hyphens: manual;
  -moz-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
button {
  -webkit-hyphens: manual;
  -moz-hyphens: manual;
  hyphens: manual;
}
button {
  -o-backface-visibility: visible;
  -ms-backface-visibility: visible;
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  backface-visibility: visible;
}
button {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
button {
  backface-visibility: visible;
}
button {
  -webkit-columns: auto auto;
  -moz-columns: auto auto;
  columns: auto auto;
}
button {
  -webkit-columns: auto auto;
  -moz-columns: auto auto;
  -ms-columns: auto auto;
  -o-columns: auto auto;
  columns: auto auto;
}
button {
  -webkit-columns: auto auto;
  -moz-columns: auto auto;
  -ms-columns: auto auto;
  -o-columns: auto auto;
}
button {
  animation: none 0s ease 0s 1 normal none;
  box-sizing: content-box;
}

Functions

em()

Converts pixels to em.
Uses the second value as base. If no base is given, uses 16px as base.

Signature

em( value [, base ] )

value: value to convert.
base: base for conversion. Optional Defaults to 16.

Example

Usage

div
    font-size: em( 12px, 24 )

div
    font-size: em( 16 )

Result

div {
  font-size: 0.5em;
}

div {
  font-size: 1em;
}

rem()

Converts pixels to rem. Assumes 1rem = 16px. You can override by passing a new value to the global variable ks-rem-base.

Signature

rem( values )

values: value(s) to convert.

Example

Usage

div
    font-size: rem( 12px )
    margin: rem( 10px auto 20 )

ks-rem-base = 20px

div
    font-size: rem( 16 )
    margin: rem( 10 auto 20px )

Result

div {
  font-size: 0.75rem;
  margin: 0.625rem auto 1.25rem;
}

div {
  font-size: 0.8rem;
  margin: 0.5rem auto 1rem;
}

percent()

The percent function makes a simple percentage convertion operation. It takes two operands, makes a percentage of the first by the second, and return the result, with a percent unit.

Note: the function doesn't care about the units you give and don't convert it.

Signature

percent( value, total )

value: value to a percentage of total.
total: the 100% reference number.

Example

Usage

div
    width: percent( 50px, 200px )

div
    width: percent( 15, 200 )

div
    clear: percent( 30em, 10px )

Result

div {
  width: 25%;
}

div {
  width: 7.5%;
}

div {
  width: 300%;
}

modular-scale()

Returns the modular scale of a number for a given step of ratio.

Signature

modular-scale( base, step [, ratio ] )

base: number base to scale.
step: step to scale.
ratio: the ratio to use. Optional. Default: ks-perfect-fifth.

Ratios

For the ratio parameter, you can give any number, or use one of the following global variables:

ks-golden: 1.618
ks-minor-second: 1.067
ks-major-second: 1.125
ks-minor-third: 1.2
ks-major-third: 1.25
ks-perfect-fourth: 1.333
ks-augmented-fourth: 1.414
ks-perfect-fifth: 1.5
ks-minor-sixth: 1.6
ks-major-sixth: 1.667
ks-minor-seventh: 1.778
ks-major-seventh: 1.875
ks-octave: 2
ks-major-tenth: 2.5
ks-major-eleventh: 2.667
ks-major-twelfth: 3
ks-double-octave: 4

Example

Usage

div
    font-size: modular-scale( 16px, 1, 1.5 )

div
    font-size: modular-scale( 16px, 2, 1.618 )

div
    font-size: modular-scale( 16px, -2, ks-octave )

div
    font-size: modular-scale( 1em, 2, 1.5 )

Result

div {
  font-size: 24px;
}

div {
  font-size: 41.886784px;
}

div {
  font-size: 4px;
}

div {
  font-size: 2.25em;
}

golden-ratio()

Returns the golden ratio (1.618) of a number for a given step.

Signature

golden-ratio( base, step )

base: number base to scale.
step: step to scale.

Example

Usage

div
    font-size: golden-ratio( 16px, 1 )

div
    font-size: golden-ratio( 1em, 2 )

Result

div {
  font-size: 25.888px;
}

div {
  font-size: 2.617924em;
}

`color-fallback( color )`

Warning: must be used within a property.

Create a fallback property for color with alpha value different than 1.
If the given color has an alpha of 1, the function doesn't do anything.

Signature

color-fallback( color )

color: color to fallback.

Example

Usage

.no-alpha
    color: color-fallback( red )

.alpha
    color: color-fallback( rgba( 255, 0, 0, .5 ) )

Result

.no-alpha {
  color: #f00;
}

.alpha {
  color: #f00;
  color: rgba(255,0,0,0.5);
}

Implicit color fallback

The implicit color fallback mecanism allows you to use the color-fallback function without calling it, by declaring an ks-color-fallback-enabled variable to true.

Note: prior to version 0.11.0, the ks-color-fallback-enabled variable was called ks-color-fallback.

Usage

.foo
    color: rgba( 255, 0, 0, .5 )

ks-color-fallback-enabled = true

.bar
    color: rgba( 255, 0, 0, .5 )

.bar
    background: rgba( 202, 43, 120, .5 ) url( test.png ) top left repeat

ks-color-fallback-enabled = false

.foo
    color: rgba( 255, 0, 0, .5 )

Result

.foo {
  color: rgba( 255, 0, 0, .5 );
}

.bar {
  color: #f00;
  color: rgba( 255, 0, 0, .5 );
}

.foo {
  background: #ca2b78 url("test.png") top left repeat;
  background: rgba(202,43,120,0.5) url("test.png") top left repeat;
}

.foo {
  color: rgba( 255, 0, 0, .5 );
}

`luminosity( color )`

Returns the WCAG luminosity of the given color, as a Number between 0 (black) and 1 (white).

Signature

luminosity( color )

color: color to analyse.

Example

Usage

.luminosity
    background: #ff0
    color: luminosity( #ff0 ) > 0.5 ? black : white

Result

.luminosity {
  background: #ff0;
  color: white;
}

`analogous( color )`

Returns analogous variations of the given color.
returned[0]: first analogous variation ( spinning given color by 30 degrees )
returned[1]: second analogous variation ( spinning given color by -30 degrees )

Signature

analogous( color )

color: color to perform analogous variations.

Example

Usage

variations = analogous( #f00 )

.red-analog-one
    color: variations[0]

.red-analog-two
    color: variations[1]

Result

.red-analog-one {
  color: #ff8000;
}

.red-analog-two {
  color: #ff0080;
}

`extended-analogous( color )`

Returns more analogous variations of the given color.
returned[0]: first analogous variation ( spinning given color by 30 degrees )
returned[1]: second analogous variation ( spinning given color by -30 degrees )
returned[2]: third analogous variation ( spinning given color by 60 degrees )
returned[3]: fourth analogous variation ( spinning given color by -60 degrees )

Signature

extended-analogous( color )

color: color to perform analogous variations.

Example

Usage

variations = extended-analogous( #f00 )

.red-analog-one
    color: variations[0]

.red-analog-two
    color: variations[1]

.red-analog-three
    color: variations[2]

.red-analog-four
    color: variations[3]

Result

.red-analog-one {
  color: #ff8000;
}

.red-analog-two {
  color: #ff0080;
}

.red-analog-three {
  color: #ff0;
}

.red-analog-four {
  color: #f0f;
}

`monochrome( color )`

Returns monochromatic variations of the given color.
returned[0]: first monochrome variation ( given color's lightness minus 33% )
returned[1]: second monochrome variation ( given color's lightness minus 66% )

Signature

monochrome( color )

color: color to perform monochromatic variations.

Example

Usage

variations = monochrome( #f00 )

.red-mono-one
    color: variations[0]

.red-mono-two
    color: variations[1]

Result

.red-mono-one {
  color: #f55;
}

.red-mono-two {
  color: #ff2a2a;
}

`split-complements( color )`

Returns split-complements variations of the given color.
returned[0]: first split-complements variation ( spinning given color by 150 degrees )
returned[1]: second split-complements variation ( spinning given color by -150 degrees )

Signature

split-complements( color )

color: color to perform split-complements variations.

Example

Usage

variations = split-complements( #f00 )

.red-split-complement-one
    color: variations[0]

.red-split-complement-two
    color: variations[1]

Result

.red-split-complement-one {
  color: #00ff80;
}

.red-split-complement-two {
  color: #007fff;
}

`triad( color )`

Returns triad variations of the given color.
returned[0]: first triad variation ( spinning given color by 120 degrees )
returned[1]: second triad variation ( spinning given color by -120 degrees )

Signature

triad( color )

color: color to perform triad variations.

Example

Usage

variations = triad( #f00 )

.red-triad-one
    color: variations[0]

.red-triad-two
    color: variations[1]

Result

.red-triad-one {
  color: #0f0;
}

.red-triad-two {
  color: #00f;
}

`quad( color )` & `tetrad( color )`

Returns quad (tetrad) variations of the given color.
returned[0]: first quad variation ( spinning given color by 90 degrees )
returned[1]: second quad variation ( spinning given color by -90 degrees )
returned[2]: third quad variation ( spinning given color by 180 degrees ) - complement color

Signature

quad( color ) & tetrad( color )

color: color to perform quad variations.

Example

Usage

variations = quad( #f00 )

.red-quad-one
    color: variations[0]

.red-quad-two
    color: variations[1]

.red-quad-three
    color: variations[2]

Result

.red-quad-one {
  color: #80ff00;
}

.red-quad-two {
  color: #7f00ff;
}

.red-quad-three {
  color: #0ff;
}

Utilities

colors

kouto-swiss provides variables for all the colors defined in CSS Color Module Level 4, as in date from 21 june 2014.

clearfix

The clearfix mixins will output a clearfix to the selector where it is declared.

The clearfix comes with three syntaxes, each return the same result.

This clearfix is based on Nicolas Gallagher's micro clearfix.

Note: the support of IE6&7 is added using the global $ks-support-ie.

Example

Usage

// form one
div
    clearfix()

// form two
div
    clear: fix

// form three
div
    clear: fix()

Result

div:before,
div:after {
  content: " ";
  display: table;
}
div:after {
  clear: both;
}

position mixins

The position mixins gives you five convenient shortcuts for position property. Simply call the value of position as property, and gives the values of top, right, bottom and left as value.

Note: The values are parsed in the same way as in margin or padding method : 1 value affect all, 2 values are for top/bottom and left/right, 3 values are for top, left/right and bottom, and 4 values are for top, right, bottom and left.

Note 2: If you give the false value to a parameter, it will be ignored

Note 3: Since version 0.11.7, position mixin supports sticky value, using caniuse data.

Note 4: Since version 0.14.0, position mixin supports relative position like background-position (see exemple for more details).

Example

Usage

div
    static: 10px

div
    relative: 10px 20px

div
    absolute: 10px 20px 30px

div
    fixed: 10px 20px 30px 40px

div
    fixed: 10px false 30px

div
    fixed: 10px 20px false 40px

div
    position: sticky

div
    sticky: 10px 20px 0 40px

div
    absolute: top right

div
    absolute: top 2rem right

div
    absolute: top 35px right 20%

Result

div {
  position: static;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
}

div {
  position: relative;
  top: 10px;
  right: 20px;
  bottom: 10px;
  left: 20px;
}

div {
  position: absolute;
  top: 10px;
  right: 20px;
  bottom: 30px;
  left: 20px;
}

div {
  position: fixed;
  top: 10px;
  right: 20px;
  bottom: 30px;
  left: 40px;
}

div {
  position: fixed;
  top: 10px;
  bottom: 30px;
}

div {
  position: fixed;
  top: 10px;
  right: 20px;
  left: 40px;
}

div {
  position: -webkit-sticky;
  position: sticky;
}

div {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  right: 20px;
  bottom: 0;
  left: 40px;
}
div {
  position: absolute;
  top: 0;
  right: 0;
}
div {
  position: absolute;
  top: 2rem;
  right: 0;
}
div {
  position: absolute;
  top: 35px;
  right: 20%;
}

size mixins

The size mixins gives you a convenient shortcut for setting width and height properties at the same time. Since version 0.14.0, min-size & max-size mixins are added.

Note: If only one value is given, the width and height will have the same values.

Note 2: When giving two values, making one to false will not displaying it.

Example

Usage

div
    size: 10px

div
    size: 10px 20px

div
    size: 10px false

div
    size: false 20px

Result

div {
  width: 10px;
  height: 10px;
}

div {
  width: 10px;
  height: 20px;
}

div {
  width: 10px;
}

div {
  height: 20px;
}

`font-stack()`

Get a font stack to use with font-family.
The font stacks are taken from the site cssfontstack.com, by Denis Leblanc

These are the stacks included in kouto swiss:

"Arial"
"Arial Black"
"Arial Narrow"
"Arial Rounded MT Bold"
"Avant Garde"
"Calibri"
"Candara"
"Century Gothic"
"Franklin Gothic Medium"
"Futura"
"Geneva"
"Gill Sans"
"Helvetica"
"Impact"
"Lucida Grande"
"Optima"
"Segoe UI"
"Tahoma"
"Trebuchet MS"
"Verdana"
"Baskerville"
"Big Caslon"
"Bodoni MT"
"Book Antiqua"
"Calisto MT"
"Cambria"
"Didot"
"Garamond"
"Georgia"
"Goudy Old Style"
"Hoefler Text"
"Lucida Bright"
"Palatino"
"Perpetua"
"Rockwell"
"Rockwell Extra Bold"
"Times New Roman"
"Andale Mono"
"Consolas"
"Courier New"
"Lucida Console"
"Lucida Sans Typewriter"
"Monaco"
"Copperplate"
"Papyrus"
"Brush Script MT"
"System"
"System with Emojis"

System font-stack

The "System" and "System with Emojis" stacks are the ones used on GitHub : -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif and -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol".

Signature

font-stack( name )

name: name of the stack. Must be quoted.

Example

Usage

body
    font-family font-stack( "Arial" )

body
    font-family font-stack( "Helvetica" )

body
    font-family font-stack( "Lucida Console" )

Result

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
}

hide-text()

The hide-text mixins will hide the text of the selector where it is declared. Used for background image like logo display, etc...

This mixin is based on which from bourbon.io.

A height declaration is required for this to function.

Example

Usage

h1
    height: 75px
    background: url( logo.png ) top left no-repeat
    hide-text()

Result

h1 {
  height: 75px;
  background: url("logo.png") top left no-repeat;
  overflow: hidden;
}
h1:before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
}

easing()

Get a cubic-bezier preset to use with transition property.
The presets are taken from the plugin easie, by Janne Aukia

These are the preset included in kouto swiss:

"in-quad"
"in-cubic"
"in-quart"
"in-quint"
"in-sine"
"in-expo"
"in-circ"
"in-back"
"out-quad"
"out-cubic"
"out-quart"
"out-quint"
"out-sine"
"out-expo"
"out-circ"
"out-back"
"in-out-quad"
"in-out-cubic"
"in-out-quart"
"in-out-quint"
"in-out-sine"
"in-out-expo"
"in-out-circ"
"in-out-back"

Signature

easing( name )

name: name of the preset. Must be quoted.

Example

Usage

div
    transition: all .25s easing( "in-quad" )

Result

div {
  -webkit-transition: all 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

overflow ellipsis

The ellipsis mixin is a shortcut value to pass to an overflow property, which displays the code for a text-overflow: ellipsis;.

This mixin is based on which from nib.

Example

Usage

div
    overflow: ellipsis

Result

div {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

flex-axis mixin

The flex-axis mixin gives you five convenient shortcut for justify-content and align-items properties. The first value is affected to justify-content, the second to align-items. If only one value is given, it is affected to both properties, if possible. If the given property is not valid, it use the default value instead.

NOTE: the flex-axis mixin use the vendors prefixes following your configuration.

Example

Usage

div
    flex-axis: flex-start center

div
    flex-axis: flex-start stretch

div
    flex-axis: flex-start baseline

div
    flex-axis: flex-start flex-end

div
    flex-axis: space-between baseline

div
    flex-axis: center center

div
    flex-axis: center

div
    flex-axis: flex-end

div
    flex-axis: space-between

div
    flex-axis: space-evenly

div
    flex-axis: space-around

div
    flex-axis: baseline

div
    flex-axis: stretch

Result

div {
  justify-content: flex-start;
  align-items: center;
}
div {
  justify-content: flex-start;
  align-items: stretch;
}
div {
  justify-content: flex-start;
  align-items: baseline;
}
div {
  justify-content: flex-start;
  align-items: flex-end;
}
div {
  justify-content: space-between;
  align-items: baseline;
}
div {
  justify-content: center;
  align-items: center;
}
div {
  justify-content: center;
  align-items: center;
}
div {
  justify-content: flex-end;
  align-items: flex-end;
}
div {
  justify-content: space-between;
  align-items: stretch;
}
div {
  justify-content: space-evenly;
  align-items: stretch;
}
div {
  justify-content: space-around;
  align-items: stretch;
}
div {
  justify-content: flex-start;
  align-items: baseline;
}
div {
  justify-content: flex-start;
  align-items: stretch;
}

media-query()

Create the query part of a media query, which you can store in a variable, to use when you make a media block.

You can disable the media-queries by modifying the global ks-support-media-queries variable, which is by default valued to true.
It's useful for legacy stylesheet for old IE versions.

Warning: since version 0.9, the media-query() mixin has changed: it's now a block mixin.

Signature

+media-query( media [, conditions... ] )

media: the media of the query
conditions: multiple pairs of conditions for the query. Optional.

Note: if you give a list as the media argument, the first element of this list will be assumed as the media value.

Example

Usage

+media-query( all, min-width 640px )
    div
        color: red

+media-query( only screen, min-width 640px, min-height 960px, orientation portrait )
    div
        color: red

+media-query( print )
    div
        color: red

ks-support-media-queries = false

+media-query( all, min-width 640px )
    div
        color: red

+media-query( only screen, min-width 640px, min-height 960px, orientation portrait )
    div
        color: red

+media-query( print )
    div
        color: red

ks-support-media-queries = true

breakpointMain = only screen, max-width 767px

+media-query( breakpointMain )
    div
        width: 100%

Result

@media all and (min-width: 640px) {
  div {
    color: #f00;
  }
}
@media only screen and (min-width: 640px) and (min-height: 960px) and (orientation: portrait) {
  div {
    color: #f00;
  }
}
@media print {
  div {
    color: #f00;
  }
}
div {
  color: #f00;
}
div {
  color: #f00;
}
div {
  color: #f00;
}
@media only screen and (max-width: 767px) {
  div {
    width: 100%;
  }
}

retina-image()

Generate a media query for an image.
If no size is given, the mixin tries to get the sizes from the file.

Signature

retina-image( img-src [, size [, suffix ] ] )

img-src: the path for the image
size: width and height of the image, uses as background-size for the retina image. Optional. If none is given, the sizes are computed from the path. If it fails, the background-size value will be contain.
suffix: the suffix to add to the file to reach retina image. Optional. Default: @2x.

Example

Usage

div
  retina-image( "logo.png", 277px 292px, "-2x" )

Result

div {
  background-image: url("logo.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3/1), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
  div {
    background-image: url("logo-2x.png");
    -webkit-background-size: 277px 292px;
    background-size: 277px 292px;
  }
}

Alias

hidpi-image()

retina-query()

Create the query part of a media query for retina/hdpi screens, which you can store in a variable, to use when you make a media block.

Warning: since version 0.9, the retina-query() mixin has changed: it's now a block mixin.

Signature

+retina-query( media [, density ] )

media: the media of the query
density: pixel density for the query. Optional. Default to 1

Example

Usage

+retina-query( all, 1.3 )
    div
        color: red

+retina-query( only screen, 2 )
    div
        color: red

+retina-query( screen )
    div
        color: red

Result

@media all and (-webkit-min-device-pixel-ratio: 1.3), all and (min--moz-device-pixel-ratio: 1.3), all and (-o-min-device-pixel-ratio: 1.3/1), all and (min-device-pixel-ratio: 1.3), all and (min-resolution: 125dpi), all and (min-resolution: 1.3dppx) {
  div {
    color: #f00;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  div {
    color: #f00;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 1), screen and (min--moz-device-pixel-ratio: 1), screen and (-o-min-device-pixel-ratio: 1/1), screen and (min-device-pixel-ratio: 1), screen and (min-resolution: 96dpi), screen and (min-resolution: 1dppx) {
  div {
    color: #f00;
  }
}

Alias

hidpi-query()

triangle()

Change the target into a lovely triangle :)
Useful for tooltips, arrows, or anything you want with pointy stuffs.

Signature

triangle( direction, size, face-color [, back-color ] )

direction: the direction of the triangle. Can be up, down, left, right, up-left, up-right, down-left, down-right.
size: size of the triangle.
face-color: color of the triangle.
back-color: background color of the triangle. Optional. Defaults to transparent.

Example

Usage

div
    triangle( up, 10px, red )

div
    triangle( down-right, 10px, red )

Result

div {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #f00;
}

div {
  width: 0;
  height: 0;
  border: 10px solid #00f;
  border-bottom-color: #f00;
  border-right-color: #f00;
}

Grid

grid system

NOTE: The grid system of Kouto Swiss is deprecated and has been removed in version 1.0.0. Please use jeet instead.

Introduction

Usage

Included in compilation with grunt

Included in compilation with gulp

Included in compilation with third-party tools

As middleware, for on the fly compilation.

Stylus API

Using nib with kouto swiss

no conflict mode & mixins aliases

no-conflict mode

Reset

meyer-reset()

Example

Usage

Result

box-sizing-reset()

Example

Usage

Result

normalize()

Example

Usage

Result

Mixins

calc()

Signature

Example

Usage

Result

font-face()

Signature

Example

Usage

Result

keyframes & animation

Example

Usage

Result

placeholder()

Example

Usage

Result

ratio-box()

Example

Usage

Result

linear-gradient()

Signature

Example

Usage

Result

radial-gradient()

Signature

Example

Usage

Result

repeating-linear-gradient()

Signature

Example

Usage

Result

repeating-radial-gradient()

Signature

Example

Usage

Result

Vendors Prefixes

Recommended prefixes (by default)

Supported properties

Unregistered properties

Specific prefixes

No vendor prefixes

The vendor mixin

Example

Usage

Result

Functions

em()

Signature

Example

`meyer-reset()`

`box-sizing-reset()`

`normalize()`

The `vendor` mixin

`color-fallback( color )`

`luminosity( color )`

`analogous( color )`

`extended-analogous( color )`

`monochrome( color )`

`split-complements( color )`

`triad( color )`

`quad( color )` & `tetrad( color )`