Eternium

Eternium is a simple, no-JavaScript, compilation-free, single-file, opt-in, responsive CSS library for layout and styling elements, especially forms and complex user interfaces. It requires less markup than other libraries. It's currently in beta.

Download eternium.css (45KB, 5.5KB min+gzip)

GitHub Repository

Here's what using Eternium looks like. Notice that you can edit the code.

In this example:

Eternium supports both light and dark modes. Click the moon icon in the top right of this page to cycle between modes. You can add the dark attribute to the root <html> element to switch to dark mode. It can be useful to do this automatically with JavaScript.

To use Eternium, include it in the head of your document, adjusting the path to where you put eternium.css:

<link rel="stylesheet" href="eternium.css">

Eternium uses modern CSS features like nested rules. It supports desktop and mobile versions Chrome, Brave, Edge, Firefox, and Safari released in Jan 2024 or later.

Layout

Add the eternium or the eternium-layout class to a parent element, then you can use any of the classes in this Layout section.

Variables

Many classes come in micro, tiny, small, normal, big, and huge variants. These sizes are defined by corresponding variables, shown below with their default values. They can be modified in eternium.css or overridden in your own code if you prefer different sizes.

Responsive

Eternium layout classes have variants with the -mobile -tablet and -desktop suffix that only apply if the screen width is less than 512px, between 512px and 992px, or greater than 992px, respectively. This can be used to use a different layout on mobile, tablets, an desktop.

You'll see examples with these below.

Rows and Columns

ClassResponsive Overrides 
.row.row-mobile .row-tablet .row-desktopChildren are arranged in a row.
.col.col-mobile .col-tablet .col-desktopChildren are arranged in a column.

Rows and columns are the main way to control the layout of elements when using Eternium. Add a row or a column class to an element to arrange its children in a row or a column.

These items are laid out in a column:

These are laid out in a column on mobile and desktop, but in a row on tablets - devices with screen widths between 768 and 992px.

Alignment

Specify the alignment of children within .row and .col elements.

Class
Responsive Overrides 
.left.left-mobile .left-tablet .left-desktopAlign children to the left, which is the default.
.right.right-mobile .right-tablet .right-desktopAlign children to the right.
.top.top-mobile .top-tablet .top-desktopAlign children to the top, which is the default.
.bottom.bottom-mobile .bottom-tablet .bottom-desktopAlign children to the bottom.
.stretch.stretch-mobile .stretch-tablet .stretch-desktopStretch children to fill the container.
.stretch-h.stretch-h-mobile .stretch-h-tablet .stretch-h-desktopStretch children horizontally.
.stretch-v.stretch-v-mobile .stretch-v-tablet .stretch-v-desktopStretch children vertically.
.space-between.space-between-mobile .space-between-tablet .space-between-desktopDistribute children with space between them.
.space-around.space-around-mobile .space-around-tablet .space-around-desktopDistribute children with space around them.
.space-evenly.space-evenly-mobile .space-evenly-tablet .space-evenly-desktopDistribute children evenly.
.center.center-mobile .center-tablet .center-desktopCenter children.
.center-h.center-h-mobile .center-h-tablet .center-h-desktopCenter children horizontally.
.center-v.center-v-mobile .center-v-tablet .center-v-desktopCenter children vertically.
.wrap.wrap-mobile .wrap-tablet .wrap-desktopWrap children to the next line, which is the default.
.no-wrap.no-wrap-mobile .no-wrap-tablet .no-wrap-desktopPrevent children from wrapping.

Gaps

Specify the gap between the children of .row and .col elements.

Class
Responsive Overrides 
.gap.gap-mobile .gap-tablet .gap-desktopItems will have a gap the size of the --normal variable, typically 16px.
.gap-micro.gap-micro-mobile .gap-micro-tablet .gap-micro-desktopItems will have a gap the size of the --micro variable, typically 2px.
.gap-tiny.gap-tiny-mobile .gap-tiny-tablet .gap-tiny-desktopItems will have a gap the size of the --tiny variable, typically 4px.
.gap-small.gap-small-mobile .gap-small-tablet .gap-small-desktopItems will have a gap the size of the --small variable, typically 8px.
.gap-big.gap-big-mobile .gap-big-tablet .gap-big-desktopItems will have a gap the size of the --big variable, typically 24px.
.gap-huge.gap-huge-mobile .gap-huge-tablet .gap-huge-desktopItems will have a gap the size of the --huge variable, typically 48px.

