Fela
griffel
Our great sponsors
| Fela | griffel | |
|---|---|---|
| 2 | 7 | |
| 2,259 | 1,113 | |
| - | 2.1% | |
| 2.3 | 8.9 | |
| 2 days ago | 8 days ago | |
| JavaScript | TypeScript | |
| MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Fela
-
Best practices for CSS and making things faster?
[Fela](https://fela.js.org/) and [Griffel](https://github.com/microsoft/griffel) are also not bad choice.
-
B2B White Label SaaS Reselling
Speaking of libraries and implementation. I implemented themes for white label (and not only) on UI via styles as a function of state on UI. I used https://fela.js.org/ for this. So basically, when a React app initializes, a part of the state is initialized (via identity of a user, like email they log in or meta info, or additional API call, or via URL) with a value telling if it's a partner X vs partner Y vs your own brand. Then the styles that have colours, backgrounds, borders, box-shadows, fonts are applied by fela. So I created a bunch of styled components like buttons, toggles, styled divs, etc and each of them has access to that piece of state holding the UI theme, and depending on that theme, it will apply CSS classes in the runtime. You can use the same mechanism to implement multiple themes for your own brand (not just light/dark modes). The only thing you need to manually code is a JSON spec for themes like:
griffel
- StyleX – Meta's Styling Library
-
Why We're Breaking Up with CSS-in-JS
I have been giving Griffel ( https://griffel.js.org ) a whirl and it’s pretty nice tho it doesn’t do a good job of explaining what’s good about it.
-
Best practices for CSS and making things faster?
[Fela](https://fela.js.org/) and [Griffel](https://github.com/microsoft/griffel) are also not bad choice.
-
What's new with Fluent UI React v9?
Griffel is a CSS-in-JS with near-zero runtime, SSR support and styles defined with JavaScript objects.
-
Fluent UI React v9 with Formik and Yup
We start off with the high-level layout of the form leveraging Griffel, the CSS-in-JS engine that comes with Fluent UI React.
-
Using Slots with Fluent UI React v9
Note: This example is using Griffel a CSS-in-JS engine that's used with Fluent UI React v9.
- Griffel: CSS-in-JS with ahead-of-time compilation
What are some alternatives?
styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
stylex - StyleX is the styling system for ambitious user interfaces.
emotion - 👩🎤 CSS-in-JS library designed for high performance style composition
styletron - :zap: Toolkit for component-oriented styling
stitches - [Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
React CSS Modules - Seamless mapping of class names to CSS modules inside of React components.
Yup - Dead simple Object schema validation
JSS - JSS is an authoring tool for CSS which uses JavaScript as a host language.
linaria - Zero-runtime CSS in JS library
Aphrodite - Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation