typingman CSS

This is a preview of the typingman CSS theme. It's a classless CSS theme that we made for fun to be used in our projects. It's made to be simple, consistent, responsive, and beautiful.

Source behind this one.

How do I get this theme?

Paste into your website's <head> this snippet:

<link rel="stylesheet" href="https://css.typingman.com/typingman.min.css" />

Is it responsive?

Heck yeah! It doesn't include any fancy styles so it's easily mobile responsive. Just add the famous responsive viewport tag and you'll be good to go!

In fact, try resizing this page. Everything flows super nicely as you'll see.

Element demos

This is supposed to be a demo page so we need more elements!

Links

This is a link. Links are great for linking to other pages.

You can also use links as buttons:

Click me!

Buttons

This is a . Buttons are great for triggering actions.

Sections

This is a section. As you can see, it's a section. Moreover, it's a section. And, sections are great for grouping content together.

Form elements

Code

Below is some code, you can copy it with Ctrl-C. Did you know, alert(1) can show an alert in JavaScript!

// This logs a message to the console
console.log('Hello, world!')

Other

Here's a horizontal rule and image because I don't know where else to put them.

This is a blockquote.

      Good old preformatted text, no code at all

       |\_/|        ****************************    (\_/)
      / @ @ \       *  "Purrrfectly pleasant"  *   (='.'=)
     ( > º < )      *       Poppy Prinz        *   (")_(")
      `>>x<<´       *   ([email protected])   *
      /  O  \       ****************************

And here's a nicely marked up table!

#	Name	Quantity	Price
1	Godzilla	2	$299.99
2	Mozilla	10	$100,000.00
3	Quesadilla	1	$2.22

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. This is strong, this is normal, this is just bold, and this is emphasized! And heck, here's a link.

"The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> cite element."
MDN, "The Block Quotation element"

Unordered list item 1
Unordered list item 2
Unordered list item 3

Ordered list item 1
Ordered list item 2
Ordered list item 3

Links with mailto:, tel:, sms: addresses might be styled...

[email protected]
778-330-2389
666-666-6666

Heading 1

A paragraph <p> of lorem ipsum after the heading. Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Multimedia

Images, video, and audio, oh my! Keep in mind that these are placed inside a <figure> element.

Audio

Video

Inline frames

MathML

MathML is supported in HTML5!

The infinite sum $\sum_{n = 1}^{+ ∞} \frac{1}{n^{2}}$ is equal to the real number $\frac{π^{2}}{6}$ .

Canvas

This is just a boring yellow rectangle. Nothing to see here.

Shortcuts

Here are several attributes that can be used as shortcuts for common styles:

shadow

Add a shadow attribute to an element to add shadow to it.

scrollbar

Add a scrollbar="hidden" attribute to an element to hide the scrollbar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu elit at purus maximus ornare. Nulla iaculis eget eros id sollicitudin. In elementum egestas nibh ut tempor. Phasellus pellentesque turpis eros. Maecenas gravida varius erat non ultricies. Vestibulum tincidunt vulputate rutrum. Sed enim urna, malesuada eu varius eget, facilisis a justo. Praesent vehicula sem sed odio cursus aliquet. Nunc magna purus, ultrices id urna sit amet, ultricies porta mauris. Cras quis nibh nulla. Nulla porta, neque consectetur dignissim euismod, massa augue accumsan dolor, ac tempus magna odio vitae velit. Pellentesque molestie lectus id est interdum facilisis. Morbi ornare velit ac lobortis tincidunt. Nunc consequat, mauris eget pharetra rhoncus, neque tortor tempus velit, in mattis augue dui sed diam. Maecenas ut imperdiet risus.

Aliquam consequat congue facilisis. Cras aliquet augue diam. Nunc convallis molestie iaculis. Integer id maximus diam. Phasellus at vehicula augue. Nam dictum, tortor non porttitor malesuada, urna purus tempor arcu, eget consequat elit turpis in augue. Praesent eu accumsan eros. Vivamus gravida blandit velit a venenatis. Quisque at tortor ac lacus accumsan pharetra. Mauris porttitor egestas sem nec feugiat. Nullam dignissim metus vel nulla pharetra, et blandit erat bibendum. Ut sagittis nec lacus pulvinar imperdiet. Vivamus semper dignissim enim, et rutrum leo vehicula et. Vestibulum fringilla malesuada venenatis.

In suscipit est ut efficitur dapibus. Curabitur pellentesque egestas metus. Nulla velit risus, porta eget convallis eu, tempor ac felis. Pellentesque feugiat tortor sed dui feugiat, eget venenatis nibh pulvinar. Integer euismod urna eget justo sodales, in tincidunt nisi eleifend. Nulla porta lacus ante, id vestibulum nibh commodo ut. Etiam vestibulum eleifend mauris vel malesuada. Duis id congue mauris. In aliquet, mauris id luctus efficitur, orci risus faucibus orci, sit amet maximus augue mauris sit amet quam. Fusce tincidunt pharetra fringilla. Suspendisse ac condimentum arcu. Cras ac facilisis lorem.

Nam tempus dignissim risus, sit amet venenatis nibh accumsan vitae. Etiam id risus varius, faucibus eros vel, vestibulum orci. Nulla facilisi. Duis placerat vel ante vel ultrices. Fusce rhoncus augue a maximus semper. Nullam non imperdiet metus, eget consequat libero. Donec dui lectus, iaculis in orci sit amet, vestibulum porta ex. Proin sodales mollis mauris quis sagittis. Cras sit amet dignissim dolor. Praesent id faucibus augue, non ullamcorper enim. Aenean auctor urna eget odio condimentum, at aliquam quam dapibus. Nunc sit amet dui laoreet quam dapibus accumsan sit amet vitae nulla. Vestibulum at dictum orci, nec sagittis leo. Fusce mattis sagittis enim ac pretium.

Suspendisse dignissim lacus nec nisl molestie pretium sed id nisl. Nam tempor volutpat tortor non sagittis. Integer sed semper nisl. Cras justo enim, molestie at ligula ac, malesuada rutrum ex. Integer mi orci, malesuada vel tristique vitae, venenatis sit amet orci. Pellentesque scelerisque tempus risus vitae dictum. Maecenas porttitor convallis purus, nec vehicula risus pulvinar sed. Suspendisse felis nisi, convallis sed fermentum porta, ultricies non nisl. Nunc consectetur felis vitae justo ultricies, quis imperdiet lectus venenatis.

flex

Add a flex="row" attribute to a div to make it a flex container with a row layout.

Item

Or add a flex="column" attribute to a div to make it a flex container with a column layout.

Item

Final thoughts

This is the end of the showcase. Thanks for checking it out!

Go back to the top