A modern classless CSS framework inspired by the typefaces of Matthew Carter.
MCSS is a tribute to the British type designer Matthew Carter. The framework is designed with two of Carter’s most commonly known typefaces—Georgia and Verdana. The New Yorker once described Carter as “the most widely read man in the world” because his typefaces are available as system fonts in most operating systems.
MCSS is available in two typographically different themes.
-
Georgia on my mind: Typeset primarily using Georgia with generous spacing.
<html data-theme="georgia">...</html>
-
Verdana mania: Typeset primarily using Verdana with compact spacing.
<html data-theme="verdana">...</html>
With MCSS, some of the most common HTML elements are styled and can be used without any classes.
pqdlolullinavfooterheadersectioncaptionh1~h6blockquotefigcaptionfieldsettextareadetailssummarystrongbuttonfigureselectinputlabelsmalltableabbrcodeformsupsubkbdpreemhra
MCSS is written for plain HTML. It is accessible by default.
MCSS is designed for writing articles. To create a standard page, use the following semantic HTML template.
<header>
<h1>Page Title</h1>
<p>Page description.</p>
</header>
<hr>
<main>
<article>
<section>
<h2>Section Title</h2>
<p>Section content.</p>
</section>
<section>
<h2>Section Title</h2>
<p>Section content.</p>
</section>
</article>
</main>
<hr>
<footer>
<p>Footer content</p>
</footer>Set up the page template with your blog and use the <main> <article> container as the article body. Markdown renders semantic HTML so everything will just work.
<header>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</header>
<hr>
<main>
<article>
<!-- Markdown -->
{{ content }}
<!-- Markdown -->
</article>
</main>
<hr>
<footer>
Written by {{ author }} on {{ date }}.
</footer>MCSS auto-detects your operating system’s settings. Dark design is displayed if dark mode is your preferred setting.