A functional CSS library built for speed and granular customization.
Use it to rapidly prototype and construct masterful layouts without writing bloated CSS.
At it’s largest, Elassus is less than 15kb gzipped. That means your project isn’t going to turn in to a bloated mess of ever growing CSS.
Other style libraries may claim it, but finding that to be untrue was the initial inspiration for creating Elassus. Finally, you can always get what you want.
No more having to audit your project with every small change to your CSS to see if it broke something. In Elassus you change class names, not styles.
Within minutes you’ll be reading and writing markup using Elassus. Imagine knowing the styles applied to your code without looking at the CSS.
Finally, the freedom to create something that doesn’t look like a billion other products out that because it was built with a popular framework.
The modules that most often need responsive breakpoints have them right out of the box. If you need more control, you can easily bend it to your will.
Elassus is really easy to get up and running in your project. If you want full control you can fork the repo or do one of the following:
Elassus is published on NPM, so you can easily add it to your project by running the following command:
npm install elassus --save-dev
From there, just import scss/elassus.scss in to your stylesheet and you'll be up and running!
You can just drop this line in the <head> of your HTML file, and be ready to go with the latest version of Elassus!
<link rel="stylesheet" href="https://unpkg.com/elassus/css/elassus.min.css" />
Lastly, you can download a zip file of the most up to date Elassus by clicking here. Unzip it and put it in your project.
The documentation for Elassus can be viewed at http://elassus.com, which features instructions on customization as well as a reference tool for searching and navigating through the various class names available in the library.
Below is a list of all the available modules in Elassus along with links to their location on the Reference page.
- Aspect Ratio
- Background Color
- Background Position
- Background Size
- Border Color
- Border Radius
- Border Style
- Border
- Box Shadow
- Clear
- Color
- Coordinates
- Display
- Fill
- Flexbox
- Float
- Font Family
- Font Style
- Font Weight
- Height
- Letter Spacing
- Line Height
- List
- Max Width
- Opacity
- Overflow
- Position
- Stripe
- Stroke
- Text Align
- Text Decoration
- Text Transform
- Transform
- Transition
- Vertical Align
- White Space
- Word Break
- Z Index
Elassus comes with a few utilities to help you out along your journey. You can view their contents by clicking the links below;
If you have questions or need help, feel free to open up an issue.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent