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:

One goal of my personal site - - 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