All Projects → chrisfrank → Nanostyled

chrisfrank / Nanostyled

A <1kB library for styling React components as if with CSS-in-JS, without CSS-in-JS

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Nanostyled

Polished
A lightweight toolset for writing styles in JavaScript ✨
Stars: ✭ 7,074 (+6701.92%)
Mutual labels:  styled-components, css-in-js
Styled Theming
Create themes for your app using styled-components
Stars: ✭ 1,067 (+925.96%)
Mutual labels:  styled-components, css-in-js
Styled Components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Stars: ✭ 35,473 (+34008.65%)
Mutual labels:  styled-components, css-in-js
Styled Tools
Useful interpolated functions for CSS-in-JS
Stars: ✭ 761 (+631.73%)
Mutual labels:  styled-components, css-in-js
Styled Components Rhythm
Vertical Rhythm and Font Baselines with Styled Components
Stars: ✭ 76 (-26.92%)
Mutual labels:  styled-components, css-in-js
Styled System
⬢ Style props for rapid UI development
Stars: ✭ 7,126 (+6751.92%)
Mutual labels:  styled-components, css-in-js
Postjss
Use the power of PostCSS in compiling with JSS
Stars: ✭ 40 (-61.54%)
Mutual labels:  styled-components, css-in-js
Design System Utils
👩‍🎨 Access your design tokens with ease
Stars: ✭ 465 (+347.12%)
Mutual labels:  styled-components, css-in-js
Tailwind Styled Component
Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering
Stars: ✭ 57 (-45.19%)
Mutual labels:  styled-components, css-in-js
Cabana React
A design system built especially for both Sketch and React. 💎⚛️
Stars: ✭ 58 (-44.23%)
Mutual labels:  styled-components, css-in-js
Design System
Priceline.com Design System
Stars: ✭ 604 (+480.77%)
Mutual labels:  styled-components, css-in-js
React Image Smooth Loading
[not maintained] Images which just flick to appear aren't cool. Images which appear smoothly with a fade like Instagram are cool
Stars: ✭ 84 (-19.23%)
Mutual labels:  styled-components, css-in-js
Glamorous Native
React Native component styling solved💄
Stars: ✭ 566 (+444.23%)
Mutual labels:  styled-components, css-in-js
Onno
Responsive style props for building themed design systems
Stars: ✭ 95 (-8.65%)
Mutual labels:  styled-components, css-in-js
React Redux Saga Boilerplate
Starter kit with react-router, react-helmet, redux, redux-saga and styled-components
Stars: ✭ 535 (+414.42%)
Mutual labels:  styled-components, css-in-js
Cattous
CSS in JSX for lazy developers, built using styled-components and styled-system
Stars: ✭ 38 (-63.46%)
Mutual labels:  styled-components, css-in-js
Twin.macro
🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: ✭ 5,137 (+4839.42%)
Mutual labels:  styled-components, css-in-js
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. 💅
Stars: ✭ 428 (+311.54%)
Mutual labels:  styled-components, css-in-js
Atomize
library for creating atomic react components
Stars: ✭ 54 (-48.08%)
Mutual labels:  styled-components, css-in-js
Horror
😱 React HTML elements with CSS-in-JS
Stars: ✭ 78 (-25%)
Mutual labels:  styled-components, css-in-js

Nanostyled

Nanostyled is a tiny library (< 1 Kb) for building styled UI elements in React and Preact.

Like a CSS-in-JS library, nanostyled encapsulates complex styles into simple, tweakable components:

<Button>A nice-looking button</Button>
<Button color="blue">A nice-looking button that is blue</Button>

Unlike a CSS-in-JS library, nanostyled doesn't parse CSS in JS, which makes your bundle smaller, your components faster, and your server-side-rendering a breeze.

Low overhead Props-controlled, component-based API Zero-config SSR
nanostyled
CSS-in-JS
Plain CSS


Install

npm install nanostyled

Use

Nanostyled works by mapping style props onto class names from your atomic CSS framework of choice, like Tachyons or Tailwind.

A nanostyled Button

