Category Archives: HTML5-CSS

Shorthand CSS Rule Reference

Im having trouble understanding and memorizing short-hand rule so I thought I made myself a quick reference.

background: (color) (image: use url()) (repeat: repeat-x,y,no-repeat) (attachment: scroll,fixed,local,initial,inherit) (position(x,y): in pixels or left top right bottom combination of 2s, or center)

border: (width) (style) (color | initial | inherit)

border-radius: (top-left-radius) (top-right-radius) (bottom-right-radius) (bottom-left-radius)

columns: (width | auto) (column count | initial | inherit)

flex: (grow: 0 - N) (shrink: 0 do not shrink) (basis: this is the width, auto | initial | inherit | value px %)

flex-flow: (direction: row,row-reverse,column,column-reverse,initial,inherit) (wrap: wrap, nowrap, wrap-reverse, initial, inherit)

font: (font-style) (font-variant font-weight) (font-size/line-height) (font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit)

@font-face: (font-name) (url)
Note: use any font-name and reference them to your css eg. .my-container{ font-family: font-name }
position: No shorthand for position use SASS mixin.

transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay)

Sass – Bourbon – library useful mixins

Bourbon is gem library used for css to help developers and designers style their html.

To install the gem make sure ruby and gem is installed. Afterwards type:
@gem install bourbon

Then go to your sass/scss folder and bring up command line for it. and type: @bourbon install
it should create a folder with all your bourbon functionality and in your scss put `import ‘bourbon/bourbon’` at the beginning and you can code away with the help of mixin/functions for accelerated developing.

Bourbon: Useful Mixins
– background: tint(red, 40%); –> Mix with white
– background: shade(blue, 60%); –> mix with black
– .element {
@include position(relative, top right bottom left);
}
– size(20px); outputs width: 20px; height: 20px;

Check these beginners tutorial for using bourbon + neat:
http://blog.teamtreehouse.com/introduction-neat-semantic-sass-grid

and

https://webdesign.tutsplus.com/articles/6-essential-bourbon-neat-mixins–cms-24894

and

If you want to accelerate your SASS development even further:
https://www.sitepoint.com/5-ways-improve-sass-bourbon/

Credit to the authors.

Shims and Polyfills Note

<!–[if lt IE 9]>
<script src=”js/html5shim.js”></script>
<![endif]–>

This is a shim or a way to make html5 work for older browsers. Its more of a work around for browsers who does not support new html5 tags like <article> <section> <header> <footer> <aside> etc.

There are also shims out there that can be used like <canvas> shim, <svg> shim etc.

A polyfill is also a work around or a plugin for features not currently supported by the browsers or technology at hand. For example css3 transform property , or a javascript version not yet updated.