Skip to content

Instantly share code, notes, and snippets.

@DaveKin
Last active November 11, 2015 14:26
Show Gist options
  • Save DaveKin/23952d9e8314dc7a438c to your computer and use it in GitHub Desktop.
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
/* 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