Module : cssc-layouts.css

Layouts

Title

A lot of people in our industry haven't had very diverse experiences. So they don't have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem. The broader one's understanding of the human experience, the better design we will have.

Une image trop grande (900px)

900x100 Cat

A lot of people in our industry haven't had very diverse experiences. So they don't have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem. The broader one's understanding of the human experience, the better design we will have.

Une image trop grande, et qui ignore les marges (900px)

A lot of people in our industry haven't had very diverse experiences. So they don't have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem. The broader one's understanding of the human experience, the better design we will have.

  • A Widget

  • Another Widget

    • ipsum facto
    • sit dolor amet
  • Text Widget

    The world needs dreamers and the world needs doers. But above all, the world needs dreamers who do.

Module : cssc-grid.css

Grilles responsives

50% (élargi à 100%)
50% (élargi à 100%)
33% (élargi à 50%) (élargi à 100%)
33% (élargi à 50%) (élargi à 100%)
33% (élargi à 100%)
25% (élargi à 50%) (élargi à 100%)
25% (élargi à 50%) (élargi à 100%)
25% (élargi à 50%) (élargi à 100%)
25% (élargi à 50%) (élargi à 100%)
20% (élargi à 50%) (élargi à 100%)
20% (élargi à 50%) (élargi à 100%)
20% (élargi à 33%) (élargi à 100%)
20% (élargi à 33%) (élargi à 100%)
20% (élargi à 33%) (élargi à 100%)
50% (élargi à 100%)
25% (élargi à 50%) (élargi à 100%)
25% (élargi à 50%) (élargi à 100%)
66% (élargi à 100%)
33% (élargi à 50%) (élargi à 100%)

Afficher HTML (50%)

<div class="cssc-grid fluid-grid">
    <div class="col-50p">50%</div>
    <div class="col-50p">50%</div>
</div>

Afficher HTML (25%)

<div class="cssc-grid fluid-grid">
    <div class="col-25p">25%</div>
    <div class="col-25p">25%</div>
    <div class="col-25p">25%</div>
    <div class="col-25p">25%</div>
</div>
Module : cssc-layouts.css

Classes de visibilité

.visible-only-phone {}
.visible-only-tablet {}
.visible-only-full {}
.hidden-on-phone {}
.hidden-on-tablet {}
.hidden-on-full {}
Module : cssc-common.css

Nav toggle

Fork me on GitHub