Padding

Specify the padding of an element. The -h and -v variants set horizontal and vertical padding individually. Unlike with gaps and alignment, this does not have to be applied to a .row or .col element.

Class
Responsive OverridesDescription
.pad.pad-mobile .pad-tablet .pad-desktopGive the element padding the size of the --normal variable, typically 16px.
.pad-micro.pad-micro-mobile .pad-micro-tablet .pad-micro-desktopGive the element padding the size of the --micro variable, typically 2px.
.pad-tiny.pad-tiny-mobile .pad-tiny-tablet .pad-tiny-desktopGive the element padding the size of the --tiny variable, typically 4px.
.pad-small.pad-small-mobile .pad-small-tablet .pad-small-desktopGive the element padding the size of the --small variable, typically 8px.
.pad-big.pad-big-mobile .pad-big-tablet .pad-big-desktopGive the element padding the size of the --big variable, typically 24px.
.pad-huge.pad-huge-mobile .pad-huge-tablet .pad-huge-desktopGive the element padding the size of the --huge variable, typically 48px.
   
.pad-h-micro.pad-h-micro-mobile .pad-h-micro-tablet .pad-h-micro-desktopGive the element horizontal padding the size of the --micro variable, typically 2px.
.pad-h-tiny.pad-h-tiny-mobile .pad-h-tiny-tablet .pad-h-tiny-desktopGive the element horizontal padding the size of the --tiny variable, typically 4px.
.pad-h-small.pad-h-small-mobile .pad-h-small-tablet .pad-h-small-desktopGive the element horizontal padding the size of the --small variable, typically 8px.
.pad-h.pad-h-mobile .pad-h-tablet .pad-h-desktopGive the element horizontal padding the size of the --normal variable, typically 16px.
.pad-h-big.pad-h-big-mobile .pad-h-big-tablet .pad-h-big-desktopGive the element horizontal padding the size of the --big variable, typically 24px.
.pad-h-huge.pad-h-huge-mobile .pad-h-huge-tablet .pad-h-huge-desktopGive the element horizontal padding the size of the --huge variable, typically 48px.
   
.pad-v-micro.pad-v-micro-mobile .pad-v-micro-tablet .pad-v-micro-desktopGive the element vertical padding the size of the --micro variable, typically 2px.
.pad-v-tiny.pad-v-tiny-mobile .pad-v-tiny-tablet .pad-v-tiny-desktopGive the element vertical padding the size of the --tiny variable, typically 4px.
.pad-v-small.pad-v-small-mobile .pad-v-small-tablet .pad-v-small-desktopGive the element vertical padding the size of the --small variable, typically 8px.
.pad-v.pad-v-mobile .pad-v-tablet .pad-v-desktopGive the element vertical padding the size of the --normal variable, typically 16px.
.pad-v-big.pad-v-big-mobile .pad-v-big-tablet .pad-v-big-desktopGive the element vertical padding the size of the --big variable, typically 24px.
.pad-v-huge.pad-v-huge-mobile .pad-v-huge-tablet .pad-v-huge-desktopGive the element vertical padding the size of the --huge variable, typically 48px.

Widths

Eternium.css provides various classes to quickly set the widths of elements.

Percent widths:

ClassResponsive OverridesDescription
.pc10.pc10-mobile .pc10-tablet .pc10-desktopWidth is set to 10%.
.pc20.pc20-mobile .pc20-tablet .pc20-desktopWidth is set to 20%.
.pc25.pc25-mobile .pc25-tablet .pc25-desktopWidth is set to 25%.
.pc30.pc30-mobile .pc30-tablet .pc30-desktopWidth is set to 30%.
.pc33.pc33-mobile .pc33-tablet .pc33-desktopWidth is set to 33.333%.
.pc40.pc40-mobile .pc40-tablet .pc40-desktopWidth is set to 40%.
.pc50.pc50-mobile .pc50-tablet .pc50-desktopWidth is set to 50%.
.pc60.pc60-mobile .pc60-tablet .pc60-desktopWidth is set to 60%.
.pc66.pc66-mobile .pc66-tablet .pc66-desktopWidth is set to 66.666%.
.pc70.pc70-mobile .pc70-tablet .pc70-desktopWidth is set to 70%.
.pc75.pc75-mobile .pc75-tablet .pc75-desktopWidth is set to 75%.
.pc80.pc80-mobile .pc80-tablet .pc80-desktopWidth is set to 80%.
.pc90.pc90-mobile .pc90-tablet .pc90-desktopWidth is set to 90%.
.pc100.pc100-mobile .pc100-tablet .pc100-desktopWidth is set to 100%.

