Aluminum CSS

Aluminum CSS is a minimal CSS boilerplate make your page shine.

Installation

Aluminium CSS works best as a single link tag in the `` of your HTML document:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aluminiumcss/dist/aluminium.min.css">

You can also install Aluminium CSS via NPM:

npm install aluminiumcss

And then import it in your JS file, assuming you are using a bundler:

// In your JS file with a bundler
require('aluminiumcss/dist/aluminium.min.css')

To apply styles .alu-all to your body class or apply .alu to particular elements.

Customization

Aluminum CSS is easily customizable via a selection of CSS variables. Check the cutest demo to see how far you can get with it.

<style>
  :root {
    --alu-font-primary: "Nunito Sans", Arial, Helvetica, sans-serif;
    --alu-font-heading: "Playwrite DK Loopet", cursive;

    --alu-border-width: 2px;
    --alu-border-color: #ffc8c7;
    --alu-border-radius: 6px;
  }
</style>

Spacing - margins, paddings, gaps

Aluminum CSS uses a consistent spacing system that ensures good readability and visual balance. There are four sizes: sm, md, lg, xl. To apply margins, paddings, gaps you can use Tailwind CSS like classes like pt-sm or gap-md. There are also classes for positioning elements like top-sm or right-xl.

<div class="relative">
  <div class="row gap-sm mb-sm">
    <div class="debug"></div>
    <div class="debug"></div>
    <div class="debug"></div>
  </div>
  <div class="row gap-md mb-md">
    <div class="debug"></div>
    <div class="debug"></div>
    <div class="debug"></div>
  </div>
  <div class="row gap-lg mb-lg">
    <div class="debug"></div>
    <div class="debug"></div>
    <div class="debug"></div>
  </div>
  <div class="row gap-xl mb-xl">
    <div class="debug"></div>
    <div class="debug"></div>
    <div class="debug"></div>
  </div>
  <div class="absolute top-xl right-xl debug">From top</div>
  <div class="absolute bottom-sm right-sm debug">From bottom</div>
  <div class="mx-lg my-sm debug">
    Large margin from left and right Small from top and bottom
  </div>
</div>

Selective styling

Aluminium CSS is designed to be easily used with other CSS styles. You can apply it globally by putting the .alu-all class on the body element, or you can use it selectively by adding .alu class to specific elements.

If you are using .alu-all but you want to remove styling from certain elements you can apply .not-alu to particular elements or .not-alu-all to their parent.

<!-- .alu-all is applied to the body -->
<div>
  <button>Styled via parent</button>
</div>
<div>
  <button class="alu">Styled directly</button>
</div>
<div class="not-alu-all">
  <button>Unstyled via parent</button>
</div>
<div>
  <button class="not-alu">Unstyled directly</button>
</div>
<!-- Debug styles should not be applied as not-alu is added -->
<div class="debug not-alu">
  <button>
    Still styled because <code>.not-alu</code> does not cancel
    <code>.alu-all</code>
  </button>
</div>

Link

There are 3 links types. By default the links are visible without interaction. To make your link more subtle you can use .interactive class. Hidden links can be marked using .non-interactive class.

Link Link interactive Link non-interactive

<a href="#link">Link</a>
<a class="interactive" href="#link">Link interactive</a>
<a class="non-interactive" href="#link">Link interactive</a>

Abbreviation

Abbreviation can be used to show an acronym or abbreviation. Hover over the abbreviation to see the full text.

HTML is the code that is used to structure a web page and its content.

<abbr title="HyperText Markup Language">HTML</abbr> is the code that is used to structure a web page and its content.

Blockquote

It’s not faith in technology. It’s faith in people.

~ Steve Jobs

<blockquote>
  <p class="mb-md">It’s not faith in technology. It’s faith in people.</p>
  ~ Steve Jobs
</blockquote>

Progress

While the progress element has ability to show indeterminate progress, it is not supported by Aluminium CSS. To show indeterminate progress you can use the spinner element instead.

<progress value="75" max="100"></progress>

Spinner

<div class="spinner"></div>

Debug

Debug is a div element with minimum size and a bit of color. Useful for debugging.

<div class="debug">Debug</div>

Table

Country	Capital	Population	Flag
Poland	Warsaw	38m	🇵🇱
Germany	Berlin	85m	🇩🇪
Iceland	Reykjavik	400k	🇮🇸

<table>
  <tr>
    <th>Country</th>
    <th>Capital</th>
    <th>Population</th>
    <th>Flag</th>
  </tr>
  <tr>
    <td>Poland</td>
    <td>Warsaw</td>
    <td>38m</td>
    <td>🇵🇱</td>
  </tr>
  <tr>
    <td>Germany</td>
    <td>Berlin</td>
    <td>85m</td>
    <td>🇩🇪</td>
  </tr>
  <tr>
    <td>Iceland</td>
    <td>Reykjavik</td>
    <td>400k</td>
    <td>🇮🇸</td>
  </tr>
</table>

Input

<div class="column gap-sm">
  <input type="text" placeholder="Enter your name" />
  <input type="text" disabled placeholder="Disabled input" />
  <input type="password" placeholder="Password" />
  <input type="datetime-local" />
  <input type="color" />
  <input type="date" />
  <input type="time" />
  <input type="file" />
  <input type="submit" />
</div>

Textarea

Textarea is a multi-line text field element

<div class="column gap-sm">
  <textarea placeholder="Enter your message"></textarea>
  <textarea disabled placeholder="Disabled textarea"></textarea>
</div>

Checkbox

<div class="checkbox">
  <input id="check1" type="checkbox" />
  <label for="check1">Checkbox</label>
</div>
<div class="checkbox">
  <input id="check2" type="checkbox" disabled />
  <label for="check2">Disabled</label>
</div>
<div class="checkbox">
  <input id="check3" type="checkbox" disabled checked />
  <label for="check3">Disabled checked</label>
</div>

Radio

<div class="radio">
  <input id="radio1" type="radio" name="radio-examples" />
  <label for="radio1">Radio</label>
</div>
<div class="radio">
  <input id="radio2" type="radio" name="radio-examples" />
  <label for="radio2">Radio</label>
</div>
<div class="radio">
  <input id="radio3" type="radio" name="radio-examples2" disabled />
  <label for="radio3">Disabled</label>
</div>
<div class="radio">
  <input id="radio4" type="radio" name="radio-examples2" disabled checked />
  <label for="radio4">Disabled</label>
</div>

Button

<button class="primary">Primary</button>
<button class="primary" disabled>Primary disabled</button>
<button>Secondary</button>
<button disabled>Disabled</button>

Select

Option 1 Option 2 Option 3 Option 1 Option 2 Option 3

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
<select disabled>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
<div class="mt-md">
  <select multiple>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <select multiple disabled>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

Row

Row is a flex container

<div class="row gap-md">
  <div class="debug">Item 1</div>
  <div class="debug">Item 2</div>
  <div class="debug">Item 3</div>
</div>

Column

Column is a flex container

<div class="column gap-md">
  <div class="debug">Item 1</div>
  <div class="debug">Item 2</div>
  <div class="debug">Item 3</div>
</div>

Centered row/column

Centered items applies either one or both of justify-content: center; align-items: center;

<div class="row center gap-md mb-sm">
  <div class="debug">Item 1</div>
  <div class="debug">Item 2</div>
  <div>Item 3</div>
</div>
<div class="row center-x gap-md mb-sm">
  <div class="debug">Item 1</div>
  <div class="debug">Item 2</div>
  <div>Item 3</div>
</div>
<div class="row center-y gap-md mb-sm">
  <div class="debug">Item 1</div>
  <div class="debug">Item 2</div>
  <div>Item 3</div>
</div>
<div
  class="column center-x gap-md mb-sm"
  style="height: 200px; background: #eee"
>
  <div class="debug">Item 1</div>
  <div class="debug">Item 2</div>
  <div>Item 3</div>
</div>
<div
  class="column center-y gap-md mb-sm"
  style="height: 200px; background: #eee"
>
  <div class="debug">Item 1</div>
  <div class="debug">Item 2</div>
  <div>Item 3</div>
</div>

Spacer

Spacer is a div element that fills the available space in a flexbox container

<div class="row gap-md w-full">
  <div class="debug">Item 1</div>
  <div class="debug">Item 2</div>
  <div class="spacer"></div>
  <div class="debug">Item 3</div>
