Basic Responsive Layouts

[Elli]

Basic Responsive Layouts

Preview

A basic responsive Board List and Thread List, rebuilt with divs. Not compatible with some plugins. Uses the Flexbox Mixins.


Board List

<div class="boards">
   <div class="list" role="grid">
       <div class="list__head">
           <div class="list__head-col icon"></div>
           <div class="list__head-col main">
               <p>Board</p>
           </div>
           <div class="list__head-col threads">
               <p>Threads</p>
           </div>
           <div class="list__head-col posts">
               <p>Posts</p>
           </div>
           <div class="list__head-col last-post">
               <p>Last Post</p>
           </div>
       </div>
       <div class="list__body">
           <div class="list__item">
               <div class="list__item-col icon">
                   <i class="fas fa-folder"></i>
               </div>
               <div class="list__item-col main">
                   <p>Welcome</p>
                   <p>Biscuit sesame snaps topping chupa chups croissant cotton candy jelly beans. Pudding cotton candy danish. Cake biscuit macaroon.</p>
               </div>
               <div class="list__item-col threads">
                   <p>10</p>
               </div>
               <div class="list__item-col posts">
                   <p>12</p>
               </div>
               <div class="list__item-col last-post">
                   <p>
                       Introduction by admin<br>
                       2 hours ago
                   </p>
               </div>
           </div>
           <div class="list__item">
               <div class="list__item-col icon">
                   <i class="fas fa-folder"></i>
               </div>
               <div class="list__item-col main">
                   <p>Chat</p>
                   <p>Apple pie chocolate cake chocolate cake halvah marzipan jujubes. Cake jelly candy gingerbread chocolate bar. Fruitcake donut croissant bonbon pastry chocolate caramels.</p>
               </div>
               <div class="list__item-col threads">
                   <p>20</p>
               </div>
               <div class="list__item-col posts">
                   <p>112</p>
               </div>
               <div class="list__item-col last-post">
                   <p>
                       Video Games by dave<br>
                       1 hour ago
                   </p>
               </div>
           </div>
       </div>
   </div>
</div>

Thread List

<div class="threads">
   <div class="list" role="grid">
       <div class="list__head">
           <div class="list__head-col icon"></div>
           <div class="list__head-col checkbox"></div>
           <div class="list__head-col main">
               <p>Subject</p>
           </div>
           <div class="list__head-col created-by">
               <p>Created By</p>
           </div>
           <div class="list__head-col replies">
               <p>Replies</p>
           </div>
           <div class="list__head-col views">
               <p>Views</p>
           </div>
           <div class="list__head-col last-post">
               <p>Last Post</p>
           </div>
       </div>
       <div class="list__body">
           <div class="list__item">
               <div class="list__item-col icon">
                   <i class="fas fa-comments"></i>
               </div>
               <div class="list__item-col checkbox">
                   <input type="checkbox" />
               </div>
               <div class="list__item-col main">
                   <p>
                       Introduction
                       <span class="list__mobile-replies">
                           Last post by admin 3 hours ago
                       </span>
                   </p>
               </div>
               <div class="list__item-col created-by">
                   <p>admin</p>
               </div>
               <div class="list__item-col replies">
                   <p>2</p>
               </div>
               <div class="list__item-col views">
                   <p>199</p>
               </div>
               <div class="list__item-col last-post">
                   <p>
                       by admin<br>
                       3 hours ago
                   </p>
               </div>
           </div>
           <div class="list__item">
               <div class="list__item-col icon">
                   <i class="fas fa-comments"></i>
               </div>
               <div class="list__item-col checkbox">
                   <input type="checkbox" />
               </div>
               <div class="list__item-col main">
                   <p>
                       The Rules
                       <span class="list__mobile-replies">
                           Last post by admin 3 hours ago
                       </span>
                   </p>
               </div>
               <div class="list__item-col created-by">
                   <p>admin</p>
               </div>
               <div class="list__item-col replies">
                   <p>0</p>
               </div>
               <div class="list__item-col views">
                   <p>566</p>
               </div>
               <div class="list__item-col last-post">
                   <p>
                       by admin<br>
                       January 31, 1999
                   </p>
               </div>
           </div>
       </div>
   </div>
</div>

CSS

/* ======================================================
* Variables
* ====================================================== */

@screen_sm: 768px;
@screen_md: 992px;
@screen_lg: 1200px;

@screen_xs_max: @screen_sm - 1;
@screen_sm_max: @screen_md - 1;
@screen_md_max: @screen_lg - 1;


/* ======================================================
* Flexbox Grid
* ====================================================== */

