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>
<nav>
<ul role="list">
<li>
<a href="...">Link</a>
</li>
...
</ul>
</nav>
</header>
<hr>
<main>
<article>
<section aria-labelledby="h">
<h2 id="h">Section Title</h2>
<p>Section content.</p>
</section>
<section aria-labelledby="hh">
<h2 id="hh">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>
<nav>
<ul role="list">
<li>
<a href="{{ url }}">{{ pageName }}</a>
</li>
...
</ul>
</nav>
</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. All colors—except Crimson—are defined by the browser. The black background in dark mode could appear slightly different from browser to browser.
- MCSS is a variant of SuperMinimalCSS crafted by Mike Mai.
- Georgia and Verdana might not be available in certain Android devices and device specific system fonts would render instead. Custom @font-face and web font licences are required to ensure Georgia and Verdana display in all devices.