Skip to content

Instantly share code, notes, and snippets.

@geoffreyhale
Created October 23, 2015 01:51
Show Gist options
  • Save geoffreyhale/97d3ef3d3d12dc0ca7d0 to your computer and use it in GitHub Desktop.
Save geoffreyhale/97d3ef3d3d12dc0ca7d0 to your computer and use it in GitHub Desktop.
/**
* @source brandon-rhodes/Concentric-CSS
*/
/* This ordering of CSS elements is for the traditional setting
"box-sizing: content-box", which applies the "width:" and "height:"
only to the innermost content of the box. If you are using one of
the other box model settings - Paul Irish recommends "box-model:
border-box", for example - then simply move the "width:" and
"height:" up above the "border:" property in the list below. */
#Concentric-CSS-Overview {
display: ; /* Directions about where and how the box is placed */
position: ;
float: ;
clear: ;
visibility: ; /* Next: can the box be seen? */
opacity: ;
z-index: ;
margin: ; /* Layers of the box model, from outside to inside */
outline: ;
border: ;
background: ; /* (padding and content BOTH get the background color) */
padding: ;
width: ; /* Content dimensions and scrollbars */
height: ;
overflow: ;
color: ; /* Textual content */
text: ;
font: ;
}
#Concentric-CSS-Complete {
/* All CSS properties, in roughly the order I use when being careful */
display: ;
position: ;
top: ;
right: ;
bottom: ;
left: ;
float: ;
clear: ;
visibility: ;
opacity: ;
z-index: ;
margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
outline: ;
border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;
border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;
border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ;
border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;
background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;
cursor: ;
padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;
overflow: ;
list-style: ;
caption-side: ;
table-layout: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;
vertical-align: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
line-height: ;
word-spacing: ;
letter-spacing: ;
white-space: ;
color: ;
font: ;
font-family: ;
font-size: ;
font-weight: ;
content: ;
quotes: ;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment