Screen — CSS for desktops, tablets, and phones

Star on GitHub.
Donate a coffee or two.
Download 0.4.0 or link to it.

<link rel="stylesheet"
      media="screen"
      href="https://screencss.com/screen-0.4.0.css">
Components:
Typography

This is <b>, .b, .bold, <strong>, and .strong (700).

This is .xb and .xbold (800).

This is .xxb, .xxbold, and .black (900).

This is <i>, .i, <em>, and .em.

This is <s>, .strike, <del>, and .del.

This is .grey and .lightgrey.

This is <code>, .code, and .mono.

This is <mark>, .mark, and .highlight.

This is <a>, <a.inherit>, and <a.grey>.

This is <sub>, .sub, <sup>, and .sup.

This is .xs and .xsmall (12px).

This is <small>, .s, and .small (14px).

This is .m and .medium (16px).

This is .l and .large (18px).

This is .xl and .xlarge (24px).

This is .xxl and .xxlarge (48px).

Headings

This is <h1> and .h1.

This is <h2> and .h2.

This is <h3> and .h3.

This is <h4> and .h4.

Rulers
This is <hr>:
This is .hr:
This is <div class="hr"><span>Foo</span></div>:
Foo
Layout
This is a <p> and .p.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at imperdiet sem. Nam a orci in ligula egestas rutrum non at mauris. Suspendisse luctus enim augue, non ullamcorper leo porta et. Praesent sit amet semper tortor.

This is .left:
Lorem ipsum dolor sit amet.
This is .center:
Lorem ipsum dolor sit amet.
This is .right:
Lorem ipsum dolor sit amet.
Lists
This is <ul>:
This is <ol>:
  1. This is <li>.
  2. Etiam id ex ac elit volutpat interdum. Fusce sodales maximus tellus, nec egestas odio euismod pulvinar. Cras sed nunc vel massa interdum euismod nec a quam.
This is <ol.nostyle>:
  1. This is <li>.
  2. Etiam id ex ac elit volutpat interdum. Fusce sodales maximus tellus, nec egestas odio euismod pulvinar. Cras sed nunc vel massa interdum euismod nec a quam.
Boxes

Those are .box.

Hey! This is .box.action. You should do something. Link
Wait! This is .box.info. You should know something. Link
Oh, no! This is .box.error. You should fix something. Link
Yay! This is .box.success. You did something. Link
Forms
This is input:

This is input[type="button"]:
This is input[type="button"].primary:
This is input[type="button"].disabled:

This is input[type="submit"]:
This is input[type="submit"].primary:
This is input[type="submit"].disabled:

This is button:
This is button.primary:
This is button.disabled:

This is textarea:
Tables
Column 1 Column 2 Column 3
One Two Three
Four Five Six
Responsive

.wide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ¶
Vestibulum mollis semper porttitor. ¶
Vestibulum tincidunt, dui ut cursus commodo, felis tellus aliquet neque, quis vulputate augue lacus ut ligula. ¶
Proin eget aliquam neque. ¶

.narrow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ¶
Vestibulum mollis semper porttitor. ¶
Vestibulum tincidunt, dui ut cursus commodo, felis tellus aliquet neque, quis vulputate augue lacus ut ligula. ¶
Proin eget aliquam neque. ¶

About · Analytics
All emojis designed by OpenMoji – the open-source emoji and icon project. License: CC BY-SA 4.0