{"id":504,"date":"2015-02-26T10:52:46","date_gmt":"2015-02-26T10:52:46","guid":{"rendered":"http:\/\/petlovers.wp.themeforest.createit.pl\/bird\/?page_id=504"},"modified":"2015-02-27T12:16:48","modified_gmt":"2015-02-27T12:16:48","slug":"for-developers","status":"publish","type":"page","link":"https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/","title":{"rendered":"For developers"},"content":{"rendered":"[vc_row][vc_column width=&#8221;1\/1&#8243;] <div  class=\"ct-sectionHeader text-center inherit ct-fw-600\"  >\r\n            <h2 class=\" text-center       \"> Class Naming<\/h2>\r\n            <h1 class=\"      \"><\/h1>\r\n            <\/div>\r\n\r\n            [\/vc_column][\/vc_row][vc_row type=&#8221;default&#8221; shadow=&#8221;no&#8221; overlay=&#8221;no&#8221; height=&#8221;200&#8243; parallax_ratio=&#8221;0.1&#8243; video_type=&#8221;mp4&#8243; scroll=&#8221;section&#8221; ct_u_color=&#8221;inherit&#8221; ct_u_padding=&#8221;ct-u-paddingBottom40&#8243;][vc_column width=&#8221;1\/1&#8243;][vc_column_text]\n<p>Syntax: <code>ct&lt;componentName&gt;[--modifierName|-descendantName]<\/code><\/p>\n<p>Component driven development offers several benefits when reading and writing HTML and CSS:<\/p>\n<ul>\n<li>It helps to distinguish between the classes for the root of the component, descendant elements, and modifications.<\/li>\n<li>It keeps the specificity of selectors low.<\/li>\n<li>It helps to decouple presentation semantics from document semantics.<\/li>\n<\/ul>\n<p>You can think of components as custom elements that enclose specific semantics, styling, and behaviour.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8221;default&#8221; shadow=&#8221;no&#8221; overlay=&#8221;no&#8221; height=&#8221;200&#8243; parallax_ratio=&#8221;0.1&#8243; video_type=&#8221;mp4&#8243; scroll=&#8221;section&#8221; ct_u_color=&#8221;inherit&#8221; ct_u_bg_color=&#8221;ct-u-backgroundGray2&#8243; ct_u_padding=&#8221;ct-u-paddingBoth80&#8243; ct_u_border=&#8221;ct-u-borderBoth&#8221;][vc_column width=&#8221;4\/12&#8243;]\r\n            <h3 class=\"       ct-fw-600   \"> component<\/h3>\r\n            <p class=\"ct-u-marginBoth0 no      \"  ><small class=\"ct-fw-700 text-uppercase\"><code>ct-[componentName]<\/code><\/small><\/p>[\/vc_column][vc_column width=&#8221;8\/12&#8243;]<p class=\"ct-u-marginBoth0 no      \"  >The component&#8217;s name is written in camel case.<\/p>\n<p><code>.ct-myComponent { \/* \u2026 *\/ }<\/code><\/p>\n<p><code>&lt;article class=\"ct-myComponent\"&gt; \u2026 &lt;\/article&gt;<\/code><br \/>\n<\/p>[\/vc_column][\/vc_row][vc_row type=&#8221;default&#8221; shadow=&#8221;no&#8221; overlay=&#8221;no&#8221; height=&#8221;200&#8243; parallax_ratio=&#8221;0.1&#8243; video_type=&#8221;mp4&#8243; scroll=&#8221;section&#8221; ct_u_color=&#8221;inherit&#8221; ct_u_bg_color=&#8221;ct-u-backgroundWhite&#8221; ct_u_padding=&#8221;ct-u-paddingBoth80&#8243; ct_u_border=&#8221;ct-u-borderBoth&#8221;][vc_column width=&#8221;4\/12&#8243;]\r\n            <h3 class=\"       ct-fw-600   \"> descendant<\/h3>\r\n            <p class=\"ct-u-marginBoth0 no      \"  ><small class=\"ct-fw-700 text-uppercase\"><code>ct-[componentName]-[descendantName]<\/code><\/small><\/p>[\/vc_column][vc_column width=&#8221;8\/12&#8243;]<p class=\"ct-u-marginBoth0 no      \"  >A component descendant is a class that is attached to a descendant node of a component. It&#8217;s responsible for applying presentation directly to the descendant on behalf of a particular component. Descendant names are written in camel case.<br \/>\n<code><br \/>\n&lt;article class=\"ct-tweet\"&gt;<br \/>\n&lt;header class=\"ct-tweet-header\"&gt;<br \/>\n&lt;img class=\"ct-tweet-avatar\" src=\"{$src}\" alt=\"{$alt}\"&gt; \u2026<br \/>\n&lt;\/header&gt;<br \/>\n&lt;div class=\"ct-tweet-body\"&gt; \u2026 &lt;\/div&gt;<br \/>\n&lt;\/article&gt;<br \/>\n<\/code><\/p>[\/vc_column][\/vc_row][vc_row type=&#8221;default&#8221; shadow=&#8221;no&#8221; overlay=&#8221;no&#8221; height=&#8221;200&#8243; parallax_ratio=&#8221;0.1&#8243; video_type=&#8221;mp4&#8243; scroll=&#8221;section&#8221; ct_u_color=&#8221;inherit&#8221; ct_u_bg_color=&#8221;ct-u-backgroundGray2&#8243; ct_u_padding=&#8221;ct-u-paddingBoth80&#8243; ct_u_border=&#8221;ct-u-borderBoth&#8221;][vc_column width=&#8221;4\/12&#8243;]\r\n            <h3 class=\"       ct-fw-600   \"> modifier<\/h3>\r\n            <p class=\"ct-u-marginBoth0 no      \"  ><small class=\"ct-fw-700 text-uppercase\"><code>ct-[componentName]--[modifierName]<\/code><\/small><\/p>[\/vc_column][vc_column width=&#8221;8\/12&#8243;]<p class=\"ct-u-marginBoth0 no      \"  >A component modifier is a class that modifies the presentation of the base component in some form. Modifier names are written in camel case and are separated from the component name by two hyphens. The class is included in the HTML in addition to the base component class.<br \/>\n<code>.ct-personBox{ \/* \u2026 *\/ }<br \/>\n\/* Default style *\/<br \/>\n.ct-personBox--default { \/* \u2026 *\/ }<br \/>\n.ct-personBox--secundary{ \/* \u2026 *\/ }<br \/>\n&lt;div class=\"ct-personBox ct-personBox--primary\"&gt;\u2026 &lt;\/div&gt;<br \/>\n<\/code><\/p>[\/vc_column][\/vc_row][vc_row type=&#8221;default&#8221; shadow=&#8221;no&#8221; overlay=&#8221;no&#8221; height=&#8221;200&#8243; parallax_ratio=&#8221;0.1&#8243; video_type=&#8221;mp4&#8243; scroll=&#8221;section&#8221; ct_u_color=&#8221;inherit&#8221; ct_u_bg_color=&#8221;ct-u-backgroundWhite&#8221; ct_u_padding=&#8221;ct-u-paddingBoth80&#8243; ct_u_border=&#8221;ct-u-borderBoth&#8221;][vc_column width=&#8221;4\/12&#8243;]\r\n            <h3 class=\"       ct-fw-600   \"> Javascript<\/h3>\r\n            <p class=\"ct-u-marginBoth0 no      \"  ><small class=\"ct-fw-700 text-uppercase\"><code>ct-js-[targetName]<\/code><\/small><\/p>[\/vc_column][vc_column width=&#8221;8\/12&#8243;]<p class=\"ct-u-marginBoth0 no      \"  >JavaScript-specific classes reduce the risk that changing the structure or theme of components will inadvertently affect any required JavaScript behavior and complex functionality. It is not necessary to use them in every case.<br \/>\n<code><br \/>\n&lt;a href=\"\/login\" class=\"btn btn-primary ct-js-login\"&gt;&lt;\/a&gt;<br \/>\n<\/code><br \/>\n<strong>JavaScript-specific classes are not, under any circumstances, styled.<\/strong><\/p>[\/vc_column][\/vc_row][vc_row type=&#8221;default&#8221; shadow=&#8221;no&#8221; overlay=&#8221;no&#8221; height=&#8221;200&#8243; parallax_ratio=&#8221;0.1&#8243; video_type=&#8221;mp4&#8243; scroll=&#8221;section&#8221; ct_u_color=&#8221;inherit&#8221; ct_u_bg_color=&#8221;ct-u-backgroundGray2&#8243; ct_u_padding=&#8221;ct-u-paddingBoth80&#8243; ct_u_border=&#8221;ct-u-borderBoth&#8221;][vc_column width=&#8221;4\/12&#8243;]\r\n            <h3 class=\"       ct-fw-600   \"> Utilities<\/h3>\r\n            <p class=\"ct-u-marginBoth0 no      \"  ><small class=\"ct-fw-700 text-uppercase\"><code>ct-u-[targetName]<\/code><\/small><\/p>[\/vc_column][vc_column width=&#8221;8\/12&#8243;]<p class=\"ct-u-marginBoth0 no      \"  >Utility classes are low-level structural and positional traits. Utilities are applied directly to any element; multiple utilities are used together; and utilities are used alongside component classes.<\/p>\n<p>Utilities exist because certain CSS properties and patterns are used frequently. For example: floats, containing floats, vertical alignment, text truncation. Utilities help to reduce repetition and provide consistent implementations.<\/p>\n<p>Utilities use a camel case name, prefixed with a <code>u<\/code> namespace. What follows is an example of how various utilities can be used to create a simple structure within a component.<\/p>\n<p><code><br \/>\n&lt;div class=\"ct-u-uppercase\"&gt;<\/code><br \/>\n&lt;p class=&#8221;ct-u-textTruncate&#8221;&gt;{$text}&lt;\/p&gt;<br \/>\n&lt;img class=&#8221;ct-u-block&#8221; src=&#8221;{$src}&#8221; alt=&#8221;&#8221;&gt;<br \/>\n&lt;img class=&#8221;ct-u-block&#8221; src=&#8221;{$src}&#8221; alt=&#8221;&#8221;&gt;<br \/>\n&lt;img class=&#8221;ct-u-block&#8221; src=&#8221;{$src}&#8221; alt=&#8221;&#8221;&gt;<br \/>\n&lt;\/div&gt;<\/p>[\/vc_column][\/vc_row][vc_row type=&#8221;default&#8221; shadow=&#8221;no&#8221; overlay=&#8221;no&#8221; height=&#8221;200&#8243; parallax_ratio=&#8221;0.1&#8243; video_type=&#8221;mp4&#8243; scroll=&#8221;section&#8221; ct_u_color=&#8221;inherit&#8221; ct_u_bg_color=&#8221;ct-u-backgroundWhite&#8221; ct_u_padding=&#8221;ct-u-paddingBoth80&#8243; ct_u_border=&#8221;ct-u-borderBoth&#8221;][vc_column width=&#8221;4\/12&#8243;]\r\n            <h3 class=\"       ct-fw-600   \"> Polyfills<\/h3>\r\n            <p class=\"ct-u-marginBoth0 no      \"  ><small class=\"ct-fw-700 text-uppercase\"><code>ct-m-[propertyName]<\/code><\/small><\/p>[\/vc_column][vc_column width=&#8221;8\/12&#8243;]<p class=\"ct-u-marginBoth0 no      \"  >Mixins generate polyfills for browser prefixed properties. We provide a <code>mixins.css<\/code> file with the most common browser specific properties.<\/p>\n<p>An example of a border radius mixin:<br \/>\n<code><br \/>\n.ct-m-borderRadius(@radius) {<br \/>\n-webkit-border-radius: @radius;<br \/>\n-moz-border-radius: @radius;<br \/>\nborder-radius: @radius;<br \/>\n}<br \/>\n<\/code><\/p>[\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column width=&#8221;1\/1&#8243;][\/vc_column][\/vc_row][vc_row type=&#8221;default&#8221; shadow=&#8221;no&#8221; overlay=&#8221;no&#8221; height=&#8221;200&#8243; parallax_ratio=&#8221;0.1&#8243; video_type=&#8221;mp4&#8243; scroll=&#8221;section&#8221; ct_u_color=&#8221;inherit&#8221; ct_u_padding=&#8221;ct-u-paddingBottom40&#8243;][vc_column width=&#8221;1\/1&#8243;][vc_column_text] Syntax: ct&lt;componentName&gt;[&#8211;modifierName|-descendantName] Component driven development offers several benefits when reading and writing HTML and CSS: It helps to distinguish between the classes for the root of the component, descendant elements, and modifications. It keeps the specificity of selectors low. It helps to decouple presentation semantics from document semantics. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-504","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pet Shop Lovers - WooCommerce Theme for Pet Shops<\/title>\n<meta name=\"description\" content=\"Pet Shop Lovers is Woo\/eCommerce Theme dedicated for pet shop owners, pet lovers and pets in general. It includes several variant for cats, dogs, reptiles, birds and fish.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pet Shop Lovers - WooCommerce Theme for Pet Shops\" \/>\n<meta property=\"og:description\" content=\"Pet Shop Lovers is Woo\/eCommerce Theme dedicated for pet shop owners, pet lovers and pets in general. It includes several variant for cats, dogs, reptiles, birds and fish.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/\" \/>\n<meta property=\"og:site_name\" content=\"Bird Lovers - Woo\/eCommerce WP Theme\" \/>\n<meta property=\"article:modified_time\" content=\"2015-02-27T12:16:48+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/\",\"url\":\"https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/\",\"name\":\"Pet Shop Lovers - WooCommerce Theme for Pet Shops\",\"isPartOf\":{\"@id\":\"https:\/\/petlovers.themeplayers.net\/bird\/#website\"},\"datePublished\":\"2015-02-26T10:52:46+00:00\",\"dateModified\":\"2015-02-27T12:16:48+00:00\",\"description\":\"Pet Shop Lovers is Woo\/eCommerce Theme dedicated for pet shop owners, pet lovers and pets in general. It includes several variant for cats, dogs, reptiles, birds and fish.\",\"breadcrumb\":{\"@id\":\"https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/petlovers.themeplayers.net\/bird\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"For developers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/petlovers.themeplayers.net\/bird\/#website\",\"url\":\"https:\/\/petlovers.themeplayers.net\/bird\/\",\"name\":\"Bird Lovers - Woo\/eCommerce WP Theme\",\"description\":\"pet shop theme, woocommerce, pets\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/petlovers.themeplayers.net\/bird\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pet Shop Lovers - WooCommerce Theme for Pet Shops","description":"Pet Shop Lovers is Woo\/eCommerce Theme dedicated for pet shop owners, pet lovers and pets in general. It includes several variant for cats, dogs, reptiles, birds and fish.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/","og_locale":"en_US","og_type":"article","og_title":"Pet Shop Lovers - WooCommerce Theme for Pet Shops","og_description":"Pet Shop Lovers is Woo\/eCommerce Theme dedicated for pet shop owners, pet lovers and pets in general. It includes several variant for cats, dogs, reptiles, birds and fish.","og_url":"https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/","og_site_name":"Bird Lovers - Woo\/eCommerce WP Theme","article_modified_time":"2015-02-27T12:16:48+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/","url":"https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/","name":"Pet Shop Lovers - WooCommerce Theme for Pet Shops","isPartOf":{"@id":"https:\/\/petlovers.themeplayers.net\/bird\/#website"},"datePublished":"2015-02-26T10:52:46+00:00","dateModified":"2015-02-27T12:16:48+00:00","description":"Pet Shop Lovers is Woo\/eCommerce Theme dedicated for pet shop owners, pet lovers and pets in general. It includes several variant for cats, dogs, reptiles, birds and fish.","breadcrumb":{"@id":"https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/petlovers.themeplayers.net\/bird\/for-developers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/petlovers.themeplayers.net\/bird\/"},{"@type":"ListItem","position":2,"name":"For developers"}]},{"@type":"WebSite","@id":"https:\/\/petlovers.themeplayers.net\/bird\/#website","url":"https:\/\/petlovers.themeplayers.net\/bird\/","name":"Bird Lovers - Woo\/eCommerce WP Theme","description":"pet shop theme, woocommerce, pets","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/petlovers.themeplayers.net\/bird\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/petlovers.themeplayers.net\/bird\/wp-json\/wp\/v2\/pages\/504"}],"collection":[{"href":"https:\/\/petlovers.themeplayers.net\/bird\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/petlovers.themeplayers.net\/bird\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/petlovers.themeplayers.net\/bird\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/petlovers.themeplayers.net\/bird\/wp-json\/wp\/v2\/comments?post=504"}],"version-history":[{"count":21,"href":"https:\/\/petlovers.themeplayers.net\/bird\/wp-json\/wp\/v2\/pages\/504\/revisions"}],"predecessor-version":[{"id":573,"href":"https:\/\/petlovers.themeplayers.net\/bird\/wp-json\/wp\/v2\/pages\/504\/revisions\/573"}],"wp:attachment":[{"href":"https:\/\/petlovers.themeplayers.net\/bird\/wp-json\/wp\/v2\/media?parent=504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}