no-class.css

A CSS Framework Without Class

no-class.css is a small CSS framework indented to make you write HTML that looks good, cross-browser, without having to pull in a massive CSS library like Bootstrap or Foundation and mock about with the custom markup and classes they bring. Don't get me wrong, they do a great job, but sometimes you just want to write plain HTML to “strut your stuff” without having it look like it was designed in 1999.

Header Level 1

Header Level 2

Header Level 3

Header Level 4

Paragraphs

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu ^{libero sit} amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum _{rutrum orci}, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Lists

Ordered List

1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
2. Aliquam tincidunt mauris eu risus
   1. Lorem ipsum
   2. Enim, rem
3. Lorem ipsum dolor

Unordered List

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit
• Aliquam tincidunt mauris eu risus
  • Lorem ipsum
  • Eaque, adipisci
• Lorem ipsum dolor

Definition list

Menu

If you wrap an <ul> inside a <header> element it'll turn into a common menu pattern. (Yup, it's responsive.)

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur vero, blanditiis suscipit mollitia ratione id, iusto sunt, corporis consequuntur impedit rem sapiente excepturi? Quam quos obcaecati sed voluptate in debitis delectus consectetur maiores aperiam doloremque beatae animi, facilis dolorum maxime.

Pre/Code

#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
      

Need a highlighter?

Pull in an external lib like Prism.js and voilà! *Ok, we need to apply a class here.

#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
      

Buttons

Are you wondering how to would apply a button style to an anchor tag? Don’t. If it should look like a button, it probarbly is a button.

Table

Forms