https://github.com/bmarkov/cute-css

Visual primitives for components. Use the best bits of ES6 and CSS to style your apps very quickly
https://github.com/bmarkov/cute-css

css css-in-js css3 css3-in-js es6 styled-components web-components

Last synced: about 1 year ago
JSON representation

Visual primitives for components. Use the best bits of ES6 and CSS to style your apps very quickly

• Host: GitHub
• URL: https://github.com/bmarkov/cute-css
• Owner: bmarkov
• License: apache-2.0
• Created: 2019-02-17T14:57:18.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-02-18T19:38:25.000Z (over 7 years ago)
• Last Synced: 2025-03-28T23:43:44.483Z (about 1 year ago)
• Topics: css, css-in-js, css3, css3-in-js, es6, styled-components, web-components
• Language: JavaScript
• Homepage: https://bmarkov.github.io/cute-css/
• Size: 50.8 KB
• Stars: 9
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Cute CSS in JS

 

[![Price](https://img.shields.io/badge/price-FREE-0098f7.svg)](https://github.com/bmarkov/cute-css/blob/master/LICENSE)

[![npm](https://img.shields.io/npm/v/cute-css.svg?style=flat)](https://www.npmjs.com/package/cute-css)

[![License: APACHE](https://img.shields.io/badge/license-APACHE-blue.svg)](https://github.com/bmarkov/cute-css/blob/master/LICENSE)

# <Cute>

## Installation 

```js

npm i cute-css

```

[Live Demo ↗](https://bmarkov.github.io/cute-css/)

```

cute`

    font-size: 1.5em;

    text-align: center;

    color: palevioletred;     

    `

    .querySelector('.wrapper');

  cute`

    padding: 4em;

    background: papayawhip;

    `

    .querySelector('.title');

```

```



  
Hello!!! I am Cute



```


The above code's result is:

[](https://bmarkov.github.io/cute-css/)

```

 cute`

      display: inline-block;

      border-radius: 3px;

      padding: 0.5rem 0;

      text-decoration: none;

      text-align: center;

      font-size: 18px;

      line-height: 1.6;

      margin: 0.5rem 1rem;

      width: 11rem;

      cursor: pointer;

      background: #3F51B5;

      color: #fff;

      border: 2px solid #3F51B5;

      transition: all 0.2s;

      ${properties => properties.secondary ? cute.css`

        background: white;

        color: #3F51B5;

      ` : ''}

      ${onhover => cute.css`

        background: #444;

        color: #fff;

        border-color: #444;

      `}    

      ${onactive => cute.css`

        background: #007ACC;

        color: #fff;

        border-color: #007ACC;

      `}                  

    `

    .okButton()

    .cancelButton({secondary: true})

```            

```

   OK

   CANCEL

```     

[](https://bmarkov.github.io/cute-css/)