Welcome!
This is the documentation for the alexich-css library of css utilities and Web Components. Please note that this is a loose collection of css utility classes, UI component classes and Web Components created for my very own use cases, which mainly emerged from building alexi.ch.
If you find this collection useful, fine, go ahead and use them as you like, maybe even drop me an email with a short note of how it was useful to you.
I have no intention to make this library a full-featured / complete library, nor will I implement your use-cases / wishes.
This documentation uses a lot of the framework itself, so have a look at the source code of this page for inspiration.
Setup
Self-hosted
It is preferred to host the library by yourself, so that you are independant of any external ressources such as a CDN.
You can download the library from the github repo:
https://github.com/bylexus/alexich-css/archive/refs/heads/main.zip
or in the terminal via curl:
$ curl -o alexich-css.zip https://github.com/bylexus/alexich-css/archive/refs/heads/main.zipThen, unzip the folder and copy it to your website’s public folder, reference the main css file and optionally the web components you intend to use, and you’re done:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<link rel="stylesheet" href="path/to/alexich-css/alexich_css.css">
<!-- import web components you intend to use -->
<script type="module" src="path/to/alexich-css/components/progress-bar.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, alexi.ch css!</h1>
<progress-bar value="20" max="100" appearance="full">ready!</progress-bar>
</div>
</body>
</html>via CDN
The jsdeliver CDN lets you use the library directly from the github repo. Instead of download the library, you can use it via CDN:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<!-- Link the newest version: -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bylexus/alexich-css/alexich_css.css">
<!-- or link a specific version: -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bylexus/alexich-css@1.2.3/alexich_css.css">
<!-- import web components you intend to use -->
<script type="module" src="https://cdn.jsdelivr.net/gh/bylexus/alexich-css/components/progress-bar.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, alexi.ch css!</h1>
<progress-bar value="20" max="100" appearance="full">ready!</progress-bar>
</div>
</body>
</html>Customization: CSS variables
The library makes heavy use of CSS custom properties, aka “variables”. You can override them as needed to make changes to the defaults:
:root {
--container-max-width: 800px;
}defined variables
| Variable | Default value | Description |
|---|---|---|
--container-max-width |
sm: unsetmd: 960pxlg: 1024pxxl: 1280px |
Sets the maximum width of the .container element |
--grid-gap |
sm: 8pxlg: 12pxxl: 16px |
The gap between cols of the grid layout system |
--gap-base |
0.25rem | base size for the gap-* classes (.gap-1
uses the base value) |
--icon-size |
1rem | The standard svg icon size used with the .ic class |
--icon-color |
black | The standard svg icon color used with the .ic
class |
--font-family |
sans-serif | standard document font family |
--font-size |
1em | default body font size |
--line-height |
1.5 | default line-height for all elements |
Media breakpoints
The framework uses a “mobile-first” or “bottom-up” approach. This means that the defined breakpoints are applied when the minimim screen size is reached. The framework defines the following media breakpoints:
| Breakpoint Name | Shortcut | min-width | max-width |
|---|---|---|---|
| Small screens (phones) | sm | 0 | 480px |
| Medium screens (tablets) | md | 481px | 768px |
| Large screens (laptops) | lg | 769px | 1280px |
| Very large screens (big screens) | xl | 1281px | Infinity |
Unfortunately, media queries do not yet support CSS variables (yet), so if you want to use the breakpoint values in media queries, you have to duplicate the values:
/* Instead of (because not yet possible with CSS): */
@media screen and (min-width: var(--breakpoint-md)) {
/* ...... */
}
/* you need to explicitely use the pixel value: */
/* medium size screen: */
@media screen and (min-width: 481px) {
/* ...... */
}Colors
The library defines a set of color shades. I have not invented the colors by myself, I took the inspiration from Pico CSS ✨.
All the color values are defined as CSS custom properties, and a set of text- and background color classes:
- Custom color properties naming scheme: Each color consists of a base
name, and shade, ranging from 50 to 950 (50-step increment):
- variable naming Scheme:
--color-base(-shade) - Examples:
--color-slate,--color-slate-350
- variable naming Scheme:
- Each color also has a text color class:
- class naming Scheme:
.color-base(-shade) - Examples:
.color-slate,.color-slate-350
- class naming Scheme:
- Each color also has a background color class:
- class naming Scheme:
.background-base(-shade) - Examples:
.background-slate,.background-slate-350
- class naming Scheme:
Usage example
in HTML:
<div class="background-slate-350">...</div>in CSS:
.error {
background-color: var(--color-red-500);
}Available colors
| Color | base | 50 | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500 | 550 | 600 | 650 | 700 | 750 | 800 | 850 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| red |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| pink |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| fuchsia |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| purple |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| violet |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| indigo |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| blue |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| azure |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| cyan |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| jade |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| green |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| lime |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| yellow |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| amber |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| pumpkin |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| orange |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| sand |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| grey |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| zinc |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| slate |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| light |
|
|||||||||||||||||||
| dark |
|
Text helper classes
Text alignment
| CSS Class | Description | Example |
|---|---|---|
.text-left |
Align text to the left | <p class="text-left">...</p> |
.text-center |
Align text to the center | <p class="text-center">...</p> |
.text-right |
Align text to the right | <p class="text-right">...</p> |
Example
<div class="text-left">left aligned</div>
<div class="text-center">center aligned</div>
<div class="text-right">right aligned</div>Out-of-band floating
| CSS Class | Description | Example |
|---|---|---|
.float-left |
out-of-band floating left | <p><img class="float-left" src="...">...</p> |
.float-clear |
pushes content below floating element | <div class="float-clear">...</div> |
Example
<p>
<div class="float-right background-red mx-2" style="width:100px; height:100px"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac justo id massa dictum luctus.
Nam at efficitur justo. Sed quis libero et libero eleifend dictum.
Nunc et magna auctor, sagittis elit nec, vehicula velit.
Quisque auctor nisl et mauris scelerisque, in lacinia libero placerat.
Sed bibendum, erat ac fermentum ultrices, risus ante egestas lorem, vitae pellentesque lacus velit a dolor.
Nam in sapien sit amet purus facilisis suscipit. Maecenas eget sapien eget nisl commodo porta.</p>
<p class="float-clear">Below the float</p>
Below the float
Page Positioning
responsive max width container
On large screens, it is sometimes necessary to limit the width of the
page to a certain max width, for better readability. The
.container class can be used to achieve that: It limits the
max width of a container element based on the screen size.
Usage example
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac justo id massa dictum luctus.
Nam at efficitur justo. Sed quis libero et libero eleifend dictum. Nunc et magna auctor,
sagittis elit nec, vehicula velit. Quisque auctor nisl et mauris scelerisque, in lacinia libero placerat.
Sed bibendum, erat ac fermentum ultrices, risus ante egestas lorem, vitae pellentesque lacus velit a dolor.
Nam in sapien sit amet purus facilisis suscipit. Maecenas eget sapien eget nisl commodo porta.
</p>
</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac justo id massa dictum luctus.
Nam at efficitur justo. Sed quis libero et libero eleifend dictum. Nunc et magna auctor,
sagittis elit nec, vehicula velit. Quisque auctor nisl et mauris scelerisque, in lacinia libero placerat.
Sed bibendum, erat ac fermentum ultrices, risus ante egestas lorem, vitae pellentesque lacus velit a dolor.
Nam in sapien sit amet purus facilisis suscipit. Maecenas eget sapien eget nisl commodo porta.
</p>Sticky Element fixation
To keep an element in-sight, e.g. a navigation bar, you can use the
.sticky-top and .sticky-bottom classes.
| CSS Class | Description | Example |
|---|---|---|
.sticky-top |
keeps the element in the page, at minimum at top 0 | <div class="sticky-top">...</div> |
.sticky-bottom |
keeps the element in the page, at maximum at bottom 0 | <div class="sticky-bottom">...</div> |
Display helpers
| CSS Class | Description | Example |
|---|---|---|
.w-full |
width 100% for an element | <div class="w-full">...</div> |
.h-full |
height 100% for an element | <div class="h-full">...</div> |
.w-initial |
sets width to its initial value for an element |
<div class="w-initial">...</div> |
.h-initial |
sets height to its initial value for an element |
<div class="h-initial">...</div> |
.overflow-hidden |
hides the overflow of an element’s content | <div class="overflow-hidden">...</div> |
.overflow-auto |
auto-hides scrollbars based on the overflow of an element’s content | <div class="overflow-auto">...</div> |
.d-none |
hides an element, and does not use the space in the parent element | <div class="d-none">...</div> |
.d-block |
sets display:block for an element |
<div class="d-block">...</div> |
.d-inline |
sets display:inline for an element |
<div class="d-inline">...</div> |
.d-inline-block |
sets display:inline-block for an element |
<div class="d-inline-block">...</div> |
.d-inline-grid |
sets display:inline-grid for an element |
<div class="d-inline-grid">...</div> |
.display |
sets the display value to its initial value for an
element |
<div class="display">...</div> |
Responsive display values
For (most of) the above classes, the library offers breakpoint-depending pendants so you can flexibly set a value depending on the actual breakpoint:
.w-full:w-md-full,w-lg-full,w-xl-full.w-initial:w-md-initial,w-lg-initial,w-xl-initial.h-full:h-md-full,h-lg-full,h-xl-full.h-initial:h-md-initial,h-lg-initial,h-xl-initial.d-none:d-md-none,d-lg-none,d-xl-none.d-block:d-md-block,d-lg-block,d-xl-block.d-inline:d-md-inline,d-lg-inline,d-xl-inline.d-inline-block:d-md-inline-block,d-lg-inline-block,d-xl-inline-block.d-inline-grid:d-md-inline-grid,d-lg-inline-grid,d-xl-inline-grid.display:display-md,display-lg,display-xl
Example
<div>
<div class="d-block d-lg-inline-block w-full w-lg-initial border-1 border-grey-200 my-1 px-1 py-1">some content</div>
<div class="d-block d-lg-inline-block w-full w-lg-initial border-1 border-grey-200 my-1 px-1 py-1">some content</div>
<div class="d-block d-lg-inline-block w-full w-lg-initial border-1 border-grey-200 my-1 px-1 py-1">some content</div>
</div>