Beautiful but not responsive :(

[0x8801]

Looks really beautiful & well made. Is there any plan to make petal responsive out of the box?

[zvuc]

When I made the row/column part of Petal, I did consider adding a system where you could add screen width breakpoints as variables so you could make them responsive just like some other CSS frameworks do. Reason why I decided not to put in after all was that from my real life usage experience the media queries those column classes shipped with often interfered with my own media queries I had coded for the site stylesheet. I found it difficult to manage properly.

For a specific example, Bootstrap has a system where columns stretch in one line or stack up in various screen widths depending on the class name prefixes. While it can work for you if you understand how it works and utilize correctly, I wanted to make something more simpler to understand. So Petal's layout system is straightforward where rows will always divide up to 2,3,4 columns relative to your parent container width, regardless of your screen size.

If you want to quickly make your site responsive using Petal columns, there is an easy way. Given that you're using Petal by importing to your own site LESS file, you can do this:

.container {
  .row;

  .content {
    @media screen and (max-width: 499px) {
      .col-1;
    }
    @media screen and (min-width: 500px) {
      .col-3.colspan-2;
    }
  }
  .sidebar {
    @media screen and (max-width: 499px) {
      .col-1;
    }
    @media screen and (min-width: 500px) {
      .col-3;
    }
  }
}

If you want your screen breakpoints to be consistent throughout, you can replace the min/max-width values with a global variable.

So to answer your question, currently there is no plan to implement a responsive system that can be used out of the box. I may consider adding an additional optional module that makes it easier to do above if I get more requests. :)

[0x8801]

Thanks for the eloquent breakdown. Looking forward to using petal!

ᐧ

Eric Githinji [image: https://]about.me/ericgithinji https://about.me/ericgithinji?promo=email_sig&utm_source=email_sig&utm_medium=external_link&utm_campaign=chrome_ext

On 19 December 2016 at 05:39, Hansol Kim notifications@github.com wrote:

When I made the row/column part of Petal, I did consider adding a system where you could add screen width breakpoints as variables so you could make them responsive just like some other CSS frameworks do. Reason why I decided not to put in after all was that from my real life usage experience the media queries those column classes shipped with often interfered with my own media queries I had coded for the site stylesheet. I found it difficult to manage properly.

For a specific example, Bootstrap has a system where columns stretch in one line or stack up in various screen widths depending on the class name prefixes. While it can work for you if you understand how it works and utilize correctly, I wanted to make something more simpler to understand. So Petal's layout system is straightforward where rows will always divide up to 2,3,4 columns relative to your parent container width, regardless of your screen size.

If you want to quickly make your site responsive using Petal columns, there is an easy way. Given that you're using Petal by importing to your own site LESS file, you can do this:

.container { .row;

.content { @media screen and (max-width: 499px) { .col-1; } @media screen and (min-width: 500px) { .col-3.colspan-2; } } .sidebar { @media screen and (max-width: 499px) { .col-1; } @media screen and (min-width: 500px) { .col-3; } } }

If you want your screen breakpoints to be consistent throughout, you can replace the min/max-width values with a global variable.

So to answer your question, currently there is no plan to implement a responsive system that can be used out of the box. I may consider adding an additional optional module that makes it easier to do above if I get more requests. :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/shakrmedia/petal/issues/1#issuecomment-267869561, or mute the thread https://github.com/notifications/unsubscribe-auth/AGlkIJnEucK0BLN-nMUpPxWsttRVVtq9ks5rJe5lgaJpZM4LPj81 .