Keep It CSS

What?

Let's use more CSS custom properties to help ourselves with communicating the interactivity between JavaScript and CSS! Instead of generating and manipulating dynamic styles in JavaScript, we can take advantage of the custom CSS properties to provide CSS with the seeds of interactivity. So that we can implement a greater portion of interactivity right in the CSS without sacrificing from the dynamic nature of styling that we often need.

KICSS is just a mental guideline for creating dynamic UIs. Whether you use a CSS-in-JS tech or CSS Modules or a pre-processor language is irrelevant. However, it may reduce your need for these tools.

KICSS stands for "Keep It CSS" and it refers to finding ways for keeping dynamic styling in CSS. Naming is inspired by the famous programming motto KISS.

It's also the name of a small JavaScript library that can help you achieve that goal.

Please check the examples below to understand the idea better.

Why?

Simply because CSS is already an excellent language for dealing with the styling on web. If only CSS had built-in ways to declare styles that are based on more real-time user events and dynamically built UIs. But we can do it ourselves!

If followed, this approach should help you with replacing much of your dynamically-generated CSS code with static, pure CSS that can deliver the same dynamic styling needs.

Depending on the case, it may eliminate your need for a 3rd party animation library.

This way of thinking will force you to learn more about what CSS can do for you.

If you (optionally) use the JavaScript library, you can easily interpolate dynamic values and create nice, real-time animations.

Examples using kicss.js

Installation and usage of the JavaScript library

Installation

npm install --save kicss

# or

yarn add kicss

Usage

Option 1: Include the script in HTML:

To access KICSS from global window object:

<script type="module" src="kicss.js"></script>

Or:

<script type="module" src="kicss.js?report=cursor,scroll"></script>

Available global properties to ask: cursor, scroll.

Option 2: Import as module

import kicss from 'kicss'

Or:

import { reportGlobals, reportVariable, reportScroll } from 'kicss'

API

reportScroll(name | options, direction | options)

Will report scroll values. Should be used as the scroll event handler on the element.

Parameters:

  • name: string
  • direction: 'horizontal' | 'vertical'
  • options:
    • name: string
    • direction: 'horizontal' | 'vertical'
    • interpolations?: Interpolation[]

Usage examples: Carousel Horizontal, Scroll Content

reportVariable(name, value | options)

Will assign a css property to an element if scope is present, otherwise to :root

If value is provided as a function, then it will be treated as a responsive variable and refreshed if window dimensions change.

Parameters:

  • name: string
  • value: function | any
  • options:
    • value: function | any
    • scope?: DOMNode (default: documentElement)

Usage examples: Carousel Horizontal, Scroll Content Staggered Animation Progress Car

reportIndex(selector, options)

Will run the query for the given selector, and assign an index css property to each item. If the 'rowIndexBy' option is present, a row index will be also assigned.

Parameters:

  • selector: string
  • options:
    • indexVariableName?: string (default: '--index')
    • rowIndexVariableName?: string (default: '--row-index')
    • rowIndexBy?: number

Usage examples: Doodle 1, Doodle 2 Staggered Animation

reportGlobals(options)

Will report global properties: cursor and scroll

options?: (default: { scroll: true, cursor: true })

  • scroll?: boolean (default: true)
  • cursor?: boolean (default: true)

Usage examples: Doodle 1, Doodle 2 Preserved Contrast

cursor()

Will report cursor position.

Usage examples: Camera,

time()

Will report seconds and milliseconds elapsed since time() is called.

Usage examples: Time,