Pixel widths:

ClassResponsive OverridesDescription
.px10.px10-mobile .px10-tablet .px10-desktopMin-width and max-width are set to 10px.
.px20.px20-mobile .px20-tablet .px20-desktopMin-width and max-width are set to 20px.
.px30.px30-mobile .px30-tablet .px30-desktopMin-width and max-width are set to 30px.
.px40.px40-mobile .px40-tablet .px40-desktopMin-width and max-width are set to 40px.
.px50.px50-mobile .px50-tablet .px50-desktopMin-width and max-width are set to 50px.
.px60.px60-mobile .px60-tablet .px60-desktopMin-width and max-width are set to 60px.
.px70.px70-mobile .px70-tablet .px70-desktopMin-width and max-width are set to 70px.
.px80.px80-mobile .px80-tablet .px80-desktopMin-width and max-width are set to 80px.
.px90.px90-mobile .px90-tablet .px90-desktopMin-width and max-width are set to 90px.
.px100.px100-mobile .px100-tablet .px100-desktopMin-width and max-width are set to 100px.
.px120.px120-mobile .px120-tablet .px120-desktopMin-width and max-width are set to 120px.
.px150.px150-mobile .px150-tablet .px150-desktopMin-width and max-width are set to 150px.
.px200.px200-mobile .px200-tablet .px200-desktopMin-width and max-width are set to 200px.
.px250.px250-mobile .px250-tablet .px250-desktopMin-width and max-width are set to 250px.
.px300.px300-mobile .px300-tablet .px300-desktopMin-width and max-width are set to 300px.
.px350.px350-mobile .px350-tablet .px350-desktopMin-width and max-width are set to 350px.
.px400.px400-mobile .px400-tablet .px400-desktopMin-width and max-width are set to 400px.
.px450.px450-mobile .px450-tablet .px450-desktopMin-width and max-width are set to 450px.
.px500.px500-mobile .px500-tablet .px500-desktopMin-width and max-width are set to 500px.
.px550.px550-mobile .px550-tablet .px550-desktopMin-width and max-width are set to 550px.
.px600.px600-mobile .px600-tablet .px600-desktopMin-width and max-width are set to 600px.
.px650.px650-mobile .px650-tablet .px650-desktopMin-width and max-width are set to 650px.
.px700.px700-mobile .px700-tablet .px700-desktopMin-width and max-width are set to 700px.
.px750.px750-mobile .px750-tablet .px750-desktopMin-width and max-width are set to 750px.
.px800.px800-mobile .px800-tablet .px800-desktopMin-width and max-width are set to 800px.
.px850.px850-mobile .px850-tablet .px850-desktopMin-width and max-width are set to 850px.
.px900.px900-mobile .px900-tablet .px900-desktopMin-width and max-width are set to 900px.
.px950.px950-mobile .px950-tablet .px950-desktopMin-width and max-width are set to 950px.
.px1000.px1000-mobile .px1000-tablet .px1000-desktopMin-width and max-width are set to 1000px.

Flex sizes. In CSS, the flex value sets how much space an item should take up relative to other items in a container. For example, If a row has one child with .flex1 and another child with .flex3 then the first will take up 25% of the width, and the second 75%. If a row has one child with .flex1 and another child with .flex9 then the first will take up 10% and the second 90%.

ClassResponsive OverridesDescription
.flex1.flex1-mobile .flex1-tablet .flex1-desktopFlex is set to 1.
.flex2.flex2-mobile .flex2-tablet .flex2-desktopFlex is set to 2.
.flex3.flex3-mobile .flex3-tablet .flex3-desktopFlex is set to 3.
.flex4.flex4-mobile .flex4-tablet .flex4-desktopFlex is set to 4.
.flex5.flex5-mobile .flex5-tablet .flex5-desktopFlex is set to 5.
.flex6.flex6-mobile .flex6-tablet .flex6-desktopFlex is set to 6.
.flex7.flex7-mobile .flex7-tablet .flex7-desktopFlex is set to 7.
.flex8.flex8-mobile .flex8-tablet .flex8-desktopFlex is set to 8.
.flex9.flex9-mobile .flex9-tablet .flex9-desktopFlex is set to 9.
.flex10.flex10-mobile .flex10-tablet .flex10-desktopFlex is set to 10.
.flex11.flex11-mobile .flex11-tablet .flex11-desktopFlex is set to 11.
.flex12.flex12-mobile .flex12-tablet .flex12-desktopFlex is set to 12.

