Plate-plaque CSS
* {
box-sizing: border-box;
}
html, body {
min-height: 100%;
background: #fff;
color: #000;
}
/* sets the body height of the browser, so that backgrounds and div heights work correctly. Color and background will almost certainly be altered; they are just placeholders */
body {
font-size: 1.4rem;
text-rendering: optimizeLegibility;
}
/* sets the base font size for the document; turns on kerning pairs and ligatures */
body, ul, ol, dl {
margin: 0;
}
article, aside, audio,
footer, header, nav, section, video {
display: block;
}
/* ensures that older browsers will display HTML5 elements correctly */
h1 {
font-size: 1.4rem;
}
/* begins to set up font sizes relative to base rem – h1 has been used as an example */
p {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
/* sets hyphenation by default on paragraphs */
textarea {
resize: vertical;
}
/* changes textarea resizing from "both" (UA default) to vertical only */
table { border-collapse: collapse; }
td {
padding: .5rem;
}
/* causes tables to actually look like tables */
img {
border: none;
max-width: 100%;
}
/* removes outlines from linked images (for older browsers and IE), sets up images for responsive design layout */
input[type="submit"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
border : 0px;
}
/* removes the inner border effect from focused buttons for form elements in Firefox */
input[type="search"] {
-webkit-appearance: textfield;
}
input[type="submit"] {
-webkit-appearance:none;
}
/* removes the OS X appearance from HTML5 search inputs and submit buttons when viewed in Safari */
input:required:after {
color: #f00;
content: " *";
}
/* sets up required form fields with the conventional following red asterix */
input[type="email"]:invalid {
background: #f00;
}
/* causes a visual alert in browsers that do client-side checking of HTML5 email field – this may already be the default in some browsers. */
.right {
float: right;
margin-left: 2rem;
clear: right;
}
.left {
float: left;
margin-right: 2rem;
clear: left;
}
/* allows a quick shortcut for floating elements left and right while avoiding the “float quirk” problem */
sub, sup {
line-height: 0;
}
/* sets superscript and subscript text so that it doesn't throw off leading for elements in which they are included */
Fair Fly
