Ethereal .css
An Elegant, Lightweight CSS Framework.
Colors
Text colors
Background colors
Image
Use border utils, example: circle
![]()
code
const Ethereal = [];
kbd
Ctrl + Cpre
function Greet(){
console.info('Hello Ethereal!')
}
Buttons
Default Buttons
Outline Buttons
Button sizes
Button display
Tables
Table alternating
| Logo | Framework | Star |
|---|---|---|
|
Angular | 37,492 |
|
React | 103,813 |
|
Vue | 104,025 |
|
Hyperapp | 14,104 |
|
jQuery | 49,260 |
Table dark hover
| Hot | Framework | Star |
|---|---|---|
| ❶ | React | ✸ |
| ❷ | Vue | ✷ |
Table dark border
| Id | Framework | Star |
|---|---|---|
| 1 | Angular | ★★☆☆☆ |
| 2 | React | ★★★★☆ |
| 3 | Vue | ★★★☆☆ |
| 4 | Hyperapp | ★☆☆☆☆ |
| 5 | jQuery | ★★☆☆☆ |
Alerts
Badges
Breadcrumb
Card
![]()
Card default
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu ex ut sapien porta pulvinar.
Check it outCard img bottom
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu ex ut sapien porta pulvinar.
Check it outCard header
Card header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu ex ut sapien porta pulvinar.
Card footer
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu ex ut sapien porta pulvinar.
Card footer buttom
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu ex ut sapien porta pulvinar.
Collapse
Collapse checkbox
Collapse content
Collapse content
Collapse radio
Collapse content
Collapse content
Forms
We'll never share your email with anyone else.
Small, checkbox, disabled
Fieldset, legend, disabled
Inline, radio, checkbox
Inline, radio & checkbox block
Textarea default
Textarea noresize
File default
File, data-prefix (chrome)
File, data-prefix zh-tw (chrome)
Select
Select, disabled
Select, inline
Modals
Modal Title
Modal Body
Modal Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse facilisis venenatis arcu id congue. Quisque dictum tellus purus, a blandit neque imperdiet vitae. Ut nulla felis, pellentesque eu varius a, posuere eu nibh.
Form Group
Close by backgroun
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Navbars
Border
Border color
![]()
![]()
Border width
![]()
![]()
![]()
Border style
![]()
![]()
![]()
![]()
Border radius
![]()
![]()
![]()
![]()
Dropdowns
Tabs
...
...
...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis, ante in elementum rhoncus, orci urna interdum dolor, eget aliquam libero ex sit amet est. Nulla sit amet molestie ipsum, sed aliquam orci. Proin lectus quam, pellentesque vel quam id, maximus posuere velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec eget enim quis risus fermentum elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse quis placerat ipsum. Nullam gravida orci eget semper ornare. Curabitur ac efficitur elit, et pretium nulla. Suspendisse potenti. Praesent vel lacinia dolor.
Aenean imperdiet, urna eget interdum eleifend, mi libero laoreet mi, quis ultrices neque urna et est. Nunc eget viverra quam. Nullam id sollicitudin quam. Praesent vel sodales est. In bibendum dui vestibulum auctor vestibulum. Nunc tempor libero sit amet urna ultrices blandit. Suspendisse erat orci, mattis non venenatis vel, ultricies et lorem. Vivamus aliquam sed ipsum vitae aliquet. Fusce auctor convallis accumsan.
Vivamus orci dolor, imperdiet non aliquet at, convallis vitae risus. Duis eleifend egestas elit, et mollis sem suscipit ut. Proin semper, erat sit amet venenatis porta, felis nunc tempus lorem, sollicitudin accumsan velit dolor luctus mi. Nullam et libero dolor. Maecenas tristique cursus urna vitae tincidunt. Quisque eleifend tristique lacus sed fermentum. Quisque varius laoreet enim. Nulla pulvinar erat ut est eleifend, at auctor dolor commodo.