import nanostyled from 'nanostyled';
// This example uses CSS classes from Tachyons
import 'tachyons/css/tachyons.css';

// A Button via three style props:
const Button = nanostyled('button', {
  color: 'white',
  bg: 'bg-blue',
  base: 'fw7 br3 pa2 sans-serif f4 bn input-reset',
});

const App = () => (
  <div>
    <Button>Base Button</Button>
    <Button bg="bg-yellow">Yellow Button</Button>
  </div>
);

Rendering <App /> produces this markup:

<div>
  <button class="white bg-blue fw7 br3 pa2 sans-serif f4 bn input-reset">Base Button</button>
  <button class="white bg-yellow fw7 br3 pa2 sans-serif f4 bn input-reset">Yellow Button</button>
</div>

When a nanostyled component renders, it consumes its style props and merges them into an HTML class string, as per above.

Which style props to use is up to you. In the <Button> above, it would be

  • Easy to change text color via the color prop
  • Easy to change background color via the bg prop
  • Hard to change other styles without totally rewriting the base prop

A more flexible Button

By using more style props, we can make a more flexible button:

import nanostyled from 'nanostyled';
import 'tachyons/css/tachyons.css';

const FlexibleButton = nanostyled('button', {
  color: 'white', // white text
  bg: 'bg-blue', // blue background
  weight: 'fw7', // bold font
  radius: 'br3', // round corners
  padding: 'pa2', // some padding
  typeface: 'sans-serif', // sans-serif font
  fontSize: 'f4', // font size #4 in the Tachyons font scale
  base: 'bn input-reset', // remove border and appearance artifacts
});

Rendering a stock <FlexibleButton /> will produce the same markup as its simpler relative. But it's much easier to render alternate styles:

<FlexibleButton bg="bg-light-green" color="black" weight="fw9" radius="br4">
  Button with a green background, black text, heavier font, and rounder corners
</FlexibleButton>

When you need a variation that you didn't plan for in your style props, you can still use the className prop:

<FlexibleButton className="dim pointer">
  A button that dims on hover and sets the cursor to 'pointer'
</FlexibleButton>

A full starter UI Kit

Here's a proof-of-concept UI kit on CodeSandbox.

Use in Preact and other React-like libraries

Under the hood, nanostyled is built as a library-agnostic factory function. To use it in Preact without a compatibility layer, import the factory directly:

import { h } from 'preact';
import nanoFactory from 'nanostyled/factory';
const nanostyled = nanoFactory(h);

const Button = nanostyled('button', {
  bg: 'bg-blue',
  color: 'white',
});

API Reference

nanostyled(tag, styleProps)

The nanostyled function takes two arguments:

  1. tag (String) - the name of an HTML element
  2. styleProps (Object) - an object that maps component props to CSS class names
const Paragraph = nanostyled('p', {
  font: 'serif',
  size: 'f4',
});

nanostyled returns a component, which will render styleProps into the HTML class attribute, and pass all other props directly to the rendered element, with one exception:

You can use the special as prop to change the HTML element rendered by a nanostyled component. If, say, you've made a nanostyled button, but you want it to render as an a tag sometimes, do this:

const Button = nanostyled('button', { color: 'white', bg: 'black' });

<Button>A button</Button>
<Button as="a">Looks like a button, is a link</Button>

Performance

In a rudimentary benchmark (test/benchmark.js), a nanostyled Button renders ~ 2x more quickly than a similar Button built with styled-components.

In addition to rendering components more quickly, nanostyled is also almost two orders of magnitude smaller than styled-components over the wire:

nanostyled styled-components
size (min + gzip) 0.4 kB 15.3 kB
3G download time 12ms 305ms

Server-Side Rendering

When rendering on a server, just use nanostyled normally.

Related Projects

Browser Support

Nanostyled aims to run in any browser that implements ES5, including IE 9+. if you discover otherwise, please file an issue.

Contributing

Bugs

Please open an issue on Github.

Pull requests

PRs are welcome. Please include tests! See test/nanostyled.test.js for the format to follow.

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].