background
border-radius
button
.thumb
background-image
<img/>
background-size
background-position
For layout. There are two ways a .block can be styled: as a block, for a vertical layout, or as inline-block, for a horizontal layout. block by default, obviously.
.block
block
inline-block
Any .block child of a .grid-block becomes an inline-block. Grid layout can be designed by adding .grid-n/d classes to those children.
.grid-block
.grid-n/d
Applied to a media tag like img, svg, video and canvas, .block will scale the element to fill the available width.
, for example. Also, make blocks behave as centered wraps by default. */ margin: 0 auto; padding: 0; } .block > img, .block > svg, .block > video, .block > canvas, .block > object, .block > embed, .block > iframe { /* Don't allow media to break out of .block bounds. */ max-width: 100%; } hr.block { height: 1px; } /* .inline-block Styleguide: 1.1.inline-block */ .inline-block { display: inline-block; } /* .stack-block A block with no height and visible overflow intended as a stacking origin for children to be overlayed over the following content. Styleguide: 1.1.stack-block */ .stack-block { position: relative; height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; } /* .tab-block A block animated to behave as a tab that fades to reveal content when the class active is added. Styleguide: 4.tab-block */ .js .tab-block { display: inline-block; position: relative; width: 100%; vertical-align: top; /* Give all tabs the same origin despite being consecutive inline-blocks. Requires spaceless HTML. */ margin-right: -100% !important; visibility: hidden; opacity: 0; z-index: 1; -webkit-transition-property: opacity, visibility; transition-property: opacity, visibility; -webkit-transition-duration: 120ms; transition-duration: 120ms; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; /* A nice bit of hardware acceleration should help the transitions run smoothly. */ -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .js .tab-block.active { visibility: visible; opacity: 1; z-index: 2; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .js .tab-block.active { z-index: 2; } /* .toggle-block A block animated to behave like a drawer that reveals content when the class active is added. Note in this example the class toggle is an action class that gives the block active when a link that references it is clicked. Markup: Click to show
active
toggle
Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum.
An absolutely positioned block that fills it's position parent.
Typically, used behind a .dialog to cover the page. layers are absolutely positioned, so they are not in the flow. By default a layer is scrollable, in case the content put inside it is too big for it.
Crunchum ipsum
Crunchum ipsum dolor sit coder void
Crunchum ipsum dolor sit coder void, constructor function, sed do while loop
Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident.
Crunchum ipsum dolor sit coder void, constructor function, sed do while loop.
on
requested
::after
overflow: auto;
Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus. Standards code est pulchra on chromium et foxus sed souvent suckum in internet explorum.