{"id":15380505,"url":"https://github.com/bmarkov/cute-css","last_synced_at":"2025-04-15T18:40:46.745Z","repository":{"id":144026672,"uuid":"171134712","full_name":"bmarkov/cute-css","owner":"bmarkov","description":"Visual primitives for components. Use the best bits of ES6 and CSS to style your apps very quickly","archived":false,"fork":false,"pushed_at":"2019-02-18T19:38:25.000Z","size":52,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T23:43:44.483Z","etag":null,"topics":["css","css-in-js","css3","css3-in-js","es6","styled-components","web-components"],"latest_commit_sha":null,"homepage":"https://bmarkov.github.io/cute-css/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bmarkov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2019-02-17T14:57:18.000Z","updated_at":"2020-06-04T14:56:35.000Z","dependencies_parsed_at":"2023-04-14T04:17:30.583Z","dependency_job_id":null,"html_url":"https://github.com/bmarkov/cute-css","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmarkov%2Fcute-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmarkov%2Fcute-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmarkov%2Fcute-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmarkov%2Fcute-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bmarkov","download_url":"https://codeload.github.com/bmarkov/cute-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249130656,"owners_count":21217586,"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","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","css-in-js","css3","css3-in-js","es6","styled-components","web-components"],"created_at":"2024-10-01T14:23:41.495Z","updated_at":"2025-04-15T18:40:46.739Z","avatar_url":"https://github.com/bmarkov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cute CSS in JS\n\n\u0026nbsp;\n[![Price](https://img.shields.io/badge/price-FREE-0098f7.svg)](https://github.com/bmarkov/cute-css/blob/master/LICENSE)\n[![npm](https://img.shields.io/npm/v/cute-css.svg?style=flat)](https://www.npmjs.com/package/cute-css)\n[![License: APACHE](https://img.shields.io/badge/license-APACHE-blue.svg)](https://github.com/bmarkov/cute-css/blob/master/LICENSE)\n\n# \u0026lt;Cute\u0026gt;\n\n## Installation \n\n```js\nnpm i cute-css\n```\n\n[Live Demo ↗](https://bmarkov.github.io/cute-css/)\n\n```\ncute`\n    font-size: 1.5em;\n    text-align: center;\n    color: palevioletred;     \n    `\n    .querySelector('.wrapper');\n\n  cute`\n    padding: 4em;\n    background: papayawhip;\n    `\n    .querySelector('.title');\n```\n\n```\n\u003cdiv class=\"wrapper\"\u003e\n  \u003cdiv class=\"title\"\u003eHello!!! I am Cute\u003c/div\u003e\n\u003c/div\u003e\n```\n\nThe above code's result is:\n\n[\u003cimg src=\"https://raw.githubusercontent.com/https://github.com/bmarkov/cute-css/master/cute-js.png\" alt=\"Screenshot of Cute CSS\"\u003e](https://bmarkov.github.io/cute-css/)\n\n```\n cute`\n      display: inline-block;\n      border-radius: 3px;\n      padding: 0.5rem 0;\n      text-decoration: none;\n      text-align: center;\n      font-size: 18px;\n      line-height: 1.6;\n      margin: 0.5rem 1rem;\n      width: 11rem;\n      cursor: pointer;\n      background: #3F51B5;\n      color: #fff;\n      border: 2px solid #3F51B5;\n      transition: all 0.2s;\n\n      ${properties =\u003e properties.secondary ? cute.css`\n        background: white;\n        color: #3F51B5;\n      ` : ''}\n\n      ${onhover =\u003e cute.css`\n        background: #444;\n        color: #fff;\n        border-color: #444;\n      `}    \n\n      ${onactive =\u003e cute.css`\n        background: #007ACC;\n        color: #fff;\n        border-color: #007ACC;\n      `}                  \n    `\n    .okButton()\n    .cancelButton({secondary: true})\n```            \n\n```\n   \u003cprimary-button id=\"okButton\"\u003eOK\u003c/primary-button\u003e\n   \u003csecondary-button id=\"cancelButton\"\u003eCANCEL\u003c/secondary-button\u003e\n```     \n\n[\u003cimg src=\"https://raw.githubusercontent.com/https://github.com/bmarkov/cute-css/master/cute.png\" alt=\"Screenshot of Cute CSS\"\u003e](https://bmarkov.github.io/cute-css/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmarkov%2Fcute-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbmarkov%2Fcute-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmarkov%2Fcute-css/lists"}