Last active
November 11, 2015 14:26
-
-
Save DaveKin/23952d9e8314dc7a438c to your computer and use it in GitHub Desktop.
blank scss for building base HTML5 element styles - good for styling editorial content
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Base element styles */ | |
// The root element | |
html { | |
// root element | |
} | |
// Sections | |
body { | |
// document body | |
} | |
section { | |
// section | |
} | |
nav { | |
// group of navigational links | |
} | |
article { | |
// article | |
} | |
aside { | |
// tangential content | |
} | |
h1 { | |
// heading | |
} | |
h2 { | |
// heading | |
} | |
h3 { | |
// heading | |
} | |
h4 { | |
// heading | |
} | |
h5 { | |
// heading | |
} | |
h6 { | |
// heading | |
} | |
hgroup { | |
// heading group | |
} | |
header { | |
// header | |
} | |
footer { | |
// footer | |
} | |
address { | |
// contact information | |
} | |
// Grouping content | |
p { | |
// paragraph | |
} | |
hr { | |
// thematic break | |
} | |
br { | |
// line break | |
} | |
pre { | |
// preformatted text | |
} | |
blockquote { | |
// block quotation | |
} | |
ol { | |
// ordered list | |
} | |
ul { | |
// unordered list | |
} | |
li { | |
// list item | |
} | |
dl { | |
// description list | |
} | |
dt { | |
// term or name | |
} | |
dd { | |
// description or value | |
} | |
figure { | |
// figure with optional caption | |
} | |
figcaption { | |
// figure caption | |
} | |
div { | |
// generic flow container | |
} | |
// Text-level semantics | |
a { | |
// hyperlink | |
} | |
em { | |
// emphatic stress | |
} | |
strong { | |
// strong importance | |
} | |
small { | |
// small print | |
} | |
s { | |
// struck text | |
} | |
cite { | |
// cited title of a work | |
} | |
q { | |
// quoted text | |
} | |
dfn { | |
// defining instance | |
} | |
abbr { | |
// abbreviation | |
} | |
time { | |
// date and/or time | |
} | |
code { | |
// code fragment | |
} | |
var { | |
// variable or placeholder text | |
} | |
samp { | |
// (sample) output | |
} | |
kbd { | |
// user input | |
} | |
sub { | |
// subscript | |
} | |
sup { | |
// superscript | |
} | |
i { | |
// offset text conventionally styled in italic | |
} | |
b { | |
// offset text conventionally styled in bold | |
} | |
u { | |
// offset text conventionally styled with an underline | |
} | |
mark { | |
// marked (highlighted) text | |
} | |
span { | |
// generic span | |
} | |
// Edits | |
ins { | |
// inserted text | |
} | |
del { | |
// deleted text | |
} | |
// Embedded content | |
img { | |
// image | |
} | |
iframe { | |
// nested browsing context (inline frame) | |
} | |
embed { | |
// integration point for plugins | |
} | |
object { | |
// generic external content | |
} | |
video { | |
// video | |
} | |
audio { | |
// audio stream | |
} | |
canvas { | |
// canvas for dynamic graphics | |
} | |
map { | |
// image-map definition | |
} | |
area { | |
// image-map hyperlink | |
} | |
// Tables | |
table { | |
// table | |
} | |
caption { | |
// table title | |
} | |
colgroup { | |
// table column group | |
} | |
col { | |
// table column | |
} | |
tbody { | |
// table row group | |
} | |
thead { | |
// table heading group | |
} | |
tfoot { | |
// table footer row group | |
} | |
tr { | |
// table row | |
} | |
td { | |
// table cell | |
} | |
th { | |
// table header cell | |
} | |
// Forms | |
form { | |
// user-submittable form | |
} | |
fieldset { | |
// set of related form controls | |
} | |
legend { | |
// title or explanatory caption | |
} | |
label { | |
// caption for a form control | |
} | |
input { | |
// input control | |
&[type=text] { | |
//text-input field | |
} | |
&[type=password] { | |
//password-input field | |
} | |
&[type=checkbox] { | |
//checkbox | |
} | |
&[type=radio] { | |
//radio button | |
} | |
&[type=button] { | |
//button | |
} | |
&[type=submit] { | |
//submit button | |
} | |
&[type=reset] { | |
//reset button | |
} | |
&[type=file] { | |
//file upload control | |
} | |
&[type=hidden] { | |
//hidden input control | |
} | |
&[type=image] { | |
//image-coordinates input control | |
} | |
&[type=datetime] { | |
//global date-and-time input control NEW | |
} | |
&[type=datetime-local] { | |
//local date-and-time input control NEW | |
} | |
&[type=date] { | |
//date input control NEW | |
} | |
&[type=month] { | |
//year-and-month input control NEW | |
} | |
&[type=time] { | |
//time input control NEW | |
} | |
&[type=week] { | |
//year-and-week input control NEW | |
} | |
&[type=number] { | |
//number input control NEW | |
} | |
&[type=range] { | |
//imprecise number-input control NEW | |
} | |
&[type=email] { | |
//e-mail address input control NEW | |
} | |
&[type=url] { | |
//URL input control NEW | |
} | |
&[type=search] { | |
//search field NEW | |
} | |
&[type=tel] { | |
//telephone-number-input field NEW | |
} | |
&[type=color] { | |
//color-well control NEW | |
} | |
} | |
button { | |
// button | |
} | |
select { | |
// option-selection form control | |
} | |
optgroup { | |
// group of options | |
} | |
option { | |
// option | |
} | |
textarea { | |
// text input area | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment