• Stars
    star
    248
  • Rank 163,560 (Top 4 %)
  • Language
    HTML
  • Created over 11 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

HTML blocks

To view this unstyled markup visit http://mrmrs.io/html

HTML

Common markup patterns I use for developing websites.

Features

  • All non-media elements in the HTML5 spec are included on one page and are ready to be styled.
  • Modular Structure - add your own patterns, or delete the ones you don't like.
  • Semantic and accessible markup examples for common design patterns.
  • Thoroughly commented code (notes and reference links for new HTML developers)

Getting the Code

  • Create a new repo for your project on Github
  • In terminal run
    git clone [email protected]:mrmrs/html.git yourNewRepoName
    cd [yourNewRepoName]
    git remote rm origin
    git remote add origin [email protected]:yourUserName/yourNewRepoName.git
    git remote -v
  • git remote -v will allow you to check that you have changed the remote origin correctly. The output should look like:
    origin [email protected]:yourUserName/yourNewRepoName.git (fetch)
    origin [email protected]:yourUserName/yourNewRepoName.git (push)

Now you're set up to use this in a new project.

Getting Started

The HTML

  • Open up index.html with your favorite text editor and hack away. It's that simple.
  • To preview changes at http://localhost:8000 - open up terminal.app and type
python -m SimpleHTTPServer

Author

MRMRS

Reference

Mozilla HTML element list

MIT LICENSE

Copyright (c) 2018 Adam Morse http://opensource.org/licenses/MIT

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

More Repositories

1

colors

Smarter defaults for colors on the web.
CSS
9,240
star
2

pesticide

Kill your css layout bugs
CSS
1,367
star
3

fluidity

The worlds smallest fully-responsive css framework
JavaScript
1,103
star
4

mnml

Start a responsive html5 site with postcss and browser-sync
CSS
706
star
5

btns

A set of css utilities for constructing beautiful responsive buttons
CSS
340
star
6

gradients

Gradients!
HTML
261
star
7

nkd

Template for jekyll project with postcss and browser-sync
CSS
230
star
8

awesome-system-fonts

An awesome list of websites that use system fonts
189
star
9

css-uncut

WIP: All of css as single purpose classes
CSS
119
star
10

vimgifs

http://vimgifs.com
HTML
117
star
11

type.css

A mobile-first responsive type scale
CSS
106
star
12

links

Better default styles for text links
HTML
85
star
13

css-system-fonts

A css module for utilizing system fonts across platforms
HTML
84
star
14

component-api-talk

First draft of a talk I gave recently that I'm trying to turn into a blog post
77
star
15

react-elements

Prototyping setup: React + Glamorous + Styled-system
JavaScript
62
star
16

trim

An easier workflow for faster better stronger websites
CSS
48
star
17

viminfo

Tool to audit your daily vim usage
JavaScript
41
star
18

diatonic-type

Diatonic print scale translated to be a responsive type scale for the web.
CSS
41
star
19

writing

Blog about vim, css, and design.
JavaScript
29
star
20

jkl

Boilerplate for a jekyll blog with a responsive type scale.
CSS
28
star
21

tachyons-lite

Tachyons is small. Tachyons-lite is smaller.
CSS
28
star
22

colors-saturated

A saturated color palette
CSS
27
star
23

screencasts

Screencasts on using vim, git, unix, and oocss as design tools
CSS
27
star
24

ios-dynamic-type

CSS module for using dynamic type in iOS on the web
CSS
26
star
25

profile

WIP responsive github profile viewer
CSS
25
star
26

x0-styled

Prototyping static sites with x0 + glamorous + styled-system
JavaScript
25
star
27

slides-cssconfoakland-2014

Slides from my talk at cssconf oakland
24
star
28

mrmrs

Personal Portfolio Site
HTML
23
star
29

representation

Data visualization project around representation in congress, executive branch, and supreme court
JavaScript
22
star
30

colors-sass

colors.css powered by sass
CSS
21
star
31

vimrc

Vim Script
19
star
32

elements

Design prototypes, and production ready apps with: React + Styled-System + Glamorous
JavaScript
17
star
33

marquee

HTML
15
star
34

mrsjxn

Source for mrsjxn.com. Built with angular.
CSS
15
star
35

css-unabridged

An experiment with css
CSS
15
star
36

ideas

HTML
14
star
37

tachyons-elements

Tachyons + styled-system
JavaScript
13
star
38

css-spacing

Responsive CSS module for setting margin and padding on elements
CSS
13
star
39

small

CSS for small devices
CSS
12
star
40

cssstats-starter-kit

CSS
11
star
41

paper

CSS
11
star
42

sans-serif

CSS module for utilizing system sans-serif fonts
HTML
10
star
43

css-cursors

CSS module for setting the cursor property
CSS
10
star
44

contrast

Visual example for readable and unreadable contrasts
HTML
9
star
45

waves

Visualizing Wave form data from music
JavaScript
9
star
46

colors-less

colors.css powered by less
CSS
8
star
47

beats

Beats by skullcat
CSS
8
star
48

ill

CSS
8
star
49

-

My favorite unicode
CSS
8
star
50

static

JavaScript
8
star
51

hsla

Demo site built in under 5 minutes
7
star
52

grids

7
star
53

qstns

Asking Better Questions
CSS
7
star
54

prnt

Portfolio of Print work
CSS
6
star
55

links.css

CSS
6
star
56

images

Black and white images I like for including as placeholders when prototyping.
6
star
57

css-grid

CSS module for CSS grid
CSS
6
star
58

scary

Prototyping environment with react, next, css-in-js, and styled-system
JavaScript
6
star
59

css-display

Responsive CSS module for setting display
CSS
6
star
60

css-colors

CSS color variables
CSS
6
star
61

floats

CSS
5
star
62

css-averages

CSS
5
star
63

up

A short photo project
HTML
5
star
64

mrmrs.github.io

CSS
5
star
65

notesfromthetribe

Artwork of Will Deutsch
CSS
5
star
66

colors-stylus

Colors.css powered by stylus
CSS
5
star
67

css-filter-blur

CSS module for using the blur function
CSS
5
star
68

gfffs

HIDEF GIFS
CSS
5
star
69

css-text-underline

Responsive CSS module for setting text-underline
CSS
5
star
70

css-type-scale

Simple, mobile-first responsive type-scale
CSS
5
star
71

css-paged-media

CSS module for setting page break
CSS
5
star
72

css-utilities

CSS module of simple utilities
CSS
5
star
73

css-text-overflow

Responsive CSS module for setting text-overflow
CSS
5
star
74

css-letter-spacing

Responsive CSS module for setting tracking (letter-spacing)
CSS
4
star
75

css-npm-template

Template for new css modules to be hosted on npm
CSS
4
star
76

css-transition-duration

Responsive CSS module for setting transition duration
CSS
4
star
77

css-hyphens

Resposive CSS module for setting hyphen property across breakpoints
CSS
4
star
78

css-clip

CSS module for setting clip property
CSS
4
star
79

css-squares

Utilities classes for creating squares with CSS
CSS
4
star
80

photos

CSS
4
star
81

talk-static-sites

4
star
82

css-z-index

Responsive CSS module for setting z-index
CSS
4
star
83

tops

Responsive photo grid built in less than 5 minutes
CSS
4
star
84

css-overflow

CSS module for setting overflow
CSS
4
star
85

talk

4
star
86

css-border-colors

Responsive CSS module for setting border colors
CSS
4
star
87

api

Personal application programming interface
4
star
88

css-word-wrap

Responsive CSS moule for setting word-wrap property
CSS
4
star
89

talk__better-tools-engine-yard

Slides from a talk I gave on the need for better css authoring tools. These slides are beyond uninformative.
4
star
90

mdx-x0

JavaScript
4
star
91

css-unicode-range

Responsive CSS module for setting unicode range
CSS
4
star
92

css-skins

CSS module with utility classes for skinning elements
CSS
4
star
93

css-filter-grayscale

CSS module for te grayscale function
CSS
4
star
94

measure

CSS
4
star
95

css-queries

CSS
4
star
96

css-background-clip

CSS module for setting background-clip
CSS
4
star
97

css-floats

Responsive CSS Module for setting floats
CSS
4
star
98

css-word-spacing

Responsive CSS module for setting word-spacing
CSS
4
star
99

css-min-width-scale

Responsive CSS module for setting min-widths
CSS
4
star
100

scale

The scale of things
CSS
4
star