KIS.CSS (pronounced as 'kisses') is a forward looking CSS library
that is minimal and lightweight in terms of functionality and size.
Keep it simple. Focus on functionality. Visual design and scale come after an idea comes to life, not before.
At our search lab, we spin through testing ideas that have a half-life of less than two weeks most of the time. To get to a functional and usable state before the idea decays, we needed a CSS library that let the idea come to life without suffering from undue cognitive load to get something displayed on the screen that is decent to look at. Such a library should not restrict or dictate our choices in visual design down the road.
Our goal is to be able to get to a testable product fast without losing the ability to improve on the visual aesthetics later. We think using large and complex CSS libraries during conception stage is not the right choice for validating product ideas.
- Designed to make semantic html look good without classes (wip)
- Mobile first css (wip)
- Pure CSS to enable easy integration with popular reactive JS frameworks
If using Yarn,
yarncan replace all occurences ofnpmin the command line below. 👌
If live-server is not installed globally do so now.
# is live-server installed ?
$ which live-server
# if not installed, install it now
$ npm install --global live-server
| task | command line | notes |
|---|---|---|
| install | npm install |
installs dependencies |
| lint | npm run lint |
run eslint on src folder |
| lint:fix | npm run lint:fix |
run eslint on src folder |
| test | npm run test |
simple render test |
| build | npm run build |
compile to build folder |
| start | npm run start |
web serve build folder |
| watch | npm run watch |
watch/build changes to app and web folders |
- Documentation (WIP, in the meantime take a look at the demo app)
- Write instructions on how to use git subtree for integration
- Enhance core/* to make webby apps look better out of the box
- Semver based release management
- Iterate on mobile first css (as bugs get reported)
- normalize.css
kitchen-sink.htmlcame from HiQ- Most of the content for the test home page came from PicnicCss
- Inspiration and alignment to principles of simplicity came from HiQ and PicnicCSS
- Baseline scss code for kiscss came from PicnicCss which is under MIT License
- Tooltip code adopted from balloon.css
- Tabs code adopted from mikestreety
- Nav code adopted from mutedblues
You have choices. Turns out we are not alone in our thinking. Search for 'lightweight' and 'classless' css libraries in the awesome css frameworks list maintained by Troxler?.
MIT