Responsive grid for Onsen UI

Unfortunately Onsen UI does not have a responsive grid for placing blocks on screens of various sizes. What grids can you recommend for use with Onsen UI? I have experience with Bootstrap but this library is too big to use it in a project for a responsive grid only. I’ve explored some other grids, but unlike Bootstrap, they can not hide some blocks on small screens or change their order (just make a stack instead of a line). Does anyone have a positive experience with a responsive grid for Onsen UI?

Upvotes: 1

Answers (1)

David Taiaroa

Reputation: 25495

Skeleton is a well established very lightweight grid which might fit your needs.

Out of the box their grid system collapses to a single column on mobile, it has a limited number of helper classes and I found this source which lists plenty of push and pull mixins if you need more control over ordering of your columns. You could probably pick and choose just the one's you need. eg

/* Push & Pull */
    .container .push-by-one                   { left: 60px;  }

I started a codepen based on some code from the Skeleton site which you can play with: https://codepen.io/panchroma/pen/JNXoVP

Update

if I have 3 colums I can't create this screen layout: large screen: column1 5/12, column2 5/12, column3 2/12; medium screen: column1 7/12, column2 5/12, column3 hidden; small screen: column1 100%, column2 100% on the next line, column3 hidden. I'm right?

This is no problem with some media queries and a little custom CSS. If you check out my updated codepen you'll see that I'm hidding col 3 with display:none; and display:block; at different viewports.

To change the width of column 1 I inpspected the Skeleton CSS and have used its rule for 7/12 grid to overide the width for the 5/12 grid

HTML

Skeleton: Responsive CSS Boilerplate

</head>
<body>

  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->

    <div class="container">

  <!-- columns should be the immediate child of a .row -->
  <div class="row">
    <div class="five columns overide"><h5>Column 1</h5>5/12 large screen, 7/12 med screen, 100% small</div>
    <div class="five columns"><h5>Column 2</h5>5/12 large & medium screens, 100% small</div>
    <div class="two columns hidden-md"><h5>Column 3</h5>2/12 large screen, hidden medium and small screens</div>

  </div>
</div> <!-- end container-->



<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

CSS

/* Mobile first queries */
 .hidden-md{
   display:none;
 }

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


/* Custom helper class */

@media (min-width: 750px) {
  .hidden-md{
      display:block;
    }
}

/* Custom Grid Width */
@media (min-width: 550px) and (max-width: 749px) {
  .five.columns.overide{
     width: 56.6666666667%; 
  }

}

Another Update

My dream - to find lightweight CSS grid with Bootstrap functionality :)

For min file size it might be hard to match Skeleton + some hand-rolled CSS.

One other option I can think of though is create a regular Bootstrap site then run it through UnCSS.

I've done this a handful of times with Bootstrap based sites. I had mixed success on dynamic CMS sites, really good results on less complex static sites and got an 80-90% reduction in the CSS file size.

There are a number of ways to use UnCSS. I used this Github code with Grunt and Node. I see there's also an online resource.

Good luck in your hunt!

Upvotes: 1

Responsive grid for Onsen UI

Answers (1)

Related Questions