Repository files navigation

Best of both worlds. Nyan CSS lets you write plain CSSwhile reaping benefits of CSS-in-JS.

Write a universal design system. You can reuse the same code anywherestarting from static HTML+CSS and ending with React and Vue.js withoutactually changing the CSS.

Minimalistic. BEM-inspiredNyan CSS convention consistsjust of 3 rules but it as bulletproof as BEM.

Use modern CSS. CoffeeScript long gone from the radars, yet we all loved it ;-)Stick to the platform to ensure the longevity of your code.

Skip to the convention |Join the community

Seeinstallation instructions for webpack.

.Header,.Text {font-family: monospace;}.Header {font-size:2rem;}.Header-size-large {font-size:2.2rem;}.Text-italic {font-style: italic;}

See other options:

• Plain HTML
• Vue.js
• Preact
• Class names

importReactfrom'react'import{Header,Text}from'./style.css'functionAnnouncement(){return(<><Headertag="h1"size="large">        Welcome Nyan CSS!</Header><Texttag="marquee"italic>        Please, welcome Nyan CSS!</Text></>)}

<h1class="Header Header-size-large">  Welcome Nyan CSS!</h1><marqueeclass="Text Text-italic">  Please, welcome Nyan CSS!</marquee>

importVuefrom'vue'import{Header,Text}from'./style.css'constAnnouncement={components:{'custom-header':Header,'custom-text':Text},template:`    <main>      <custom-header tag='h1' size='large'>Welcome Nyan CSS!!</custom-header>      <custom-text tag='marquee' italic='true'>Please, welcome Nyan CSS!</custom-text>    </main>  `}

import{h}from'preact'import{Header,Text}from'./style.css'functionAnnouncement(){return(<><Headertag="h1"size="large">        Welcome Nyan CSS!</Header><Texttag="marquee"italic>        Please, welcome Nyan CSS!</Text></>)}

import{Header,Text}from'./style.css'functionAnnouncement(){return`<h1 class='${Header({size:'large'})}'>Welcome Nyan CSS!</h1><marquee class='${Text({italic:true})}'>Please, welcome Nyan CSS!</marquee>`}

.Component is a component class.

The name must be in ClassCase, e.g..FormInput or.UI.

In this example,.Button represents<Button />.

.Button {color: white;}

.Component-disabled is a boolean prop class.

The name extension must be in camelCase, e.g..FormInput-autoFocus or.UI-dev.

.Button-disabled {opacity:0.5;}

In the example,.Button-disabled is applied to the component when itsdisabled prop is truthy:

<Buttontag="button"disabled>  Whatever</Button>

.ComponentName-color-gray is an enum prop class.

The name extensions must be in camelCase, e.g..FormInput-borderColor-lightGray or.UI-env-dev.

.Button-color-red {background: red;}.Button-color-green {background: green;}

.Button-color-red is applied to the component when itscolor prop equals"red":

<Buttontag="button"color="red">  Click Me</Button>

• @nyancss/css-modules-loader - the webpack loader for CSS Modules.
• @nyancss/css-modules - the package used to convert CSS Modules to Nyan CSS.
• @nyancss/react - the package used to convert Nyan CSS to React/Preact components.
• @nyancss/vue - the package used to convert Nyan CSS to Vue.js components.
• @nyancss/class-names - the package used to convert Nyan CSS to class names functions.

Seethe changelog.

MIT © Sasha Koss