Semantic Remapping Layout Example (LESS)

index.html

<nav>
  <a href="#">Your Logo</a>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Blag</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<div class="content-wrapper">
  <div class="banner">
    <h1>I can haz website?</h1>
  </div>
  <div class="featured-items">
    <div class="item-wrapper">
      <div class="item">
        <header>
          <img src="http://placekitten.com/g/500/300" alt="In yo little kitten face" />
          <h2>Personal</h2>

          <span class="price">
            $5 <span>per month</span>
          </span>
        </header>

        <ul class="pricing-table-list">
          <li>Free setup</li>
          <li>Custom sub-domain</li>
          <li>Standard customer support</li>
          <li>1GB file storage</li>
          <li>1 database</li>
          <li>Unlimited bandwidth</li>
        </ul>

        <button>Choose</button>
      </div>
    </div>

    <div class="item-wrapper">
      <div class="item">
        <header>
          <img src="http://www.placecage.com/g/500/300" />
          <h2>Small Business</h2>

          <span class="price">
            $25 <span>per month</span>
          </span>
        </header>

        <ul class="pricing-table-list">
          <li>Free setup</li>
          <li>Use your own domain</li>
          <li>Standard customer support</li>
          <li>10GB file storage</li>
          <li>5 databases</li>
          <li>Unlimited bandwidth</li>
        </ul>

        <button>Choose</button>
      </div>
    </div>

    <div class="item-wrapper">
      <div class="item">
        <header>
          <img src="http://fillmurray.com/g/500/300">
          <h2>Enterprise</h2>

          <span class="price">
            $45 <span>per month</span>
          </span>
        </header>

        <ul class="pricing-table-list">
          <li>Free setup</li>
          <li>Use your own domain</li>
          <li>Premium customer support</li>
          <li>Unlimited file storage</li>
          <li>25 databases</li>
          <li>Unlimited bandwidth</li>
        </ul>

        <button>Choose</button>
      </div>
    </div>
  </div>
  <div class="feature-descriptions">
    <div class="description-wrapper">
      <div class="description">
        <h3>Get started today</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
        </p>
      </div>
    </div>

    <div class="description-wrapper">
      <div class="description">
        <h3>Pay monthly or annually</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
        </p>
      </div>
    </div>

    <div class="description-wrapper">
      <div class="description">
        <h3>24/7 customer support</h3>
        <p>
          Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </div>

    <div class="description-wrapper">
      <div class="description">
        <h3>Cancel your plan anytime</h3>
        <p>
          Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>
</div>
<footer>
  <p>&copy; 2015 - Your Mama's Pajamas, Inc.</p>
</footer>

Semantic Remapping Layout Example (LESS).markdown

Semantic Remapping Layout Example (LESS)

Here is a quick site layout concept that uses Semantic Remapping to keep the markup super clean. The layout is based off of a template available from Pure's website: http://purecss.io/layouts/pricing/

This example is used and explained in greater detail in my article: 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";

html {
    font-family: sans-serif;
    font-size: 100%;
}

body {
    margin: 0;
}

button:extend(.pure-button all, 
  .pure-button-primary all) {}

body > nav:extend(.pure-menu all,
  .pure-menu-horizontal all)  {
  
    > a:extend(.pure-menu-horizontal .pure-menu-heading all, .pure-menu-heading all, .pure-menu-link all) {

        margin-top: 0;
    }

    > ul:extend(.pure-menu-horizontal .pure-menu-list all) {
        margin: 1em 0;
		padding: 0;
      
        li:extend(.pure-menu-horizontal .pure-menu-item all) {}
      
        a:extend(.pure-menu-link all) {}
        
        .active a:extend(.pure-menu-active > .pure-menu-link all) {}
    }
}

.banner {
    background:url(http://placekitten.com/g/1600/1200) top center no-repeat fixed;
    display:block;
    height:400px;
}

.banner h1 {
    font-size: 3em;
    margin: 0;
    padding: 3.6em 1em;
    text-shadow: 2px 1px 4px white;
}

// Featured items and descriptions list components
.featured-items:extend(.pure-g all) {
    max-width: 980px;
    margin: 0 auto;
  
    > div:extend(.pure-u-1 all, .pure-u-md-1-3 all) {}
    
    // Single featured item component
    .item {
        margin: 1em 0.5em;
        text-align: center;

        header {
            background: black;
            color: white;
            padding-bottom: 2em;
        }

        .price {
            font-size: 6em;
            font-weight: bold;

            span {
                display: block;
                font-size: 1rem;
            }
        }

        img {
            display: block;
            margin: 0 auto;
            max-width: 100%;
        }

        ul {
            list-style: none;
            padding: 0;

            li {
                padding: 1em 0;
            }

            li + li {
                border-top: 1px solid rgba(0,0,0,0.15);
            }
        }
    }
}

.feature-descriptions {
    &:extend(.pure-g all);

    max-width: 980px;
    margin: 0 auto;

    > div:extend(.pure-u-1 all, .pure-u-md-1-2 all) {}

    .description {
        line-height: 1.6;
        padding: 2em;
      
        h3 {
            text-transform: uppercase;
        }
    }
}

body > footer {
    background: black;
    color: white;
    padding: 1em;
    text-align: center;
}