Skip to content

emareg/classlesscss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Classless.css

Classless.css is one small CSS file, which defines few but great styles for basic HTML5 tags plus a few classes for grid and spacing. Nothing more. Nothing less.

Demo: at classless.de

Features

  • Small. Only 400 lines of pure CSS3 for tooltips, grid, navigation bar, cards and more.
  • Single File. Everything in one file, no dependencies, no JavaScript.
  • Modular. Don't need all features? The CSS file is structured into feature groups, simply delete what you don't need¹.
  • Responsive. We use media queries, em/rem units, and smart overflows for tables and code.
  • Bootstrap Compatible. Special features that require classes use the same names as Bootstrap.

¹: we also offer a pre-made tiny version (80 lines) with only the base styles.

Getting Started

For testing, you can simply insert the following line into your HTML file. For production, please host the classless.css file yourself.

<link rel="stylesheet" href="https://classless.de/classless.css">

Embedding Font 'Open Sans'

Classless looks best with the font 'Open Sans'. Earlier versions of Classless directly imported the font from Google Fonts. However, this leaks the visitor's IP to Google servers which is not compliant with EU's GDPR. We therefore leave it to the user to choose how to import the font. Click on one of the following three methods

1. Import from Google Font Anyway.

Add the following line to Classless.css:

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');

In order to be compliant with GDPR, you need to ask for the visitor's consent.

2. Use a GDPR compliant CDN.

Instead of using Google, you could import the font from a CDN that is GDPR compliant. Candidates (no guarantee) are

CDN Fonts

Offers the fonts but no idea where this service is hosted or how it processes IP addresses.

@import url('http://fonts.cdnfonts.com/css/open-sans');

Unpkg

Unpkg hosts files of NPM packages, including fontsource. They also have an open issue regarding GDPR compliance, but as of 2022 there is no statement. Since the CSS files are written for local access (relative paths), you need to add the following font definitions.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('https://unpkg.com/@fontsource/[email protected]/files/open-sans-all-400-normal.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('https://unpkg.com/@fontsource/[email protected]/files/open-sans-all-400-normal.woff') format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('https://unpkg.com/@fontsource/[email protected]/files/open-sans-all-400-italic.woff') format('woff');
}
3. Host Fonts Yourself.

Add Manually

The following project offers a step-by-step explanation for hosting Google fonts on your own server:

https://gwfh.mranftl.com/fonts/open-sans?subsets=latin

Using NPM

Install fontsource and add @import '@fontsource/open-sans'; to classless.css

npm install @fontsource/open-sans
echo -e "\n@import '@fontsource/open-sans';\n" >> classless.css
 

Besides that, Classless looks nice with many fonts and you can choose any other font you like.

Comparison of Minimal Frameworks

Classless Skeleton Milligram Sakura
Features responsive, grid,
themes, navbar,
cards, utilities
responsive,
grid
responsive,
grid, utilities
responsive
Size 11.2 kB
400 LOC
11.2 kB
400 LOC
10.3 kB
600 LOC
3.3 kB
165 LOC
Reset tiny reset normalize normalize normalize
Browsers Chrome, FF,
Edge
Chrome, FF Chrome, FF, Opera
Edge, Safari
Chrome, FF
License MIT MIT MIT MIT

Classeless Support

Browser Support v0.94 v0.95 v1.0 v1.1
FireFox 122.0 on Ubuntu 22.04 -- -- perfect perfect
Chrome 128.0 on Windows 10 -- -- perfect perfect
Edge 128.0 on Windows 10 -- -- perfect perfect
Firefox 103.0 on Android 14 -- -- perfect perfect
Brave 1.69 on Android 14 -- -- perfect perfect
Chromium 96.0 on Ubuntu 20.04 -- perfect perfect --
FireFox 97.0 on Ubuntu 20.04 -- perfect perfect --
FireFox 84.0 on Windows 10 perfect perfect perfect --
Edge 88.0 on Windows 10 perfect perfect perfect --
IE 11 on Windows 10 poor/good¹ poor/good¹ poor/good¹ --
FireFox 85.1 on Android 10 perfect perfect perfect --
Samsung Browser on Android 10 perfect perfect perfect --
Safari on iPhone 10 perfect -- good² --

¹: Classless-full: body full width, table and code styles ignored, cite elements overlap text. However, classless-tiny without variables looks good.
²: card borders not rounded