index.html

---
layout: landing
title: CSS Architecture and Performance Engineering
masthead-title: Web Performance Optimisation, Consultancy, and Engineering
page-class: page--home
meta: "Articles on CSS, OOCSS, front-end architecture, scalability and performance."
lux: Home
---

<!--
  - Jump straight back out of wrapper mode on the home page.
  -->

</div><!-- /wrapper -->


{% include promo-home.html %}

{% include client-list.html %}

{% include carousel.html %}

<div class="wrapper">

<div class="layout  layout--large">
  <div class="layout__item  lap-and-up-one-half  desk-two-thirds" data-ui-component="Main content">

    <section class="post" id="section:articles">

      <h3 class="heading">Articles</h3>

      <p>There are <b>{{ site.posts | size  }}</b> articles on this blog.
      Find them all on the <a href="/archive/">archive page</a>.</p>

      {% if paginator.page != 1 %}
      {% include pagination.html %}
      {% endif %}

      <ul class="list-ui  post__list  mb">
        {% for post in paginator.posts %}
        <li class="list-ui__item">
          <time class="post__date" datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date: "%-d %B, %Y" }}</time>
          <h3 class="post__title"><a href="{{ post.url }}">{{ post.title }}</a></h3>
        </li>
        {% endfor %}
      </ul>

      {% include pagination.html %}

    </section>

  </div

  ><div class="layout__item  lap-and-up-one-half  desk-one-third" data-ui-component="Sub content">

    <div class="[ box  box--highlight ]  mb">
      {% include sub-content.html %}
    </div>

  </div>

</div>