Opinionated, classless styles for semantic HTML

  • By null
  • Last update: Oct 31, 2022
  • Comments: 9

Writ

Opinionated, classless styles for semantic HTML.

Usage

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//writ.cmcenroe.me/1.0.4/writ.min.css">

Full template

Writ is served through the CloudFlare CDN.

Goals

  • Drop-in stylesheet
    • No classes
    • No extra elements
  • Responsive, without special-casing
  • Visually pleasing

Motivation

HTML is super easy to write. Markdown is even easier to write and generate HTML from. But what does it look like?

Default styles

Not very nice, and it gets worse the more there is. Applying the Writ stylesheet makes it better.

Writ styles

Caveats

Writ is designed for modern, standards compliant browsers only. There are no compatibility hacks. Writ is tested on the latest stable releases of Safari, Chrome and Firefox.

License

Copyright © 2015, Curtis McEnroe [email protected]

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

Github

https://github.com/programble/writ

Comments(9)

  • 1

    Doesn't handle

    Perhaps add a default style for <footer>? On my blog I put the nav at the bottom of the article in a <footer> tag, to leave the top clutter-free. Tried to convert it to use this CSS and although most of the site worked well the footers did not.

  • 2

    Modular scale in headlines

    Have you considered using modular scale in your headlines? Here are a few handy calculators if you'd like to play around with sizes:

    • http://www.modularscale.com/
    • http://type-scale.com/

    For a base font size of 14-16px, I think a ratio of 1.2 (a "minor third") yields nice results. That would imply the following sizes:

    h1 { font-size: 2.488em; }
    h2 { font-size: 2.074em; }
    h3 { font-size: 1.728em; }
    h4 { font-size: 1.44em; }
    h5 { font-size: 1.2em; }
    h6 { font-size: 1em; }
    
  • 3

    Add hr style

    It's great to be able to write html with little thought to style and classes. I like using <hr> to break up content. I tried to keep with the simple style.

  • 4

    Use rgba for gray backgrounds

    Using rgba(0, 0, 0, 0.05) instead of #eee for gray backgrounds enables people to override the body background color (e.g. to a light gray or light blue) while preserving slightly darker <pre>, <code>, etc. Also, in my opinion, #eee is a shade too dark. Using rgba(0, 0, 0, 0.05) (equivalent to #f2f2f2 on a white background) provides better contrast.

    Related: should the background colors for the above elements be grouped together in a single rule like this one?

  • 5

    Vertical rhythm

    Since you have opinionated sizes for headline and body text, you can establish a strong vertical rhythm. This calculator is handy for visualizing and verifying sizes. The calculator unfortunately requires target sizes input as pixels, but as you can see the resulting CSS uses relative units (em).

  • 6

    Support the Section tag

    Building a single webpage for a short presentation, I used section instead of article which, in my context is more... well, semantically correct.

    Section is not supported and the only way I can make it work is to enclose the whole page (apart from header) in a

    tag, which I believe is wrong.

    Applying the same layout for section and article seems good for me.

  • 7

    Color code inside links

    The Markdown:

    [`foo`](#foo)
    

    Renders as:

    <a href="#foo"><code>foo</code></a>
    

    Which doesn't look like a link because <code> overrides the colour.

  • 8

    add license title

    It's not strictly required, but it's useful metadata, and part of the recommended license template text (see http://choosealicense.com/licenses/isc/ and https://opensource.org/licenses/isc-license)

  • 9

    Bump clean-css from 3.4.28 to 4.2.1

    Bumps clean-css from 3.4.28 to 4.2.1.

    Changelog

    Sourced from clean-css's changelog.

    4.2.1 / 2018-08-07

    • Fixes giving breakWith option via a string.

    4.2.0 / 2018-08-02

    • Adds process method for compatibility with optimize-css-assets-webpack-plugin.
    • Fixed issue #861 - new transition property optimizer.
    • Fixed issue #895 - ignoring specific styles.
    • Fixed issue #947 - selector based filtering.
    • Fixed issue #964 - adds configurable line breaks.
    • Fixed issue #986 - level 2 optimizations and CSS 4 colors.
    • Fixed issue #1000 - carriage return handling in tokenizer.
    • Fixed issue #1038 - font-variation-settings quoting.
    • Fixes ReDOS vulnerabilities in validator code.

    4.1.11 / 2018-03-06

    • Backports fixes to ReDOS vulnerabilities in validator code.

    4.1.10 / 2018-03-05

    • Fixed issue #988 - edge case in dropping default animation-duration.
    • Fixed issue #989 - edge case in removing unused at rules.
    • Fixed issue #1001 - corrupted tokenizer state.
    • Fixed issue #1006 - edge case in handling invalid source maps.
    • Fixed issue #1008 - edge case in breaking up font shorthand.

    4.1.9 / 2017-09-19

    • Fixed issue #971 - edge case in removing unused at rules.

    4.1.8 / 2017-09-02

    • Fixed issue #959 - regression in shortening long hex values.
    • Fixed issue #960 - better explanation of efficiency stat.
    • Fixed issue #965 - edge case in parsing comment endings.
    • Fixed issue #966 - remote @imports referenced from local ones.

    4.1.7 / 2017-07-14

    • Fixed issue #957 - 0% minification of width property.
    ... (truncated)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.