</div>

This is a container

<div class="container">This is a container</div>

Details

Details is a collapsible element

<details>
  <summary><span>Image</span></summary>
  <img src="/girl.jpg" alt="Girl" style="width: 100%; max-width: 500px" />
</details>
<details>
  <summary><span>Block of text</span></summary>
  <div class="px-lg text-sm mb-md">
    Details come here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Donec
  </div>
  <div class="px-lg text-sm mb-lg">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
    sit amet, per no tota corrumpit intellegam, ex per quas nostrud corrumpit.
    Ea alii sale interesset sed, ut graece liberavisse nam. Repudiare incorrupte
    an vim, est ei case facete indoctum. Ei dicit doming partiendo per, ei
    detraxit quaerendum liberavisse vim, omnes rationibus ei cum. Ut mei
    explicari comprehensam definitionem.
  </div>
</details>

Dialog

Dialog is a modal dialog element

Add new item

Add Cancel

Open dialog

<dialog id="dialog-example" style="min-width: 400px">
  <h5 class="my-sm mb-lg">Add new item</h5>
  <input class="mb-sm" type="text" placeholder="Enter item name" />
  <div class="inverted-row gap-md">
    <button
      class="primary"
      onclick="document.getElementById('dialog-example').close()"
    >
      Add
    </button>
    <button onclick="document.getElementById('dialog-example').close()">
      Cancel
    </button>
  </div>
</dialog>
<button
  class="primary"
  onclick="document.getElementById('dialog-example').showModal()"
>
  Open dialog
</button>

Grid

A responsive grid system. The grid is 12 columns wide and will stack on smaller screens. The classes mimic the Bootstrap grid system, but the implementation is based on CSS grid instead.

<div class="grid mb-lg">
  <div class="debug col-lg-2 col-md-3 col-xs-6">col-lg-2 col-md-3 col-xs-6</div>
  <div class="debug col-lg-2 col-md-3 col-xs-6">col-lg-2 col-md-3 col-xs-6</div>
  <div class="debug col-lg-2 col-md-3 col-xs-6">col-lg-2 col-md-3 col-xs-6</div>
  <div class="debug col-lg-2 col-md-3 col-xs-6">col-lg-2 col-md-3 col-xs-6</div>
  <div class="debug col-lg-2 col-md-3 col-xs-6">col-lg-2 col-md-3 col-xs-6</div>
  <div class="debug col-lg-2 col-md-3 col-xs-6">col-lg-2 col-md-3 col-xs-6</div>
</div>

If no class is applied the column will be 1/12th of the grid.

<div class="grid">
  <div class="debug col-lg-3 col-md-2 col-xs-6">col-lg-3 col-md-2 col-xs-6</div>
  <div class="debug"></div>
  <div class="debug"></div>
  <div class="debug"></div>
  <div class="debug"></div>
  <div class="debug"></div>
  <div class="debug"></div>
</div>

Navbar

Navbar is a navigation bar element

<nav>
  <input type="checkbox" id="nav-check" />
  <div class="nav-top">
    <label for="nav-check" id="nav-button">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="30"
        height="30"
        fill="currentColor"
        class="bi bi-list"
        viewBox="0 0 16 16"
      >
        <path
          fill-rule="evenodd"
          d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
        />
      </svg>
    </label>
    <div class="font-mono mx-md">Aluminium CSS</div>
  </div>
  <div class="nav-links">
    <a class="nav-link" href="#installation">Installation</a>
    <a class="nav-link" href="#customization">Customization</a>
    <a class="nav-link" href="#grid">Grid</a>
    <div class="spacer"></div>
    <a class="nav-link" href="https://github.com/pr0gramista/aluminiumcss"
      >GitHub</a
    >
  </div>
</nav>

Footer

Footer is a footer element

<footer>
  <div class="container">
    <div class="mb-s">
      <span class="font-mono">Aluminium CSS</span>
    </div>
    <div class="row gap-lg mb-l">
      <a>Home</a>
      <a>About</a>
      <a>Contact</a>
    </div>
    <div class="text-sm">Copyright &copy; 2023 Aluminium CSS</div>
  </div>
</footer>