YACCK - Yet Another Classless CSS Kit

YACCK is a classless, responsive CSS kit that focuses on pure HTML semantic elements. It is inspired by many other similar minimal CSS frameworks, such as MVP.css and new.css. It is intended to be used on simple websites and blogs.

This is a work in (slow) progress. View the source on GitHub.

Install

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">

For more details, including customizing and fonts, see the GitHub readme.

The following is an example of how various elements are styled. Please see the source code of this page for the markup structure.

Text Elements

Headings

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Paragraphs

Lorem ipsum dolor sit amet consectetur adipiscing elit ac ridiculus curabitur porttitor, interdum pretium sed velit natoque mus commodo feugiat habitasse aliquam justo class, nostra per dui risus quisque erat mauris semper dictum nisi. Ac at enim eleifend nulla turpis erat interdum accumsan facilisi, consequat quisque euismod id fringilla sed potenti.

Inline Text Elements

• <a>: I'm an unvisited anchor and I'm a visited anchor
• <i>, <em>: I have meaning! and I have emphasis!
• <b>, <strong>: I'm bringing attention! and I have importance!
• <code>: console.log("Hello!");
• <mark>: The following word is marked.
• <kbd>: Ctrl+Alt+Del
• <q>: I'm not superstitious but I am a little stitious. - Michael Scott

Blockquotes

Do I need to be liked? Absolutely not. I like to be liked. I enjoy being liked. I have to be liked, but it's not like this compulsive need to be liked, like my need to be praised.

Preformatted Text

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 

Code Block

Wrap your <code> element in a <pre> element to display it as a block.

<div>
    <p>This is a very important paragraph. It goes on and on and on and on...<p>
<div>

Images

Lists

Unordered List

• List Item 1
• List Item 2
• List Item 3
• List Item 4

Ordered List

1. List Item 1
2. List Item 2
3. List Item 3
4. List Item 4

Definition List

Term 1

Definition 1

Term 2

Definition 2

Term 3

Definition 3

Details

Also sometimes referred to as an accordion element.

Horizontal Row

Tables

Note: I'd prefer to have the tables be full-width, with overscroll-x for large tables that expand beyond the viewport. However, without a wrapper around it, I haven't found clean CSS-only solution. A div wrapper can't be targeted via CSS without a class or adding some attribute. There may be a solution I am unaware of. For now, tables are full-width and if the table content is too large, the content will be clipped on as viewport width is reduced. This may change, depending how I feel about adding extra stuff.

Forms