YACCK - Yet Another Classless CSS Kit
YACCK is a classless, responsive CSS kit/framework that focuses on pure HTML elements. It is inspired by many other similar minimal CSS frameworks, such as MVP.css and new.css. Meant for use in simple websites and blogs.
Currently a work in progress.
You can download the yacck.css file from GitHub and include it in your project:
<link rel="stylesheet" href="path/to/yacck.css">or use a CDN (minimized file):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sphars/yacck/yacck.min.css">To include fonts, see Fonts note below.
- Simple semantic layout
- Cross-browser support
- Responsive
- Accessible (as much as possible)
- Customization
- Dark/light mode (based on prefers-color-scheme, currently WIP)
YACCK follows a somewhat opinionated way of laying your HTML. See the index.html file and the demo page for an example layout.
YACCK uses CSS variables in the :root element to define customizable values, such as sizing, colors and fonts.
You can override the defaults in your own CSS file in a :root rule.
By default, YACCK uses a font stack of system fonts for sans-serif and monospace, so no external fonts are required. However, you are welcome to use your own fonts. The following fonts (in my opinion) work well:
Sans-Serif
Monospace
Add a link to the fonts in your HTML's <head>:
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Rubik&display=swap" rel="stylesheet">In your own CSS file, add a reference to your selected fonts in the :root element:
:root{
--font-family: 'Rubik', Roboto, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-monospace: 'Fira Mono', 'Roboto Mono', Consolas, 'Courier New', Courier, monospace;
}Note that Rubik and Fira Mono are already referenced by default in yacck.css. You just need to be sure to link to the fonts in your HTML files.
Example page based on HTML5 Test Page. Inspired by MVP.css, new.css and other minimal CSS frameworks (see list here).