All Projects β†’ streamich β†’ Freestyler

streamich / Freestyler

5th generation CSS-in-JS library

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Freestyler

Goober
πŸ₯œ goober, a less than 1KB πŸŽ‰ css-in-js alternative with a familiar API
Stars: ✭ 2,317 (+907.39%)
Mutual labels:  css-in-js
Gatsby Theme Storefront Shopify
Create a Shopify store with Gatsby JS πŸ›οΈ πŸ›’
Stars: ✭ 175 (-23.91%)
Mutual labels:  css-in-js
Css In Js
Autocomplete React Native / JS Styles and converting plain CSS to JS styles
Stars: ✭ 192 (-16.52%)
Mutual labels:  css-in-js
Rogue.js
The "nearly invisible" way to server-render React applications
Stars: ✭ 1,923 (+736.09%)
Mutual labels:  css-in-js
Fela
State-Driven Styling in JavaScript
Stars: ✭ 2,097 (+811.74%)
Mutual labels:  css-in-js
Grid
This package has moved and renamed
Stars: ✭ 2,079 (+803.91%)
Mutual labels:  css-in-js
Blog
δΈ€θˆ¬δΈδΌšε†™ API η±»ζ–‡η« οΌŒεŠͺεŠ›ε†™ζœ‰θ₯ε…»ηš„ζ–‡η« οΌŒε–œζ¬’θ―·η‚Ή star
Stars: ✭ 146 (-36.52%)
Mutual labels:  css-in-js
Axs
Stupid simple style components for React
Stars: ✭ 214 (-6.96%)
Mutual labels:  css-in-js
Vue Emotion
Seamlessly use emotion (CSS-in-JS) with Vue.js
Stars: ✭ 173 (-24.78%)
Mutual labels:  css-in-js
Emotion
πŸ‘©β€πŸŽ€ CSS-in-JS library designed for high performance style composition
Stars: ✭ 14,177 (+6063.91%)
Mutual labels:  css-in-js
Gatsby Theme Superstylin
πŸ’… A Gatsby Theme with styled-components
Stars: ✭ 165 (-28.26%)
Mutual labels:  css-in-js
Jsxstyle
Inline style system for React and Preact
Stars: ✭ 1,990 (+765.22%)
Mutual labels:  css-in-js
Stitches
CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
Stars: ✭ 4,402 (+1813.91%)
Mutual labels:  css-in-js
Styled Bootstrap
πŸ’…πŸ» A styled-component implementation of Bootstrap
Stars: ✭ 154 (-33.04%)
Mutual labels:  css-in-js
Nano Component
Fast & simple React component styles in under 1kb
Stars: ✭ 202 (-12.17%)
Mutual labels:  css-in-js
React Stylesheet
Component based styling for your React applications
Stars: ✭ 150 (-34.78%)
Mutual labels:  css-in-js
Framework
🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!
Stars: ✭ 176 (-23.48%)
Mutual labels:  css-in-js
Style Sheet
βš‘οΈπŸ’¨ Fast styles in JavaScript with support for static CSS extraction.
Stars: ✭ 229 (-0.43%)
Mutual labels:  css-in-js
Styled Components Vs Emotion
a short doc comparing the popular CSS-in-JS libraries styled-components and emotion
Stars: ✭ 204 (-11.3%)
Mutual labels:  css-in-js
Styled Theme
Extensible theming system for styled-components πŸ’…
Stars: ✭ 183 (-20.43%)
Mutual labels:  css-in-js

Consider using nano-css instead. It is smaller, tested and actively maintained.

libreact logo

freestyler

5th generation React styling library β€” it is lightning fast, lean, and with gazillion features.

        Yeah, straight from the top of my dome
            As I rock, rock, rock, rock, rock the microphone
                Yeah, straight from the top of my dome
                    As I rock, rock, rock, rock, rock the microphone...

feat.

Typing and autocompletion

CSS Templates

Reference

Installation

npm i freestyler --save

Usage

import {
    css,
    styled,
    rule,
    StyleSheet,
    Component,
    hoc,
    jsxstyle
} from 'freestyler';

import hyperstyle from 'freestyler/lib/react/hyperstyle';
import {styleit, Styleit} from 'freestyler/lib/react/styleit';

Decorate stateful components.

@css({
    border: '1px solid tomato',
})
class App extends Component {
    render () {
        return <div>Hello world!</div>;
    }
}

Or, create "styled" stateless components.

const Bordered = styled.div({
    border: '1px solid tomato',
});
const App = () =>
    <Bordered>Hello world!</Bordered>;

License

Unlicense β€” public domain.


Are you a freestyler?
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].