Bigger. Bolder. Stronger.
🎨 ➕ 🔧 with ❤️ by Mike Mai
Typesettings.css is a lite design system for minimal website or article design, inspired by traditional graphic design fundamentals. No colors; no Javascript; no classes required! In version 2.x, the typography scales bigger, the design goes bolder, and contrast gets stronger.
Basic Usage
-
Include
typesettings.css
in the HTML file’s<head>
section:<head>
<link rel="stylesheet" href="[path]/typesettings.css">
</head>📣: If you are using
typesettings.css
as is, don’t combine it with other frameworks. Also, basic resets are included, there is no need to use Normalize.css or Sanitize.css. -
Add
data-typesettings
attribute to the direct child element of the<body>
:<body>
<div data-typesettings>
…
</div>
</body>
Enhanced elements
All of these HTML elements can be used inside the div[data-typesettings]
element without any classes. It’s that easy!
-
p
-
dl
-
ol
-
ul
-
nav
-
aside
-
footer
-
header
-
section
-
h1
~h6
-
blockquote
-
fieldset
-
details
-
button
-
figure
-
input
-
label
-
small
-
table
-
abbr
-
code
-
form
-
kbd
-
pre
-
hr
Browser Support
This framework is built for all browsers but IE, cuz fuck it.