.row {
   .flex-display();
   .flex-grow(1);
   .flex-shrink(0);
   .flex-basis(100%);
   .flex-direction(row);
   .flex-wrap(wrap);
}

.col {
   .flex-grow(0);
   .flex-shrink(0);
}

.col-1 {
   .col();
   .flex-basis(8.33333333%);
   max-width: 8.33333333%;
}
   
.col-2 {
   .col();
   .flex-basis(16.66666667%);
   max-width: 16.66666667%;
}

.col-3 {
   .col();
   .flex-basis(25%);
   max-width: 25%;
}

.col-4 {
   .col();
   .flex-basis(33.33333333%);
   max-width: 33.33333333%;
}

.col-5 {
   .col();
   .flex-basis(41.66666667%);
   max-width: 41.66666667%;
}

.col-6 {
   .col();
   .flex-basis(50%);
   max-width: 50%;
}

.col-7 {
   .col();
   .flex-basis(58.33333333%);
   max-width: 58.33333333%;
}

.col-8 {
   .col();
   .flex-basis(66.66666667%);
   max-width: 66.66666667%;
}

.col-9 {
   .col();
   .flex-basis(75%);
   max-width: 75%;
}

.col-10 {
   .col();
   .flex-basis(83.33333333%);
   max-width: 83.33333333%;
}

.col-11 {
   .col();
   .flex-basis(91.66666667%);
   max-width: 91.66666667%;
}

.col-12 {
   .col();
   .flex-basis(100%);
   max-width: 100%;
}

.col-auto {
   .flex-grow(1);
   .flex-shrink(1);
   .flex-basis(0);
   max-width: 100%;
}

.hidden { display: none; }


/* ======================================================
* Lists
* ====================================================== */

.list .list__head,
.list .list__item {
   .row();
}

.list .list__head {
   .hidden();
}

.list .list__head-col,
.list .list__item-col {
   .col-auto();
   .flex-display();
   .flex-direction(column);
   .flex-wrap(wrap);
   .align-items(flex-start);
   .justify-content(center);
   background-color: @container_background_color_1;
   border: 1px solid @container_outer_border_color;
   color: @container_text_color_1;
   padding: 10px;
}

.list .list__head-col + .list__head-col,
.list .list__item-col + .list__item-col {
   border-left-width: 0;
}

.list .list__head-col {
   border-bottom-width: 0;
   font-weight: bold;
}

.list .list__item + .list__item .list__item-col {
   border-top-width: 0;
}

.list .checkbox {
   .flex-basis(40px);
   .align-items(center);
   border-right-width: 0;
   max-width: 40px;
   padding: 0;
   text-align: center;
}

.list .icon {
   .flex-basis(40px);
   .align-items(center);
   max-width: 40px;
   padding: 0;
   text-align: center;
}

@media only screen and (min-width: @screen_sm) {
   .list .list__head {
       .flex-display();
   }

   .list .icon {
       .flex-basis(55px);
       max-width: 55px;
   }
}


/* ======================================================
* Board List
* ====================================================== */

.boards .list .threads,
.boards .list .posts,
.boards .list .last-post {
   .hidden();
}

@media only screen and (min-width: @screen_sm) {
   .boards .list .last-post {
       .col-4();
       .flex-display();
       .align-items(flex-end);
       text-align: right;
   }
}

@media only screen and (min-width: @screen_md) {
   .boards .list .threads,
   .boards .list .posts {
       .col-1();
       .flex-display();
       .align-items(center);
       text-align: center;
   }

   .boards .list .last-post {
       .col-3();
   }
}


/* ======================================================
* Thread List
* ====================================================== */

.threads .list .checkbox,
.threads .list .created-by,
.threads .list .replies,
.threads .list .views,
.threads .list .last-post {
   .hidden();
}

.threads .list .list__mobile-replies {
   display: block;
}

@media only screen and (min-width: @screen_sm) {
   .threads .list .created-by,
   .threads .list .last-post {
       .flex-display();
   }

   .threads .list .created-by {
       .col-3();
       .align-items(center);
       text-align: center;
   }

   .threads .list .last-post {
       .col-4();
       .align-items(flex-end);
       text-align: right;
   }

   .threads .list .list__mobile-replies {
       .hidden();
   }
}

@media only screen and (min-width: @screen_md) {
   .threads .list .checkbox {
       .flex-display();
   }

   .threads .list .main {
       padding-left: 0;
   }

   .threads .list .created-by {
       .col-2();
   }

   .threads .list .replies,
   .threads .list .views {
       .col-1();
       .flex-display();
       .align-items(center);
       text-align: center;
   }

   .threads .list .last-post {
       .col-3();
   }
}