This package was born in a pursue to create a simple-to-use and reliable UI tool to create beautiful and meaningful interfaces. Yes, this is yet another good CSS library.
Now, elements.css encourages you to use it with the following packages:
These packages are present on this page for the sake of an extensive demo.
Installation
The installation is fairly simple, just add @0notole/elements.css to your package.json file or install via npm:
npm i @0notole/elements.css
You also have the option of downloading elements.min.css and including it into your project manually. Stay tuned for CDN!
Button
This is a vital part of any CSS Framework and the classname is quite straightforward: .button.
A button can have an icon enclosed, also it is possible to have just an icon within a circle button.
Card
A card is a white block for displaying content. Might be blurred by using the .blur helper class.
Basic Card
With Shadow
Blurred Card
Basic Card
With Shadow
Blurred Card
Checkbox
Elements.css offers a native no-JS checkboxes and toggles – just wrap your input[type=checkbox] with a .label and add a span inside (because of pseudo-elements).
Central Column
Horisontal Line
Just a normal embossed horisontal line with no margins by default. The .box class is available to use with it.
Input
Label
This label can be used with inputs and for everything else like labelling cards.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt test ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Popup
Progress
Radio
Section
Tabs
Pure-CSS tabs with a sliding element to highlight the active tab. You can use up to 5 tabs:
Title
H1 Title
H2 Title
H1 Title
H2 Title
Toggle
The toggle element, as well as the regular checkbox is based on the input[type=checkbox] element and ::before and ::after pseudo-element of the overarching label.
Blur
This is a helper class to make the background of anything (ideally, cards) blurred. A 50% transparent white background and a backdrop-filter.
Box
The .box class is one of the key elements of this package. It allows piling blocks and elements without thinking about margin-top and margin-bottom. The rule is simple – every item gets a standard margin-bottom except for the very last one.
Flex
A small helper class to make anything flex without more complicated columns.
Button
Flexboxgrid
Flexboxgrid is supposed to be used and elements.css suggests a few tweaks and visual improvements.
Badge Indicator / Counter
Sticky Stickiness
This class makes an element sticky within the boundaries of the parent block. Please, notice, no parent blocks must be positioned 'relative'.