streamich / Freestyler
5th generation CSS-in-JS library
Stars: β 230
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
Blog
δΈθ¬δΈδΌε API η±»ζη« οΌεͺεεζθ₯ε
»ηζη« οΌεζ¬’θ―·ηΉ star
Stars: β 146 (-36.52%)
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.
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...
- Bomfunk MC's β Freestyler
feat.
- fifth generation, lightweight, lightning fast, JIT CSS, code splitting, dead code elimination, JavaScript variables
CSS Templates
- Scoped styles without selectors
- Nested selectors
- Mixins
- Atoms
- Media queries, keyframes, ...
- Global styles
- Global entry and exit animations
- CSS resets
- Theming
Reference
- Terminology
- Generations
- Interfaces
- Generic Low-level API
-
Generic 3rd Generation Interfaces
rule()
Interface-
StyleSheet.create()
Interface with lazy rendering hyperstyle()
styleName
Interface
- React.js 4th Generation Interfaces
- React.js 5th Generation Interfaces
- Environment Variables
- Server-side Rendering
- How it Works?
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].