kouto-swiss

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><title>kouto swiss - A complete CSS framework for Stylus</title><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, minimal-ui"/><link rel="stylesheet" href="/assets/css/styles.css"/></head><body><main class="wrapper"><header class="header"><h1 class="header__title"><svg class="header__logo" viewBox="0 0 258 273" xmlns="http://www.w3.org/2000/svg"> <path d="M88.8880967,227.959041 L88.3907717,44.2671809 C88.3452367,32.0197662 84.0482919,21.6224959 75.4998085,13.0750582 C66.9513251,4.52762047 56.648476,0.231557038 44.5909522,0.186739013 C34.501302,0.149235608 25.6624836,3.09776556 18.0743166,9.03240305 C6.53507326,17.7922199 0.836169796,29.2526573 0.888819631,43.4137306 L1.38614464,227.105591 C1.43167964,239.353005 5.72862439,249.750276 14.2771078,258.297713 C22.8255912,266.845151 33.1284403,271.141214 45.1859641,271.186032 C55.2756144,271.223536 64.1144327,268.275006 71.7025997,262.340368 C83.2418431,253.580552 88.9407465,242.120114 88.8880967,227.959041 L88.8880967,227.959041 Z M71.0914147,110.133853 L45.0826872,118.685208 L19.0739598,110.133853 L14.7391719,50.2743731 L75.4262026,50.2743731 L71.0914147,110.133853 L71.0914147,110.133853 Z M23.5663764,58.1015776 L24.373238,66.7448819 L53.6892116,66.7448819 L53.6892116,75.3881863 L25.1128612,75.3881863 L25.9197229,84.0314907 L53.6892116,84.0314907 L53.6892116,96.9964472 L45.0826872,99.1572733 L36.4761629,96.9964472 L36.4761629,88.3531429 L26.3231537,88.3531429 L27.8696385,105.639752 L45.0826872,109.961404 L62.2957359,105.639752 L66.5989981,58.1015776 L23.5663764,58.1015776 Z M85.8207183,17.8845233 C116.843883,21.2001384 155.898581,25.0011724 159.430606,25.4771321 C163.549458,25.967608 168.987213,25.2876797 175.744034,23.4373268 C182.500855,21.5869739 188.797189,19.4545923 194.633224,17.040118 C200.469259,14.6256438 206.57805,12.6506293 212.95978,11.1150153 C219.34151,9.57940136 224.429357,9.32038802 228.223475,10.3379675 C232.756481,11.626715 237.367543,15.1414307 242.0568,20.8822202 C247.749062,27.8183447 252.566729,35.9973972 256.509946,45.4196229 L252.909088,48.4411016 L228.801792,35.2508756 L227.97556,35.180312 C227.349717,35.1962171 226.333127,35.5081795 224.925758,36.1162083 C223.518389,36.7242371 222.027035,37.6891888 220.451651,39.0110923 C218.876268,40.3329959 217.764118,41.711778 217.115168,43.14748 C216.466219,44.583182 216.201871,45.7916322 216.322117,46.7728668 C216.442363,47.7541014 216.772246,48.7185484 217.311775,49.6662369 C217.851305,50.6139253 218.265194,51.2214404 218.553454,51.4888003 C218.841715,51.7561601 219.079873,52.001899 219.267937,52.2260244 L244.523657,67.698991 L237.321941,73.7419484 L228.02838,74.0925868 C221.907661,74.2633991 215.42376,74.2297998 208.576483,73.9917879 C201.729206,73.7537761 197.685433,73.2003607 196.445042,72.3315252 C193.789564,70.9950622 190.39139,68.8496353 186.250417,65.8951802 C182.109445,62.9407251 177.762237,60.1594181 173.208664,57.5511758 C168.655091,54.9429335 163.776858,52.861826 158.573817,51.3077909 C155.584675,50.4149993 122.759936,47.1426328 93.3911586,44.4033229 L93.3907534,44.253644 C93.3542352,34.4309609 90.8176863,25.6065447 85.8207183,17.8845233 Z M116.576224,51.3897976 L168.084479,85.1772939 L239.740353,132.009971 C241.27441,133.019017 242.312193,134.54925 242.853733,136.600716 C243.395272,138.652182 243.230721,140.539077 242.360075,142.261458 C241.489429,143.983838 239.778453,145.251329 237.227097,146.063968 C234.675741,146.876607 231.452685,147.218234 227.557833,147.088858 C223.662981,146.959482 219.069569,146.366417 213.777459,145.309646 C208.485349,144.252874 202.792783,142.770219 196.69959,140.861635 C190.606397,138.953051 184.010163,136.557358 176.91069,133.674485 C169.811216,130.791612 162.536072,127.570325 155.085039,124.010526 C147.634005,120.450727 139.814357,116.367296 131.625858,111.760109 C123.43736,107.152923 115.356654,102.189694 107.383499,96.870274 C105.741916,95.8904677 104.657689,94.4025763 104.130786,92.4065552 C103.603882,90.410534 103.795314,88.5163292 104.705087,86.7238839 L107.903913,80.5058014 L93.4666252,72.2778094 L93.4666252,72.2778094 L93.4040646,49.1703128 C101.130515,49.8951307 109.055943,50.6537302 116.576224,51.3897976 L116.576224,51.3897976 Z M93.6717972,148.060476 L97.5922171,154.850843 L111.833464,146.628655 C112.888377,146.019601 113.720348,146.242527 114.329402,147.297439 L116.017891,150.425006 C116.651715,151.387476 116.441174,152.173226 115.386262,152.78228 L101.145014,161.004468 L113.833576,182.981701 L128.074823,174.759513 C129.129736,174.150459 129.961706,174.373385 130.57076,175.428298 L132.25925,178.555865 C132.893074,179.518335 132.682533,180.304085 131.62762,180.913139 L117.386373,189.135327 L130.074935,211.11256 L144.316182,202.890372 C145.371095,202.281318 146.203065,202.504244 146.812119,203.559157 L148.500609,206.686723 C149.134433,207.649193 148.923892,208.434944 147.868979,209.043998 L133.627732,217.266185 L140.022767,228.342711 C140.631821,229.397624 141.537211,230.086074 142.738965,230.408083 C143.940719,230.730092 145.115255,230.598956 146.26261,230.014672 L174.393469,213.773313 C175.473151,213.071817 176.173987,212.120206 176.495995,210.918452 C176.818004,209.716699 176.674484,208.588383 176.06543,207.53347 L120.370058,111.066256 C115.139606,107.930473 109.985463,104.66813 104.962467,101.313879 C102.168752,99.6472754 100.283919,97.0620588 99.4286032,93.8236343 C98.5892421,90.645618 98.9086471,87.4867815 100.392965,84.5640535 L101.413974,82.5803879 L93.4822933,78.0649767 L93.6717972,148.060476 Z" /> </svg> <svg class="header__logotype" viewBox="0 0 171 23" xmlns="http://www.w3.org/2000/svg"> <title>kouto swiss</title> <path d="M14.296,23 C14.808,23 15,22.68 14.776,22.264 L8.984,10.936 L14.424,1.368 C14.68,0.952 14.456,0.6 13.976,0.6 L10.616,0.6 C10.264,0.6 10.04,0.792 9.88,1.08 L4.952,9.56 L4.952,1.24 C4.952,0.824 4.728,0.6 4.312,0.6 L1.24,0.6 C0.824,0.6 0.6,0.824 0.6,1.24 L0.6,22.36 C0.6,22.776 0.824,23 1.24,23 L4.312,23 C4.728,23 4.952,22.776 4.952,22.36 L4.952,16.888 L6.136,14.616 L10.168,22.52 C10.328,22.84 10.52,23 10.904,23 L14.296,23 Z M17.5319309,18.392 C17.5319309,21.4 19.1319309,23 22.1399309,23 L25.7239309,23 C28.7319309,23 30.3319309,21.4 30.3319309,18.392 L30.3319309,5.208 C30.3319309,2.2 28.7319309,0.6 25.7239309,0.6 L22.1399309,0.6 C19.1319309,0.6 17.5319309,2.2 17.5319309,5.208 L17.5319309,18.392 Z M22.9719309,18.872 C22.1399309,18.872 21.6919309,18.456 21.6919309,17.592 L21.6919309,6.008 C21.6919309,5.176 22.1399309,4.728 22.9719309,4.728 L25.0199309,4.728 C25.8519309,4.728 26.2999309,5.176 26.2999309,6.008 L26.2999309,17.592 C26.2999309,18.456 25.8519309,18.872 25.0199309,18.872 L22.9719309,18.872 Z M43.4878617,0.6 C43.1358617,0.6 42.8478617,0.888 42.8478617,1.24 L42.8478617,17.496 C42.8478617,18.36 42.3998617,18.776 41.5678617,18.776 L39.9038617,18.776 C39.0718617,18.776 38.6238617,18.36 38.6238617,17.496 L38.6238617,1.24 C38.6238617,0.888 38.3358617,0.6 37.9838617,0.6 L34.9118617,0.6 C34.5598617,0.6 34.2718617,0.888 34.2718617,1.24 L34.2718617,18.392 C34.2718617,21.4 35.8718617,23 38.8798617,23 L42.4638617,23 C45.4718617,23 47.0718617,21.4 47.0718617,18.392 L47.0718617,1.24 C47.0718617,0.888 46.7838617,0.6 46.4318617,0.6 L43.4878617,0.6 Z M62.6597926,0.6 C63.0117926,0.6 63.1717926,0.792 63.1717926,1.112 L63.1717926,4.312 C63.1717926,4.632 63.0117926,4.824 62.6597926,4.824 L58.9477926,4.824 L58.9477926,22.488 C58.9477926,22.84 58.7877926,23 58.4357926,23 L55.1077926,23 C54.7877926,23 54.5957926,22.84 54.5957926,22.488 L54.5957926,4.824 L50.8837926,4.824 C50.5637926,4.824 50.3717926,4.632 50.3717926,4.312 L50.3717926,1.112 C50.3717926,0.792 50.5637926,0.6 50.8837926,0.6 L62.6597926,0.6 Z M66.1517235,18.392 C66.1517235,21.4 67.7517235,23 70.7597235,23 L74.3437235,23 C77.3517235,23 78.9517235,21.4 78.9517235,18.392 L78.9517235,5.208 C78.9517235,2.2 77.3517235,0.6 74.3437235,0.6 L70.7597235,0.6 C67.7517235,0.6 66.1517235,2.2 66.1517235,5.208 L66.1517235,18.392 Z M71.5917235,18.872 C70.7597235,18.872 70.3117235,18.456 70.3117235,17.592 L70.3117235,6.008 C70.3117235,5.176 70.7597235,4.728 71.5917235,4.728 L73.6397235,4.728 C74.4717235,4.728 74.9197235,5.176 74.9197235,6.008 L74.9197235,17.592 C74.9197235,18.456 74.4717235,18.872 73.6397235,18.872 L71.5917235,18.872 Z M96.2395852,0.6 C93.2635852,0.6 91.6315852,2.2 91.6315852,5.208 L91.6315852,10.744 C91.6315852,11.352 91.9195852,11.736 92.4955852,11.928 L100.175585,14.424 L100.175585,17.656 C100.175585,18.52 99.7275852,18.936 98.8955852,18.936 L97.1675852,18.936 C96.3675852,18.936 95.8875852,18.52 95.8875852,17.656 L95.8875852,16.312 C95.8875852,15.96 95.7275852,15.8 95.3755852,15.8 L92.1435852,15.8 C91.8235852,15.8 91.6315852,15.96 91.6315852,16.312 L91.6315852,18.392 C91.6315852,21.4 93.2635852,23 96.2395852,23 L99.8235852,23 C102.831585,23 104.431585,21.4 104.431585,18.392 L104.431585,12.376 C104.431585,11.768 104.143585,11.384 103.599585,11.192 L95.8555852,8.696 L95.8555852,5.976 C95.8555852,5.144 96.3355852,4.696 97.1355852,4.696 L98.8955852,4.696 C99.7595852,4.696 100.175585,5.144 100.175585,5.976 L100.175585,7.32 C100.175585,7.64 100.367585,7.832 100.687585,7.832 L103.919585,7.832 C104.271585,7.832 104.431585,7.64 104.431585,7.32 L104.431585,5.208 C104.431585,2.2 102.831585,0.6 99.8235852,0.6 L96.2395852,0.6 Z M126.483516,0.6 C126.067516,0.6 125.875516,0.792 125.811516,1.208 L124.179516,14.584 L124.019516,14.584 L120.883516,1.144 C120.787516,0.792 120.563516,0.6 120.179516,0.6 L118.227516,0.6 C117.843516,0.6 117.619516,0.792 117.523516,1.144 L114.387516,14.584 L114.227516,14.584 L112.659516,1.208 C112.595516,0.792 112.371516,0.6 111.987516,0.6 L108.979516,0.6 C108.531516,0.6 108.307516,0.856 108.371516,1.272 L111.315516,22.392 C111.379516,22.808 111.603516,23 112.019516,23 L115.539516,23 C115.923516,23 116.147516,22.808 116.243516,22.424 L119.219516,9.304 L122.163516,22.424 C122.259516,22.808 122.483516,23 122.867516,23 L126.323516,23 C126.739516,23 126.963516,22.808 127.027516,22.424 L130.099516,1.272 C130.163516,0.856 129.939516,0.6 129.491516,0.6 L126.483516,0.6 Z M133.527447,23 C133.175447,23 133.015447,22.808 133.015447,22.488 L133.015447,1.112 C133.015447,0.792 133.175447,0.6 133.527447,0.6 L136.855447,0.6 C137.175447,0.6 137.367447,0.792 137.367447,1.112 L137.367447,22.488 C137.367447,22.808 137.175447,23 136.855447,23 L133.527447,23 Z M145.915378,0.6 C142.939378,0.6 141.307378,2.2 141.307378,5.208 L141.307378,10.744 C141.307378,11.352 141.595378,11.736 142.171378,11.928 L149.851378,14.424 L149.851378,17.656 C149.851378,18.52 149.403378,18.936 148.571378,18.936 L146.843378,18.936 C146.043378,18.936 145.563378,18.52 145.563378,17.656 L145.563378,16.312 C145.563378,15.96 145.403378,15.8 145.051378,15.8 L141.819378,15.8 C141.499378,15.8 141.307378,15.96 141.307378,16.312 L141.307378,18.392 C141.307378,21.4 142.939378,23 145.915378,23 L149.499378,23 C152.507378,23 154.107378,21.4 154.107378,18.392 L154.107378,12.376 C154.107378,11.768 153.819378,11.384 153.275378,11.192 L145.531378,8.696 L145.531378,5.976 C145.531378,5.144 146.011378,4.696 146.811378,4.696 L148.571378,4.696 C149.435378,4.696 149.851378,5.144 149.851378,5.976 L149.851378,7.32 C149.851378,7.64 150.043378,7.832 150.363378,7.832 L153.595378,7.832 C153.947378,7.832 154.107378,7.64 154.107378,7.32 L154.107378,5.208 C154.107378,2.2 152.507378,0.6 149.499378,0.6 L145.915378,0.6 Z M162.015309,0.6 C159.039309,0.6 157.407309,2.2 157.407309,5.208 L157.407309,10.744 C157.407309,11.352 157.695309,11.736 158.271309,11.928 L165.951309,14.424 L165.951309,17.656 C165.951309,18.52 165.503309,18.936 164.671309,18.936 L162.943309,18.936 C162.143309,18.936 161.663309,18.52 161.663309,17.656 L161.663309,16.312 C161.663309,15.96 161.503309,15.8 161.151309,15.8 L157.919309,15.8 C157.599309,15.8 157.407309,15.96 157.407309,16.312 L157.407309,18.392 C157.407309,21.4 159.039309,23 162.015309,23 L165.599309,23 C168.607309,23 170.207309,21.4 170.207309,18.392 L170.207309,12.376 C170.207309,11.768 169.919309,11.384 169.375309,11.192 L161.631309,8.696 L161.631309,5.976 C161.631309,5.144 162.111309,4.696 162.911309,4.696 L164.671309,4.696 C165.535309,4.696 165.951309,5.144 165.951309,5.976 L165.951309,7.32 C165.951309,7.64 166.143309,7.832 166.463309,7.832 L169.695309,7.832 C170.047309,7.832 170.207309,7.64 170.207309,7.32 L170.207309,5.208 C170.207309,2.2 168.607309,0.6 165.599309,0.6 L162.015309,0.6 Z" /> </svg> </h1><section class="about"><h2 class="about__title">The missing CSS toolbox for Stylus</h2><div class="about__sources sources"><a class="sources__link" href="https://github.com/leny/kouto-swiss"><svg class="sources__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1664 1792"> <path d="M640 1216q0 40-12.5 82t-43 76-72.5 34-72.5-34-43-76-12.5-82 12.5-82 43-76 72.5-34 72.5 34 43 76 12.5 82zM1280 1216q0 40-12.5 82t-43 76-72.5 34-72.5-34-43-76-12.5-82 12.5-82 43-76 72.5-34 72.5 34 43 76 12.5 82zM1440 1216q0-120-69-204t-187-84q-41 0-195 21-71 11-157 11t-157-11q-152-21-195-21-118 0-187 84t-69 204q0 88 32 153.5t81 103 122 60 140 29.5 149 7h168q82 0 149-7t140-29.5 122-60 81-103 32-153.5zM1664 1040q0 207-61 331-38 77-105.5 133t-141 86-170 47.5-171.5 22-167 4.5q-78 0-142-3t-147.5-12.5-152.5-30-137-51.5-121-81-86-115q-62-123-62-331 0-237 136-396-27-82-27-170 0-116 51-218 108 0 190 39.5t189 123.5q147-35 309-35 148 0 280 32 105-82 187-121t189-39q51 102 51 218 0 87-27 168 136 160 136 398z" /> </svg> See the code on GitHub</a></div><div class="about__version version">version 1.1.0 <time class="version__date" datetime="2016-12-26">26 December 2016</time> <a class="version__changelog-link" href="https://github.com/leny/kouto-swiss/blob/master/CHANGELOG.md" target="new">see changelog</a></div></section></header><div class="documentation"><nav class="main-nav" id="main-nav"><h2>Navigation</h2><ul><li><a href="#usage">Usage</a><ul><li><a href="#usage_grunt">grunt</a></li><li><a href="#usage_gulp">gulp</a></li><li><a href="#usage_third-party">third-party</a></li><li><a href="#usage_middleware">middleware</a></li><li><a href="#usage_stylus">stylus</a></li><li><a href="#usage_nib">nib</a></li><li><a href="#usage_no-conflict-mode">no-conflict-mode</a></li></ul></li><li><a href="#reset">Reset</a><ul><li><a href="#reset_meyer-reset">meyer-reset</a></li><li><a href="#reset_box-sizing-reset">box-sizing-reset</a></li><li><a href="#reset_normalize">normalize</a></li></ul></li><li><a href="#mixins">Mixins</a><ul><li><a href="#mixins_calc">calc</a></li><li><a href="#mixins_font-face">font-face</a></li><li><a href="#mixins_keyframes">keyframes</a></li><li><a href="#mixins_placeholder">placeholder</a></li><li><a href="#mixins_ratio-box">ratio-box</a></li><li><a href="#mixins_linear-gradient">linear-gradient</a></li><li><a href="#mixins_radial-gradient">radial-gradient</a></li><li><a href="#mixins_repeating-linear-gradient">repeating-linear-gradient</a></li><li><a href="#mixins_repeating-radial-gradient">repeating-radial-gradient</a></li><li><a href="#mixins_vendors">vendors</a></li></ul></li><li><a href="#functions">Functions</a><ul><li><a href="#functions_em">em</a></li><li><a href="#functions_rem">rem</a></li><li><a href="#functions_percent">percent</a></li><li><a href="#functions_modular-scale">modular-scale</a></li><li><a href="#functions_golden-ratio">golden-ratio</a></li><li><a href="#functions_color-fallback">color-fallback</a></li><li><a href="#functions_luminosity">luminosity</a></li><li><a href="#functions_analogous">analogous</a></li><li><a href="#functions_extended-analogous">extended-analogous</a></li><li><a href="#functions_monochrome">monochrome</a></li><li><a href="#functions_split-complements">split-complements</a></li><li><a href="#functions_triad">triad</a></li><li><a href="#functions_quad">quad</a></li></ul></li><li><a href="#utilities">Utilities</a><ul><li><a href="#utilities_colors">colors</a></li><li><a href="#utilities_clearfix">clearfix</a></li><li><a href="#utilities_position">position</a></li><li><a href="#utilities_size">size</a></li><li><a href="#utilities_font-stack">font-stack</a></li><li><a href="#utilities_hide-text">hide-text</a></li><li><a href="#utilities_easing">easing</a></li><li><a href="#utilities_ellipsis">ellipsis</a></li><li><a href="#utilities_flex-axis">flex-axis</a></li><li><a href="#utilities_media-query">media-query</a></li><li><a href="#utilities_retina-image">retina-image</a></li><li><a href="#utilities_retina-query">retina-query</a></li><li><a href="#utilities_triangle">triangle</a></li></ul></li><li><a href="#grid">Grid</a><ul><li><a href="#grid_system">system</a></li></ul></li></ul></nav><section class="content"><h2 class="hidden">Introduction</h2><blockquote>Stylus is great, but… where’s my Compass/Bourbon?</blockquote>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 <a href="//caniuse.com">caniuse website</a> to make your stylesheets fits your compatibility needs.</section><section class="content" id="usage"><h2>Usage</h2><section class="entry" id="usage_grunt"><h3 id="included-in-compilation-with-grunt">Included in compilation with grunt</h3> To use kouto swiss with grunt, you can use <a href="https://www.npmjs.org/package/grunt-contrib-stylus">grunt-contrib-stylus</a>, and include kouto swiss in your <code>use</code> option for the task. <pre><code class="lang-javascript">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" } } } }; }; </code></pre> </section><section class="entry" id="usage_gulp"><h3 id="included-in-compilation-with-gulp">Included in compilation with gulp</h3> To use kouto swiss with gulp, use <a href="https://www.npmjs.org/package/gulp-stylus">gulp-stylus</a> and include kouto swiss in your <code>use</code> option for the task. <pre><code class="lang-javascript">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" ) ); } ); </code></pre> </section><section class="entry" id="usage_third-party"><h3 id="included-in-compilation-with-third-party-tools">Included in compilation with third-party tools</h3> To use kouto swiss with third-party tools like <a href="https://incident57.com/codekit/">Codekit</a> or <a href="http://alphapixels.com/prepros/">Prepros</a>, you should include kouto swiss on your project by yourself. You can download it <a href="https://github.com/krkn/kouto-swiss/releases">on github</a>. More information coming soon. </section><section class="entry" id="usage_middleware"><h3 id="as-middleware-for-on-the-fly-compilation-">As middleware, for on the fly compilation.</h3> There's an exemple of how to use stylus with kouto-swiss within Connect or Express. <pre><code class="lang-javascript">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 } ) ); </code></pre> </section><section class="entry" id="usage_stylus"><h3 id="stylus-api">Stylus API</h3> To gain access to the kouto swiss tools from your Stylus files, simply add: <pre><code class="lang-stylus">@import "kouto-swiss" </code></pre> </section><section class="entry" id="usage_nib"><h3 id="using-nib-with-kouto-swiss">Using nib with kouto swiss</h3> kouto swiss is highly inspired by <a href="http://visionmedia.github.io/nib/">nib</a>. 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 <a href="https://github.com/krkn/kouto-swiss/issues">issue topic</a> to request it, or, even better if you can, <a href="https://github.com/krkn/kouto-swiss/blob/master/CONTRIBUTING.md">submit a pull request</a>! </section><section class="entry" id="usage_no-conflict-mode"><h3 id="-no-conflict-mode-mixins-aliases">no conflict mode & mixins aliases</h3> If you use kouto-swiss with other mixin libraries (such as <a href="https://github.com/Acquisio/bootstrap-stylus">bootstrap-stylus</a>), variables & mixin name colisions may happen. To avoid that problem, all the functions & mixins of kouto-swiss are also available with the <code>ks-</code> prefix/namespace before their name. You should include the kouto-swiss lib first in your stylesheets, before any other library. <h4 id="-no-conflict-mode">no-conflict mode</h4> 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 <code>ks-</code> prefixed variables & mixins availables. To use the no-conflict mode, simple set the <code>ks-no-conflict</code> variable to <code>true</code> before including kouto-swiss. <pre><code class="lang-stylus">ks-no-conflict = true @import "kouto-swiss" </code></pre> </section></section><section class="content" id="reset"><h2>Reset</h2><section class="entry" id="reset_meyer-reset"><h3 id="-meyer-reset-"><code>meyer-reset()</code></h3> A global reset, using's the <a href="http://meyerweb.com/eric/tools/css/reset/">Eric Meyer's CSS reset v2</a>. <h4 id="example">Example</h4> <h5 id="usage">Usage</h5> <pre><code class="lang-stylus">meyer-reset() </code></pre> <h5 id="result">Result</h5> <pre><code class="lang-css">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; } </code></pre> </section><section class="entry" id="reset_box-sizing-reset"><h3 id="-box-sizing-reset-"><code>box-sizing-reset()</code></h3> The box-sizing reset, setting the <code>box-sizing</code> property to <code>border-box</code>. For more information, read the post "<a href="http://www.paulirish.com/2012/box-sizing-border-box-ftw/">Box-sizing: Border-box FTW</a>" by Paul Irish. Note: From version <code>0.10</code>, the <code>box-sizing-reset()</code> function has changed his behaviour when its called from the root level : it <a href="http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">use an inheritance pattern</a>, 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. <h4 id="example">Example</h4> <h5 id="usage">Usage</h5> <pre><code class="lang-stylus"> box-sizing-reset() article box-sizing-reset() </code></pre> <h5 id="result">Result</h5> <pre><code class="lang-css">html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } article *, article *:before, article *:after { box-sizing: border-box; } </code></pre> </section><section class="entry" id="reset_normalize"><h3 id="-normalize-"><code>normalize()</code></h3> The normalize reset makes browsers render all elements more consistently and in line with modern standards. For more information, refers to the <a href="https://github.com/necolas/normalize.css">original normalize repository</a>, by <a href="https://github.com/necolas">Nicolas Gallagher</a>. <blockquote> Note: Kouto Swiss include normalize version <code>5.0.0</code> </blockquote> <h4 id="example">Example</h4> <h5 id="usage">Usage</h5> <pre><code class="lang-stylus">normalize() </code></pre> <h5 id="result">Result</h5> <pre><code class="lang-css">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; } </code></pre> </section></section><section class="content" id="mixins"><h2>Mixins</h2><section class="entry" id="mixins_calc"><h3 id="calc-">calc()</h3> Add vendor-prefix for the css3 <code>calc()</code> function. <h4 id="signature">Signature</h4> <code>calc( expr [, fallback ] )</code> <ul> <li><code>expr</code>: expression for calc. Must be quoted.</li> <li><code>fallback</code>: a fallback value for unsupported browsers. Optional.</li> </ul> <h4 id="example">Example</h4> <h5 id="usage">Usage</h5> <pre><code class="lang-stylus">body width: calc( "100% - 80px" ) body width: calc( "100% - 80px", 90% ) </code></pre> <h5 id="result">Result</h5> <pre><code class="lang-css">body { width: -webkit-calc(100% - 80px); width: calc(100% - 80px); } body { width: 90%; width: -webkit-calc(100% - 80px); width: calc(100% - 80px); } </code></pre> </section><section class="entry" id="mixins_font-face"><h3 id="font-face-">font-face()</h3> Simple <code>@font-face</code> mixin. <h4 id="signature">Signature</h4> <code>font-face( name, font-src [, weight [, style [, formats [, svg-font-name ] [, local-font-name ] ] ] ] )</code> <ul> <li><code>name</code>: name of the font, used for font-family</li> <li><code>font-src</code>: the path for the font, minus the extension</li> <li><code>weight</code>: the weight of the font, for font-weight. Optional.</li> <li><code>style</code>: the style of the font, for font-style. Optional.</li> <li><code>formats</code>: the formats to includes. Optional. Default: <code>eot woff2 woff truetype svg</code> Accepted words: <code>eot woff2 woff truetype ttf opentype otf svg local</code></li> <li><code>svg-font-name</code>: the svg font name. Optional. Default: use the <code>name</code> parameters.</li> <li><code>local-font-name</code>: the local font name. Optional. Default: use the <code>name</code> parameters.</li> </ul> <h4 id="example">Example</h4> <h5 id="usage">Usage</h5> <pre><code class="lang-stylus">font-face( "Roboto", "./fonts/Roboto-Regular-webfont", normal ) font-face( "Roboto", "./fonts/Roboto-Italic-webfont", normal, italic ) font-face( "OpenSans", "./fonts/OpenSans", formats: woff ) </code></pre> <h5 id="result">Result</h5> <pre><code class="lang-css">@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"); } </code></pre> </section><section class="entry" id="mixins_keyframes"><h3 id="keyframes-animation">keyframes & animation</h3> To make animations with css3, you'll need to use the <code>animation</code> property & the <code>@keyframes</code> structure. The <code>animation</code> property is already handled in kouto swiss by the <a href="#vendors"