Small Responsive CSS Framework – strawberry.css

Preview:

Description:

Yet another small CSS framework that helps developers and beginners to quickly create fully responsive, nested grid layouts using CSS flexbox model.

How to use it:

Include the minified version of the strawberry.css from a CDN.

<link rel="stylesheet" href="https://unpkg.com/strawberry-css/dist/strawberry.min.css">

The example HTML to create a nested grid system for your modern web app.

<div class="wrapper sb-flex-row sb-wrap sb-ai-center sb-jc-space-ad sb-items-20-nogs sb-n-flex-col sb-n-ai-center">
  <div class="item">
      <img src="pic.png" alt="pic">
      <span>1</span>
  </div>
  <div class="item">
      <img src="pic.png" alt="pic">
      <span>2</span>
  </div>
  <div class="item">
      <img src="pic.png" alt="pic">
      <span>3</span>
  </div>
  <div class="item">
      <img src="pic.png" alt="pic">
      <span>4</span>
  </div>
  <div class="item">
      <img src="pic.png" alt="pic">
      <span>5</span>
  </div>
  <div class="item">
      <img src="pic.png" alt="pic">
      <span>6</span>
  </div>
  <div class="item">
      <img src="pic.png" alt="pic">
      <span>7</span>
  </div>
  <div class="item">
      <img src="pic.png" alt="pic">
      <span>8</span>
  </div>
  <div class="item">
      <img src="pic.png" alt="pic">
      <span>9</span>
  </div>
  <div class="item">
      <img src="pic.png" alt="pic">
      <span>10</span>
  </div>
  <div class="item">
      <img src="pic.png" alt="pic">
      <span>11</span>
  </div>
  <div class="item">
      <img src="pic.png" alt="pic">
      <span>12</span>
  </div>
</div>

Available CSS classes.

• sb-flex-row: flex-direction: row;
• sb-flex-rev-row: flex-direction: row-reverse;
• sb-flex-col: flex-direction: column;
• sb-flex-rev-col: dflex-direction: column-reverse;
• sb-flex-inline: display: inline-flex;
• sb-wrap: flex-wrap: wrap;
• sb-rev-wrap: flex-wrap: wrap-reverse;
• sb-nowrap: flex-wrap: nowrap;
• sb-jc-flex-start: justify-content: flex-start;
• sb-jc-flex-end: justify-content: flex-end;
• sb-jc-center: justify-content: center;
• sb-jc-space-bn: justify-content: space-between;
• sb-jc-space-ad: justify-content: space-around;
• sb-jc-initial: justify-content: initial;
• sb-jc-inherit: justify-content: flex-inherit;
• sb-ai-stretch: align-items: stretch;
• sb-ai-center: align-items: center;
• sb-ai-flex-start: align-items: flex-start;
• sb-ai-flex-end: align-items: flex-end;
• sb-ai-baseline: align-items: baseline;
• sb-ai-initial: align-items: initial;
• sb-ai-inherit: align-items: inherit;
• sb-ac-stretch: align-content: stretch;
• sb-ac-center: align-content: center;
• sb-ac-flex-start: align-content: flex-start;
• sb-ac-flex-end: align-content: flex-end;
• sb-ac-space-bn: align-content: space-between;
• sb-ac-space-ad: align-content: space-around
• sb-ac-initial: align-content: initial;
• sb-ac-inherit: align-content: inherit;
• sb-items-100: flex: 1 1 100%;
• sb-items-90: flex: 1 1 90%
• sb-items-80: flex: 1 1 80%;
• sb-items-70: flex: 1 1 70%;
• sb-items-60: flex: 1 1 60%;
• sb-items-50: flex: 1 1 50%;
• sb-items-40: flex: 1 1 40%;
• sb-items-third: flex: 1 1 33.3333%;
• sb-items-30: flex: 1 1 30%;
• sb-items-quarter: flex: 1 1 25%;
• sb-items-20: flex: 1 1 20%;
• sb-items-sixth: flex: 1 1 16.6666%;
• sb-items-seventh: flex: 1 1 14.2857%;
• sb-items-eighth: flex: 1 1 12.50%;
• sb-items-ninth: flex: 1 1 11.1111%;
• sb-items-10: flex: 1 1 10%;
• sb-items-100-nog: flex: 0 1 100%;
• sb-items-90-nog: flex: 0 1 90%
• sb-items-80-nog: flex: 0 1 80%;
• sb-items-70-nog: flex: 0 1 70%;
• sb-items-60-nog: flex: 0 1 60%;
• sb-items-50-nog: flex: 0 1 50%;
• sb-items-40-nog: flex: 0 1 40%;
• sb-items-third-nog: flex: 0 1 33.3333%;
• sb-items-30-nog: flex: 0 1 30%;
• sb-items-quarter-nog: flex: 0 1 25%;
• sb-items-20-nog: flex: 0 1 20%;
• sb-items-sixth-nog: flex: 0 1 16.6666%;
• sb-items-seventh-nog: flex: 0 1 14.2857%;
• sb-items-eighth-nog: flex: 0 1 12.50%;
• sb-items-ninth-nog: flex: 0 1 11.1111%;
• sb-items-10-nog: flex: 0 1 10%;
• sb-items-100-nos: flex: 1 0 100%;
• sb-items-90-nos: flex: 1 0 90%
• sb-items-80-nos: flex: 1 0 80%;
• sb-items-70-nos: flex: 1 0 70%;
• sb-items-60-nos: flex: 1 0 60%;
• sb-items-50-nos: flex: 1 0 50%;
• sb-items-40-nos: flex: 1 0 40%;
• sb-items-third-nos: flex: 1 0 33.3333%;
• sb-items-30-nos: flex: 1 0 30%;
• sb-items-quarter-nos: flex: 1 0 25%;
• sb-items-20-nos: flex: 1 0 20%;
• sb-items-sixth-nos: flex: 1 0 16.6666%;
• sb-items-seventh-nos: flex: 1 0 14.2857%;
• sb-items-eighth-nos: flex: 1 0 12.50%;
• sb-items-ninth-nos: flex: 1 0 11.1111%;
• sb-items-10-nos: flex: 1 0 10%;
• sb-items-100-nogs: flex: 0 0 100%;
• sb-items-90-nogs: flex: 0 0 90%
• sb-items-80-nogs: flex: 0 0 80%;
• sb-items-70-nogs: flex: 0 0 70%;
• sb-items-60-nogs: flex: 0 0 60%;
• sb-items-50-nogs: flex: 0 0 50%;
• sb-items-40-nogs: flex: 0 0 40%;
• sb-items-third-nogs: flex: 0 0 33.3333%;
• sb-items-30-nogs: flex: 0 0 30%;
• sb-items-quarter-nogs: flex: 0 0 25%;
• sb-items-20-nogs: flex: 0 0 20%;
• sb-items-sixth-nogs: flex: 0 0 16.6666%;
• sb-items-seventh-nogs: flex: 0 0 14.2857%;
• sb-items-eighth-nogs: flex: 0 0 12.50%;
• sb-items-ninth-nogs: flex: 0 0 11.1111%;
• sb-items-10-nogs: flex: 0 0 10%;

Available modifiers:

• -l: 1000 <= width;
• -m: 600 <= width <= 999;
• -s: width <= 599;

<div class="sb-flex-rev-row sb-wrap-s sb-wrap-m sb-nowrap-l">
</div>