kouto swiss

The missing CSS toolbox for Stylus

version 1.0.0 see changelog
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.

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;
}

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.