{"id":22994852,"url":"https://github.com/scriptype/kicss","last_synced_at":"2025-08-13T22:32:06.174Z","repository":{"id":148624967,"uuid":"320707285","full_name":"scriptype/kicss","owner":"scriptype","description":"CSS first real-time interactions","archived":false,"fork":false,"pushed_at":"2024-09-17T16:01:46.000Z","size":2644,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-11T12:46:47.743Z","etag":null,"topics":["css","css3","design","ui","ux"],"latest_commit_sha":null,"homepage":"https://enes.in/kicss","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scriptype.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-11T23:32:16.000Z","updated_at":"2024-09-17T16:01:50.000Z","dependencies_parsed_at":"2023-05-20T17:45:43.673Z","dependency_job_id":null,"html_url":"https://github.com/scriptype/kicss","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/scriptype/kicss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptype%2Fkicss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptype%2Fkicss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptype%2Fkicss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptype%2Fkicss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scriptype","download_url":"https://codeload.github.com/scriptype/kicss/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptype%2Fkicss/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270329186,"owners_count":24565772,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-13T02:00:09.904Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","design","ui","ux"],"created_at":"2024-12-15T05:27:31.740Z","updated_at":"2025-08-13T22:32:05.736Z","avatar_url":"https://github.com/scriptype.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Keep It CSS\n\n## What?\n\nLet'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.\n\nKICSS 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.\n\nKICSS 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.\n\nIt's also the name of a small JavaScript library that can help you achieve that goal.\n\nPlease check the examples below to understand the idea better.\n\n## Why?\n\nSimply 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!\n\nIf 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.\n\nDepending on the case, it \u003cem\u003emay\u003c/em\u003e eliminate your need for a 3rd party animation library.\n\nThis way of thinking will force you to learn more about what CSS can do for you.\n\nIf you (optionally) use the JavaScript library, you can easily interpolate dynamic values and create nice, real-time animations.\n\n## Examples\n\n*   [Camera](https://enes.in/kicss/examples/camera)\n*   [Doodle 1](https://enes.in/kicss/examples/doodle-1)\n*   [Doodle 2](https://enes.in/kicss/examples/doodle-2)\n*   [Carousel Horizontal](https://enes.in/kicss/examples/carousel-horizontal)\n*   [Carousel Horizontal 2](https://enes.in/kicss/examples/carousel-horizontal-2)\n*   [Parallax Cursor](https://enes.in/kicss/examples/parallax-cursor)\n*   [Parallax Page](https://enes.in/kicss/examples/parallax-page)\n*   [Parallax Scroll](https://enes.in/kicss/examples/parallax-scroll)\n*   [Particles Following Cursor](https://enes.in/kicss/examples/particles-following-cursor)\n*   [Progress Bar](https://enes.in/kicss/examples/progressbar)\n*   [Progress Car](https://enes.in/kicss/examples/progresscar)\n*   [Preserved Contrast](https://enes.in/kicss/examples/preserved-contrast)\n*   [Scroll Content](https://enes.in/kicss/examples/scroll-content)\n*   [Staggered Animation](https://enes.in/kicss/examples/staggered-animation)\n*   [Telegram Spinner](https://enes.in/kicss/examples/telegram-spinner)\n\n## Installation and usage of the JavaScript library\n\n### Installation\n\n```sh\nnpm install --save kicss\n\n# or\n\nyarn add kicss\n```\n\n### Usage\n\n#### Option 1: Include the script in HTML:\n\nTo access KICSS from global `window` object:\n\n```html\n\u003cscript type=\"module\" src=\"kicss.js\"\u003e\u003c/script\u003e\n```\n\nOr:\n\n```html\n\u003cscript type=\"module\" src=\"kicss.js?report=cursor,scroll\"\u003e\u003c/script\u003e\n```\n\nAvailable global properties to ask: `cursor`, `scroll`.\n\n#### Option 2: Import as module\n\n```js\nimport kicss from 'kicss'\n```\n\nOr:\n\n```js\nimport { reportGlobals, reportVariable, reportScroll } from 'kicss'\n```\n\n## API\n\n### reportScroll(name | options, direction | options)\n\nWill report scroll values. Should be used as the scroll event handler on the element.\n\nParameters:\n\n*   name: string\n*   direction: 'horizontal' | 'vertical'\n*   options:\n    *   name: string\n    *   direction: 'horizontal' | 'vertical'\n    *   interpolations?: Interpolation[]\n\nUsage examples: [Carousel Horizontal](https://enes.in/kicss/examples/carousel-horizontal), [Scroll Content](https://enes.in/kicss/examples/scroll-content)\n\n### reportVariable(name, value | options)\n\nWill assign a css property to an element if scope is present, otherwise to :root\n\nIf value is provided as a function, then it will be treated as a responsive variable and refreshed if window dimensions change.\n\nParameters:\n\n*   name: string\n*   value: function | any\n*   options:\n    *   value: function | any\n    *   scope?: DOMNode (default: documentElement)\n\nUsage examples: [Carousel Horizontal](https://enes.in/kicss/examples/carousel-horizontal), [Scroll Content](https://enes.in/kicss/examples/scroll-content) [Staggered Animation](https://enes.in/kicss/examples/staggered-animation) [Progress Car](https://enes.in/kicss/examples/progresscar)\n\n### reportIndex(selector, options)\n\nWill 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.\n\nParameters:\n\n*   selector: string\n*   options:\n    *   indexVariableName?: string (default: '--index')\n    *   rowIndexVariableName?: string (default: '--row-index')\n    *   rowIndexBy?: number\n\nUsage examples: [Doodle 1](https://enes.in/kicss/examples/doodle-1), [Doodle 2](https://enes.in/kicss/examples/doodle-2) [Staggered Animation](https://enes.in/kicss/examples/staggered-animation)\n\n### reportGlobals(options)\n\nWill report global properties.\n\noptions?: (default: { scroll: true, cursor: true })\n\n*   scroll?: boolean (default: true)\n*   cursor?: boolean (default: true)\n\nUsage examples: [Doodle 1](https://enes.in/kicss/examples/doodle-1), [Doodle 2](https://enes.in/kicss/examples/doodle-2) [Preserved Contrast](https://enes.in/kicss/examples/preserved-contrast)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptype%2Fkicss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscriptype%2Fkicss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptype%2Fkicss/lists"}