bryanbraun / poor-mans-styleguide

A frontend styleguide for the pragmatic.

Poor Man's Styleguide

A quick-and-dirty frontend styleguide, designed to be copied and pasted into your CMS.

It contains all common page elements, in HTML and (Github Flavored) Markdown formats.

If you'd like to contribute, make your changes to both the markdown and HTML files. If the elements can not be represented in markdown (like forms, for example), you can just add them to the final section of index.html.

See the full demo at bryanbraun.com/poor-mans-styleguide

---

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

---

Headings with Text

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 3

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 4

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 5

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 6

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

---

Block Elements

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Note: the Figure-Figcaption and Details-Summary elements are not currently supported in markdown.

---

Text Elements

The a element, external a element, and a element with title examples

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The data element example

The del element example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The _{sub element} example

The ^{sup element} example

The time element example

The u element example

The var element example

---

Monospace / Preformatted

Code block wrapped in "pre" and "code" tags:

// Loop through Divs using Javascript.
var divs = document.querySelectorAll("div"),
  i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

Monospace Text wrapped in "pre" tags:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

---

List Types

Ordered List

1. List Item 1
2. List Item 2
3. List Item 3
   1. List Item 3.1
   2. List Item 3.2
      1. List Item 3.2.1
      2. List Item 3.2 2
   3. List Item 3.3
4. List Item 4

Unordered List

• List Item 1
• List Item 2
• List Item 3
  • List Item 3.1
  • List Item 3.2
    • List Item 3.2.1
    • List Item 3.2 2
  • List Item 3.3
• List Item 4

Definition List

Definition Term 1

Definition Description 1

Definition Term 2

Definition Description 2

---

Tables

Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

---

Media and Form Elements

The remaining sections contain elements that cannot be represented in markdown. Please consult the HTML version, to see these elements.

poor-mans-styleguide's Issues

Add uncommon date / time based input types (like week, month, etc)?

There are some new input types with interesting native UI's that haven't been included here, like week, month, date, datetime, etc. We could include these on poor man's styleguide if we want. I'm not sure how practical or important they are (browser support is inconsistent), but perhaps there's an argument to include them for the sake of being comprehensive.

Here's an example of some: http://html5tutorial.info/html5-date.php

Add indeterminate checkbox

Here are some details: https://css-tricks.com/indeterminate-checkboxes/

Here's a codepen, that we can probably just copy/paste the markup from: https://codepen.io/bryanbraun/pen/JjYQjwY

Make improvements at mobile screen widths

For example, the embedded youtube video breaks outside of its container:

Missing slash in `<p>` tag.

Very minor one this, but when pasting the styleguide markup into my React component, I got a an error complaining that a closing <p> tag had no slash in it. Just creating an issue to map to my PR which I will submit.

Update the image meta tag.

The current image metatag results in a 404.

I should replace it with this (or a similar screenshot):

Replace broken images with data-uri images

It looks like the images are broken:

---

---

Lets replace these images with data-uri images, to prevent them from breaking in the future.

The source image doesn't need to be too large and any public domain image would work. We could use this one if we want: https://commons.wikimedia.org/wiki/File:Yellow_Blooms_(17175036818).jpg

Docs: Layout is broken in Safari

Incorrect

Correct

(only visible on the HTML and Markdown pages)

Add link element

Fix HTML validation issues

When I run the page through an HTML validator, I get some errors: https://validator.w3.org/nu/?doc=https%3A%2F%2Fpoormansstyleguide.com%2F

I haven't gone through the results in detail to see if every item needs fixing, but it looks like many things could be improved.

Embedding from HTTP

The embeds in the styleguide are called using HTTP protocols, which doesn't work well if you try to embed them into an HTTPS page.

I could change the youtube one to HTTPS (or protocol-relative), but these specific HTML5 assets cannot be served from HTTPS. Ideally, I'd have better example embeds (being pulled from a better HTTPS example site).