{"id":586,"date":"2015-05-05T12:29:23","date_gmt":"2015-05-05T15:59:23","guid":{"rendered":"http:\/\/wordpress.local\/collektion\/?page_id=586"},"modified":"2015-05-05T12:29:23","modified_gmt":"2015-05-05T15:59:23","slug":"helper-classes","status":"publish","type":"page","link":"https:\/\/themes.simonbouchard.com\/collektion\/documentation\/helper-classes\/","title":{"rendered":"Helper Classes"},"content":{"rendered":"<h2 class=\"hard-top\">Attributes<\/h2>\n<table class=\"table-stripped table-hovered\">\n<thead>\n<th width=\"15%\">Class name<\/th>\n<th width=\"40%\">Description<\/th>\n<th>CSS<\/th>\n<\/thead>\n<tbody>\n<tr>\n<td>white<\/td>\n<td>Define white text color<\/td>\n<td><code>.white { color: $white; }<\/code><\/td>\n<\/tr>\n<tr class=\"even\">\n<td>gray<\/td>\n<td>Define gray text color<\/td>\n<td><code>.gray { color: $gray; }<\/code><\/td>\n<\/tr>\n<tr>\n<td>black<\/td>\n<td>Define black text color<\/td>\n<td><code>.black { color: $black; }<\/code><\/td>\n<\/tr>\n<tr class=\"even\">\n<td>light-gray<\/td>\n<td>Define light gray text color<\/td>\n<td><code>.light-gray { color: $light-gray; }<\/code><\/td>\n<\/tr>\n<tr>\n<td>medium-gray<\/td>\n<td>Define medium gray text color<\/td>\n<td><code>.medium-gray { color: $medium-gray; }<\/code><\/td>\n<\/tr>\n<tr class=\"even\">\n<td>dark-gray<\/td>\n<td>Define dark gray text color<\/td>\n<td><code>.dark-gray { color: $dark-gray; }<\/code><\/td>\n<\/tr>\n<tr>\n<td>text-color<\/td>\n<td>Define the default text color<\/td>\n<td><code>.text-color { color: $text-color; }<\/code><\/td>\n<\/tr>\n<tr class=\"even\">\n<td>accent-color<\/td>\n<td>Define the accent text color<\/td>\n<td><code>.accent-color { color: $accent; }<\/code><\/td>\n<\/tr>\n<tr>\n<td>hard-top,<br \/>hard-start<\/td>\n<td>Remove the top margin &amp; padding of an element<\/td>\n<td><code>.hard-start, .hard-top {<br \/>\n  padding-top: 0 !important;<br \/>\n  margin-top: 0 !important;<br \/>\n}<\/code><\/td>\n<\/tr>\n<tr class=\"even\">\n<td>hard-bottom,<br \/>hard-end<\/td>\n<td>Remove the bottom margin &amp; padding of an element<\/td>\n<td><code>.hard-end, .hard-bottom {<br \/>\n  padding-bottom: 0 !important;<br \/>\n  margin-bottom: 0 !important;<br \/>\n}<\/code><\/td>\n<\/tr>\n<tr>\n<td>align-center<\/td>\n<td>Align an element to center<\/td>\n<td><code>.align-center { text-align: center; }<\/code><\/td>\n<\/tr>\n<tr>\n<td>align-left<\/td>\n<td>Align an element to left<\/td>\n<td><code>.align-left { text-align: left; }<\/code><\/td>\n<\/tr>\n<tr>\n<td>right-right<\/td>\n<td>Align an element to right<\/td>\n<td><code>.align-right { text-align: right; float: right; }<\/code><\/td>\n<\/tr>\n<tr>\n<td>font-italic<\/td>\n<td>Define the italic font style of a element<\/td>\n<td><code>.font-italic { font-style: italic; }<\/code><\/td>\n<\/tr>\n<tr>\n<td>font-small<\/td>\n<td>Set small font of a element<\/td>\n<td><code>.font-small { font-size: .725em }<\/code><\/td>\n<\/tr>\n<tr>\n<td>font-medium<\/td>\n<td>Set medium font of a element<\/td>\n<td><code>.font-medium { font-size: 1.2em }<\/code><\/td>\n<\/tr>\n<tr>\n<td>font-huge<\/td>\n<td>Set huge font of a element<\/td>\n<td><code>.font-huge {<br \/>\n    font-size: 4.5em;<br \/>\n    font-weight: 700;<br \/>\n    line-height: 1.1;<br \/>\n    margin-bottom: 0;<br \/>\n    @include breakpoint(xsmall) { font-size: 2em; }<br \/>\n    @include breakpoint(small) { font-size: 3.5em; }<br \/>\n    @include breakpoint(medium) { font-size: 4em; }<br \/>\n    @include breakpoint(large) { font-size: 4.5em; }<br \/>\n }<\/code><\/td>\n<\/tr>\n<tr>\n<td>more-space<\/td>\n<td>Give more top and bottom margin white space<\/td>\n<td><code>.more-space {<br \/>\n    margin-top: 5%;<br \/>\n    margin-bottom: 5%;<br \/>\n    @include breakpoint(xsmall) {<br \/>\n        margin-top: 10%;<br \/>\n        margin-bottom: 10%;<br \/>\n    }<br \/>\n}<\/code><\/td>\n<\/tr>\n<tr>\n<td>link<\/td>\n<td>Give your anchors a special treatment<\/td>\n<td><code><a href=\"#\" class=\"link\">Hello world.<\/a><\/code><\/td>\n<\/tr>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>Attributes Class name Description CSS white Define white text color .white { color: $white; } gray Define gray text color .gray { color: $gray; } black Define black text color .black { color: $black; } light-gray Define light gray text color .light-gray { color: $light-gray; } medium-gray Define medium gray text color .medium-gray { color:&#8230;  <a class=\"link\" href=\"https:\/\/themes.simonbouchard.com\/collektion\/documentation\/helper-classes\/\" title=\"Read Helper Classes\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":407,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/themes.simonbouchard.com\/collektion\/wp-json\/wp\/v2\/pages\/586"}],"collection":[{"href":"https:\/\/themes.simonbouchard.com\/collektion\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themes.simonbouchard.com\/collektion\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themes.simonbouchard.com\/collektion\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themes.simonbouchard.com\/collektion\/wp-json\/wp\/v2\/comments?post=586"}],"version-history":[{"count":1,"href":"https:\/\/themes.simonbouchard.com\/collektion\/wp-json\/wp\/v2\/pages\/586\/revisions"}],"predecessor-version":[{"id":821,"href":"https:\/\/themes.simonbouchard.com\/collektion\/wp-json\/wp\/v2\/pages\/586\/revisions\/821"}],"up":[{"embeddable":true,"href":"https:\/\/themes.simonbouchard.com\/collektion\/wp-json\/wp\/v2\/pages\/407"}],"wp:attachment":[{"href":"https:\/\/themes.simonbouchard.com\/collektion\/wp-json\/wp\/v2\/media?parent=586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}