alexi.ch CSS/UI Framework

My goal is to build everything on this site by myself - this also includes every line of CSS. So I created an opinionated, small CSS framework for my own use cases, mainly, this site.

Please checkout the github repo of my very own CSS framework: https://github.com/bylexus/alexich-css

One goal of my personal site - alexi.ch - is to build as many technical parts of it by myself. In the early beginnings, this was just the content - html, css, but over the years I try (ongoing) to replace as many parts as possible with my own makings.

Goal of the CSS/UI framework

• only uses standard HTML/CSS/JS features, no external dependencies. This also forbides a CSS “transpiler” like scss/sass.
• only using “modern” Web standards that have landed in the major browsers
• don’t re-invent the wheel - use what’s already there (e.g. css layouting, grid, flexbox)
• don’t support legacy / old standards / browsers
• needed assets created by myself (exception: a font)
• covers my own needs - nothing more

Features I implemented

• CSS reset to reasonable values
• CSS grid - a 12 column grid
• flexbox tools and helpers
• grid tools and helpers
• using css custom props (aka variables) and calc to allow customizations
• define common breakpoints for 3 sizes: phone, tablet, desktop
• icon helpers for svg icons
• A set of usable HTML Web Components