This example shows how to use the various width classes.

Styles

To use the classes in this Styles secion, .eternium or .eternium-style must be present on an ancestral element. Unlike the layout classes, Eternium style classes do not have responsive variants.

Inputs and Buttons

Form elements inside the .eternium or .eternium-style classes are given a default style.

This style can be modified with various classes:

Class
 
.inputGive an element the appearance of an input box. For example: <div contenteditable class="input"></div>
.buttonGive an element the appearance of a button. Can be used with <a class="button"></a> for example.
.flatRemove the border. background color, and padding from a form field or button.
.squareGive a form field or button sharp corners.
.no-outlineThe form field or button will have no outline when focused.
  
.hoverGive a button or form element the appearance of being hovered.
.selectedGive a button or form element the appearance of being selected.
.focusGive a button or form element the appearance of being focused
.invalidMark a form input as invalid.
  
.primaryGive a button a bright background (typically blue) to make it look important.
.loadingGive a form field or button an animated loading spinner.
.errorGive a form field input or button an error icon.
.successGive a form field input or button a success icon.
  
.smallMake a form field or button the height defined in the --input-small variable, typically 18px including the border.
.normalMake the input field a normal size, also defined in the --input-normal variable, which is typically 24px. Typically used only on checkboxes, which default to a small size.
.bigMake a form field or button the height defined in the --input-big variable, typically 32px including the border.
.hugeMake a form field or button the height defined in the --input-huge variable, typically 44px including the border.

This example demonstrates the use of these classes:

Alerts

Styles typically used for alert boxes.

Visibility

These classes can be used to only show an element on a specific device. If an element has more than one, it will be visible on both devices. For example, an element with .mobile and .desktop classes will be visible everywhere except on tablets.

Class 
.mobileShow element only on mobile.
.tabletShow element only on tablets.
.desktopShow element only on desktop computers.

Tables

Give a table the data-table class and it will have a much nicer style than the browser default.

This can also be used with non-table elements. Such as elements with .table .tr .th .td classes. However, you will have to create CSS rules for these classes so they mimic the layout of a table.

You can override the table variables inline to get a different style of table:

Other Classes

Class 
.labelMake an element have 85% sized bold text and be unselectable. Useful for form labels.
.littleMake text 80% the normal size, with a smaller 1.1 line-height.
.mutedMake text 66% opaque. Often used together with .little for small notes.
  
.cardGive an element a rounded border, solid --background colored background, and a small drop shadow.
.no-selectMake text unselectable via user-select: none
  
.iconExperimental.
.menu-itemExperimental.

Variables

These variables are set in eternium.css and define the appearance of Eternium Styles. Most take different values between light and dark modes. Dark mode can be triggered by adding the dark attribute to the root html element. <html dark>.

These variables can be modified in eternium.css or overridden in your own code.

VariableDescription
--textText color. Applied to any body tags within the eternium or eternium-style classes.
--backgroundBackground color. Applied to any body tags within the eternium or eternium-style classes.
--invertOpposite of the background color
--shade1A color slightly off from the background color.
--shade1A color a little more off.
--shade3A little more still.
--shade4Even more.
--primaryColor of a primary button.
--primary2Often used for primary hover states.
--primary-text 
--primary-border-focus 
--secondary 
--secondary-background-hover 
--secondary-border-hover 
--input-background 
--input-border 
--card-background 
--card-border 
--border 
--border-focus 
--table-header-background 
--table-border 
--table-background 
--table-padding 
  
--input-smallThe height of form elements with class small
--input-normal 
--input-big 
--input-huge 
--border-width 
--border-radius 
--primary-background 
--primary-border 
--primary-background-hover 
--primary-border-hover 
--secondary-background 
--secondary-border 

Examples

A page with a sticky footer, that will be pushed down as the content grows. Giving the content div a class of flex1 makes it stretch its height to all available space.

Setting the body height is only necessary for this demo, and doesn't need to be in your code.

 

Aligned form becomes stacked on Mobile

This form moves the labels from the side to above the inputs when the device width is < 512px. Drag the resizer between the code and the preview to see it adjust as the width decreases.

The .col-mobile and .left-mobile classes