Semantic Remapping Nested Extend Example (LESS)

index.html

<div class="content-wrapper"> 
  <section class="news-items" role="main">
    <article id="news-item-436" class="news-item"> 
      <header> 
        <h1>News Item Title</h1> 
        <h2>By line</h2> 
      </header> 
      <div class="article-body"> 
        <p>Bacon ipsum dolor amet kevin short ribs ribeye chuck beef ribs cow. Chicken venison frankfurter tongue, leberkas corned beef ham hock landjaeger. Tongue meatball turducken, pork belly turkey swine flank landjaeger porchetta picanha brisket short loin rump ham strip steak. Boudin tail chuck drumstick, ham hock sirloin andouille. Ham doner tongue bresaola t-bone meatball ham hock sirloin salami.</p>

        <p>Pork loin porchetta pig, short loin beef ribs capicola turducken ground round kielbasa. Beef doner picanha, t-bone pork belly jowl hamburger. Drumstick sausage beef ribs, tenderloin ham hock corned beef bacon spare ribs turkey shankle t-bone landjaeger. Hamburger corned beef turkey ham hock pig filet mignon. Jowl shank kielbasa, t-bone short ribs biltong pastrami pork tongue.</p> 
      </div> 
    </article> 
    <article id="news-item-436" class="news-item"> 
      <header> 
        <h1>News Item Title</h1> 
        <h2>By line</h2> 
      </header> 
      <div class="article-body"> 
        <p>Bacon ipsum dolor amet kevin short ribs ribeye chuck beef ribs cow. Chicken venison frankfurter tongue, leberkas corned beef ham hock landjaeger. Tongue meatball turducken, pork belly turkey swine flank landjaeger porchetta picanha brisket short loin rump ham strip steak. Boudin tail chuck drumstick, ham hock sirloin andouille. Ham doner tongue bresaola t-bone meatball ham hock sirloin salami.</p>

        <p>Pork loin porchetta pig, short loin beef ribs capicola turducken ground round kielbasa. Beef doner picanha, t-bone pork belly jowl hamburger. Drumstick sausage beef ribs, tenderloin ham hock corned beef bacon spare ribs turkey shankle t-bone landjaeger. Hamburger corned beef turkey ham hock pig filet mignon. Jowl shank kielbasa, t-bone short ribs biltong pastrami pork tongue.</p> 
      </div> 
    </article>
  </section> 
  <aside role="complementary"> 
    <section class="articles-by-author">
      <span class="widget-wrapper">
        <h3>Articles By: Author Name</h3> 
        <ul> 
          <li>[...]</li> 
          <li>[...]</li> 
          <li>[...]</li> 
        </ul> 
      </span>
    </section>
    <section class="related-articles">
      <span class="widget-wrapper">
        <h3>Related Articles</h3>
        <ul> 
          <li>[...]</li> 
          <li>[...]</li> 
          <li>[...]</li> 
        </ul> 
      </span>
    </section>
    <section class="related-articles">
      <span class="widget-wrapper">
        <h3>Latest Articles</h3>
        <ul> 
          <li>[...]</li> 
          <li>[...]</li> 
          <li>[...]</li> 
        </ul> 
      </span>
    </section>
    <section class="related-articles">
      <span class="widget-wrapper">
        <h3>Most Popular</h3>
        <ul> 
          <li>[...]</li> 
          <li>[...]</li> 
          <li>[...]</li> 
        </ul> 
      </span>
    </section>
  </aside>
</div>

Semantic Remapping Nested Extend Example (LESS).markdown

Semantic Remapping Nested Extend Example (LESS)

This is an example of how you can use LESS to create deeply nested extendable objects. Here I've basically created a page layout for an article view. It extends from Yahoo's Pure framework, specifically it's grid.

Because we import Pure with the (reference) option we are able to extend out only the items we need making the use of a framework much easier on bandwidth and override specificity.

With the object defined (.layout-article-full) I can have my markup use a simple semantic class on it's parent, which extends the object. Nice and easy.

Minified, the CSS output is 4.32k --which is incidentally about the size of Pure's core library without the responsive grids we are using. Minified and gzipped it's 822 bytes.

Does this sound weird? Hungry to know more? Checkout my article introducing the concept: https://medium.com/@dehuszar/semantic-remapping-with-css-pre-processors-906ba1a9910c

Expect to see this in a future article.

A Pen by dehuszar on CodePen.

License.

Semantic Remapping Nested Extend Example.markdown

Semantic Remapping Nested Extend Example

This is an example of how you can use LESS to create deeply nested extendable objects. Here I've basically created a page layout for an article view. With the object defined (.layout-article-full) I can have my markup use a simple semantic class on it's parent, which extends the object. Nice and easy.

Does this sound weird? Hungry to know more? Checkout my article introducing the concept: https://medium.com/@dehuszar/semantic-remapping-with-css-pre-processors-906ba1a9910c

A Pen by dehuszar on CodePen.

License.

style.css

@import (reference) "https://s3-us-west-2.amazonaws.com/s.cdpn.io/18728/pure.less";
@import (reference) "https://s3-us-west-2.amazonaws.com/s.cdpn.io/18728/grids-responsive.less";
@import (reference) "https://s3-us-west-2.amazonaws.com/s.cdpn.io/18728/layout-article-full.less";

/* Extend our component styles */

* {
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    margin: 0;
}

body {
    background: rgba(211, 211, 211, 0.25);
    padding: 2vh;
}

h1,
h2,
h3 {
    margin: 0 0 0.25em 0;
}

h1 {
    font-size: 2em;
}

// all of our page layout comes from an external component definition
.content-wrapper:extend(.layout-article-full all) {}