Giter Site home page Giter Site logo

sip's Introduction

Install

yarn add sip.css

Sip?

Sip takes micro styles and outputs real CSS:

Sip({ m:4 }) // โ†ฃ { margin: 12px }

This can be used on components:

<Component sip={{ m:4 }} />

And processed with any CSS-in-JS implementation or simple inline styles:

import Sip from 'sip.css'

const Component = ({ sip }) => <div style={{ ...Sip(sip) }} />

Try Sip out on RunKit

Paradigm

CSS at scale === ๐Ÿ˜ซ. And scoping your styles to components isn't enough. You still end up with styles tightly coupled to logic. By enforcing an architecture that exposes only a minimal set of presentational components this coupling disappears. These primitive components (Button, Text, View and co) can then be fine-tuned when used by other functional components. Sip enables this through the use of atomic-like styles.

Read the origin story on Medium!

Refreshment

  • Framework-agnostic - just outputs CSS objects
  • Supports media queries - sip={{ m:2, m@md: 4 }}
  • Component library and style-guide compatible
  • Designed to work with a central set of reusable, presentational components
  • Enables any level of application logic refactoring without losing design! And vice-versa.

Take a look at the examples

Contributing

Setup

yarn

Build

yarn build

Test

yarn test

sip's People

Contributors

lukehedger avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

mrtibbles

sip's Issues

Webpack2 import

I'm trying to use Sip.css with webpack 2 / react-create-app but the result of the import is a string.

import Sip from 'sip.css'

console.log(Sip) -> /static/media/sip.5c5e6212.mjs
console.log(typeof Sip) -> string

I am doing something wrong?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.