0
Welcome Guest! Login
0 items Join Now

Responsive Moddable Grid System?

  • Responsive Moddable Grid System?

    Posted 7 years 11 months ago
    • Hi all,

      I wonder if Gantry 5 has anything like bootstraps moddable grid system? Like .col-xs-6 .col-sm-3 .col-md-4 etc.
      So I can decide each modules width on each media formats.

      So far I just saw max width layout panel on gantry 5 (helium). And it automatically makes width=100% at min width. But nothing between them.

      I think I couldn't find it out. Or is that beatiful layout page just for max width really?
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: Responsive Moddable Grid System?

    Posted 7 years 11 months ago
    • Please see Gantry 5 documentation http://docs.gantry.org/gantry5/advanced/responsive-content .

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
  • Re: Responsive Moddable Grid System?

    Posted 7 years 11 months ago
    • Thanks, I already looked at there. But I couldn't believe it :). I almost read whole the documantation 3 times. I'm trying to understand the dynamics of gantry 5 for hours.

      And so the answer is no. Gantry 5 has no moddable grid functionality like bootstrap has. So we can only control module sizes at max media widths. That's all. In mobile view, these blocks will stack on top of each other while in tablet or desktop view, these blocks will scale responsively.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: Responsive Moddable Grid System?

    Posted 7 years 11 months ago
    • That article tells you how responsive grids are done. So it gives you a sound basis on which to write your own classes and CSS using the Gantry 5 media queries too. Generally the grid percentages are obeyed until the mobile breakpoint and then they all take 100%. That said, we do have other particles where we have written additional CSS to step things down a little at a time (but that's part of the template and Helium is too basic to have that).
      // Gantry 5 custom CSS file
      
      // import breakpoints
      @import "dependencies";
      
      // Typical values are the default breakpoints set in Gantry 5
      // but these values are user definable in style settings
      // so that is why the code below uses mixins to get the actual 
      // values from Gantry 5 template.
      
      // commonly used media queries
      
      //  typically min 75rem 
      @include breakpoint(large-desktop-range) {
      
      }
      // typically range 60rem to 74.938rem 
      @include breakpoint(desktop-range) {
      
      }
      
      // typically 48rem to 59.938rem
      @include breakpoint(tablet-range) {
      
      }
      // typically 30rem to 47.938rem
      @include breakpoint(large-mobile-range) {
      
      }
      // typically max 30rem
      @include breakpoint(small-mobile-range) {
      
      }
      
      // Less commonly used media queries
      
      // typically min 60rem
      @include breakpoint(desktop-only) {
      
      }
      // typically min 48rem
      @include breakpoint(no-mobile) {
      
      }
      // typically max 47.938 rem
      @include breakpoint(mobile-only) {
      
      }
      // typically max 59.938rem
      @include breakpoint(no-desktop) {
      
      }
      
      // Mobile Menu Breakpoint
      @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { 
      
      }
      
      @import "nucleus/mixins/breakpoints";


      I would also add that you can use bootstrap if you wish.


      Regards, Mark.
    • The following users have thanked you: Ramazan Doğan Eray

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.

Time to create page: 0.080 seconds