oli.css

a modern no-class framework [early alpha]

oli.css is an accessible no-class CSS framework built with modern CSS. It allows you to create beautiful prototypes without writing any CSS or it can serve as a strong starting point for any website.

Examples

Check out more demos.

Features

no classes or data- attributes
100% HTML only

highly configurably CSS-API

:root {
  --oli-s-magic: true; /** Make opinionated design decisions based on the markup */
  --oli-s-layout: horizontal; /** Page layout */
  --oli-s-scroll-behavior: smooth; /** Always auto if prefers-reduced-motion is active  */
  --oli-s-font-stack: transitional; /** Based on modernfontstacks.com */
  --oli-s-page-max-width: 80rem; /** Maximum width of the page */
  --oli-s-page-width: 100%; /** Page width */
  --oli-s-page-start-column-width: 16rem; /** Width of the start column */
  …
}

uses modern CSS and cuts the mustard at Cascade Layers

Getting started

To use oli.css you have three options.

Download

Download the .zip file and embed it in your pages.

<link rel="stylesheet" href="oli/index.css">

or import it in one of your layers.

@import url('third-party/oli/index.css') layer(third-party);