• Stars
    star
    379
  • Rank 113,004 (Top 3 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 10 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A complete CSS framework for Stylus

kouto swiss

NPM version Build Status Dependency Status Downloads counter No Maintenance Intended

A complete CSS framework for Stylus


kouto swiss is a complete CSS framework for Stylus, inspired by great tools like nib, compass, bourbon…

Installation

$ npm install --save-dev kouto-swiss

Usage

Included in compilation, with grunt or gulp.

Grunt

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

You can also use grunt-ks-stylus, which is a fork of grunt-contrib-stylus, with kouto swiss included.

Gulp

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

PHPStorm/WebStorm File Watchers

On some IDEs like PHPStorm and Webstorm, you can automatically compile your styles as they change, without relying on a third-party tool. In PHPStorm and Webstorm, this functionality is known as file watchers. To use with PHPStorm or WebStorm, as a file watcher, simply:

  • Ensure you have added kouto-swiss as a dependency:
$ npm install --save-dev kouto-swiss
  • Do an npm install
  • Create a new file watcher with settings like these: image
  • Create an @import in one of you .styl files:
@import "../../../node_modules/kouto-swiss" // import kuoto-swiss for auto-prefixing (or whatever relative path where node-modules lives

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 example 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"

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests and update the docs for any new or changed functionality. More informations in the CONTRIBUTING.md file.

Special call for contribution : someone who's English is better than I am !

I am committed to improving the readability of documents with heart and soul. As you can see, I'm not a native English speaker. I need your help.

If you want to help the kouto swiss project, but don't want to write code, please consider reviewing the docs, correcting my very bad English. Many thanks!

Release History

For more details, look at the changelog.

  • 2017-02-26: version 1.1.0
  • 2016-12-26: version 1.0.0
  • 2016-12-06: version 0.14.0
  • 2016-11-12: version 0.13.0
  • 2016-03-25: version 0.12.0
  • 2014-11-08: version 0.11.0
  • 2014-08-18: version 0.10.0
  • 2014-07-19: version 0.9.0
  • 2014-06-30: version 0.8.0
  • 2014-05-20: version 0.1.0
  • 2014-05-05: version 0.0.1
  • 2014-05-03: starting project

License

Copyright (c) 2014 leny Licensed under the MIT license.

Licenses for ressources used in docs

Fonts

More Repositories

1

grunt-parker

Grunt plugin for parker, a stylesheet analysis tool.
CSS
43
star
2

atom-tree-ignore

Use a .atomignore file to hide files & folder in tree view
JavaScript
41
star
3

atom-easy-motion-redux

MovementSpeed++. Jump to any word in your current view super fast. (redux)
JavaScript
38
star
4

grunt-todo

Find TODO, FIXME & NOTE in project files...
JavaScript
24
star
5

enigjewo

An open-source remake of GeoGuessr.
JavaScript
20
star
6

react-use-storage

React Hook to handle local and session storage
JavaScript
19
star
7

gulp-supervisor

Run supervisor as a gulp task for easy integration with the rest of your workflow
JavaScript
18
star
8

seve

Run a tiny & simple server from the current folder in your terminal (like, for test & stuffs).
JavaScript
15
star
9

konpa

Trucs & astuces à l'usage des jeunes développeurs web
CoffeeScript
14
star
10

tankipas

Compute approximate development time spent on a project, using logs from version control system.
CoffeeScript
13
star
11

atom-w3c-validation

Validate your HTML and CSS files using W3C validators.
JavaScript
12
star
12

prefiks

Get the vendors prefixes of a css properties, according to caniuse data.
JavaScript
10
star
13

pwendok

🧰 My dotfiles
Shell
8
star
14

grunt-supervisor

Run supervisor as a grunt task for easy configuration and integration with the rest of your workflow
JavaScript
7
star
15

mtg-decklist-printer

Just a simple decklist printer, generating decklist that fits in a card sleeve.
CSS
6
star
16

becode-hamilton-relay

💬 Vos prédécesseurs ont quelque chose à vous dire...
5
star
17

anye

Server-agnostic named URL builder for node.js
JavaScript
5
star
18

twitter-scraper

A simple scraper to gather users' stats from twitter profile.
JavaScript
4
star
19

atom-indent-toggle-on-paste

Add a shortcut to toggle the auto-indent mecanism on paste
JavaScript
4
star
20

gadkod

Check inside your files for suspicious unicode characters in code (like greek question mark…)
JavaScript
4
star
21

becode-js-corrections

HTML
3
star
22

atom-pane-manager

Set your panes layout, move your files between them, and other useful pane-related stuffs.
JavaScript
3
star
23

becode-hamilton-3-js

HTML
3
star
24

atom-string-looper

Change word case, number value and loop between keywords with the arrow of your keyboard.
CoffeeScript
3
star
25

leny.github.io

🧐 Personal homepage.
JavaScript
2
star
26

flatland.be

flatland.be website
JavaScript
2
star
27

mesaj

A simple command-line wrapper over Apple's Message app.
JavaScript
2
star
28

vim-wrkshp

💡 A small, introductive workshop about vim, for BeCode juniors.
2
star
29

atom-apidoc-snippets

Snippets collection for API documentation with apidoc.
CoffeeScript
2
star
30

bl72ToLatLng

Conversion from Belgian Lambert 72 projection to WGS84 latitude/longitude.
JavaScript
2
star
31

vibox

Node.js cli helper for VirtualBox management
JavaScript
2
star
32

ask

🦁 Miss your leny? Need tech help? Just ask!
2
star
33

posib

Simple in-place editing CMS for node.js
JavaScript
2
star
34

pwops

🍃 Agnostic CSS-in-JS facilitator
JavaScript
2
star
35

koutla-swiss

🎨 CSS-in-JS toolkit, inspired by Kouto-Swiss
JavaScript
2
star
36

atom-wrap-and-pad

Wrap and pad selection.
JavaScript
2
star
37

tablodbo

A CLI-dashboard for your npm packages
CoffeeScript
2
star
38

konteks

JavaScript
1
star
39

blokchen

Messing around with blockchain & js
JavaScript
1
star
40

becode-stream

A small React/GraphQL app - made during a stream
JavaScript
1
star
41

leny

1
star
42

touteta

Get the state of all git repos within a directory
JavaScript
1
star
43

anbriyon

Something I'm working on…
HTML
1
star
44

atom-logo

Logo TextMate bundle converted for Atom
CoffeeScript
1
star
45

box-sizing-reset.css

CSS
1
star
46

kourikoulom

🧐 My resume.
JavaScript
1
star
47

jeyo-distans

Get distance between two geographic coordinates
JavaScript
1
star
48

mitan-eko

(really) simple log middleware for express
JavaScript
1
star
49

miwa

Dynamic ORM for node.js
1
star
50

atom-html-outliner

Check the outline of HTML file, using html 4 & html 5 specs.
JavaScript
1
star
51

klopedi

Des trucs à retenir
1
star
52

pandri

In-memory key/value store, with json file backup.
JavaScript
1
star
53

skyfish

Dynamic Multiple Script Loading in Javascript
JavaScript
1
star
54

triton

JavaScript
1
star
55

banye

JavaScript
1
star
56

emotion-box-sizing-reset

box-sizing reset for Emotion CSS-in-JS library.
JavaScript
1
star
57

dotmux

🧰 Dotfiles & scripts for tmux
Shell
1
star
58

jeolok

Improved navigator.geolocation, with better callbacks and new stuffs.
CoffeeScript
1
star
59

eslint-config

JavaScript
1
star
60

pomidor

⏲ A small pomodoro with React - 2021 edition
JavaScript
1
star
61

bowlstats

🎳 A small bowling stats tracker
TypeScript
1
star
62

linter-gadkod

Lint your file for suspicious unicode characters in code (like greek question mark…)
JavaScript
1
star
63

zoondo

♟️ Implementing an old boardgame for the web (following a YouTube serie)
JavaScript
1
star
64

docker-neovim

☣️ My neovim configuration, portable in a docker container
Dockerfile
1
star
65

aklet

🎯 Un petit jeu d'exploration sur Wikipédia
JavaScript
1
star
66

feweb-grunt-slides

Slides & files from GruntJS introduction talk @ feweb (french)
CSS
1
star
67

kompare

Compare an object with a simple schema.
JavaScript
1
star
68

bizniskat

My online, professional business card
HTML
1
star
69

meet-svelte

Just some Svelte test project, discovering the tech
JavaScript
1
star
70

delnatte.be

Static portal page for delnatte.be
CSS
1
star
71

emotion-meyer-reset

Eric Meyer's reset for Emotion CSS-in-JS library.
JavaScript
1
star
72

mpnpm

My Personal NPM (NPM Lazy Mirror)
CoffeeScript
1
star
73

figi

Parse emoticons in text and replace by html images... or whatever you need.
JavaScript
1
star
74

pweneovim

🧰 My neovim configuration files
Vim Script
1
star
75

zouti

Useful tools & functions we use on every projects
CoffeeScript
1
star