It is dynamic by design and renders your styles depending on your application state.
It generates CSS and therefore supports all common CSS features such as media queries, pseudo classes, keyframes and font-faces. It also renders on server-side with ease and ships with a powerful plugin API adding e.g. automatic vendor prefixing or fallback value support.
Alef can be used with React or with any other view library. React Native support has been removed.
Improvements from Fela
- Entire codebase converted to TypeScript
- Shorter classnames generated using a Base64 alphabet (instead of just numbers)
- Will no longer generate problematic classnames (such as those likely to be blocked by ad-blockers)
- Performance enhancements (including API-breaking changes)
- Removed support for React Native
- Removed some Angular stuff that I don't care about
- Uses tabs for indentation
We're busy refactoring and hitting the delete key, so you can't install it (yet).
- Dynamic styling
- Universal rendering
- Dead code elimination
- High performance
- Minimal CSS output
- Pseudo classes & Media queries
- Child & Attribute selectors
- Vendor prefixing
- Component theming
- Many useful plugins
- Local namespace
Alef is all about rendering styles, especially so called rules. A universal renderer will help us to render styles of all kind. Once rendered into a DOM node, a change listener will subscribe to changes and automatically add new rules.
The following example illustrates the key parts of Alef though it only shows the very basics.
// rules are just plain functions of props// returning a valid object of style declarationsconst rule =fontSize: propsfontSize + 'px'marginTop: propsmargin ? '15px' : 0color: 'red'lineHeight: 14':hover':color: 'blue'fontSize: propsfontSize + 2 + 'px'// nest media queries and pseudo classes// inside the style object'@media (min-height: 300px)':backgroundColor: 'gray'':hover':color: 'black'// creates a new renderer to render stylesconst renderer =// rendering the rule returns a className reference// which can be attached to any elementconst className = renderer// it uses atomic css design to reuse styles// on declaration base and to keep the markup minimalconsole // => a b c d e f h// renders all styles into the DOM
The Fela documentation should be a good start, although don't actually try to use Alef unless you are me.
Who's using Alef?
Nobody except for me...which should be a good thing.