RocketTheme - TOPIC: [Solved] The best way to create row of boxes or images with Gantry 5? (2/2)

Welcome Guest! Login

0 items Join Now

- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
Re: SOLVED The best way to create row of boxes or images with Gantry 5?

Posted 8 years 10 months ago
- Thanks MrT to patiently respond to my dumbness !
  
  1— I don’t have to add anything to the .ccss file
  You say that I’m correct.... Great I like that...
  
  2— If I add the class -> .size-50 to anyting (div, images...) they will take 50% of the available Space.
  You say that you need to put the code in the correct structure to make it work
  
  • Is the following code correct and the minimal needed for a 3 spaces inline ?
  
  <div class="g-grid"> <div class="g-block size-33-3"> <div class="g-content"> <h3 class="g-title">Box 1</h3> <p>Whatever you want here (Text, Images…)</p> </div> </div> <div class="g-block size-33-3"> <div class="g-content"> <h3 class="g-title">Box 2</h3> <p>Whatever you want here (Text, Images…)</p> </div> <div class="g-block size-33-3"> <div class="g-content"> <h3 class="g-title">Box 3</h3> <p>Whatever you want here (Text, Images…)</p> </div> </div>
  
  3- If I add -> .size-49-5, they will take 49.5% of the available Space. No need to add anything ?
  
  You say —> no. 49.5% is not a valid size you can have any value between 1 and 100 as a whole number plus the additional special value decimal percent values (e.g. 33.3% size-33-3).
  
  • size-49-5 will not work ?
- Last Edit: 8 years 10 months ago by Patrick Toulze. Reason: clearer
- Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
  www.grafcomm.ca
#1299827
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED The best way to create row of boxes or images with Gantry 5?

Posted 8 years 10 months ago
- 1. good
  
  2. NO.
  
  <div class="g-grid"> <div class="g-block size-33-3"> <div class="g-content"> <h3 class="g-title">Box 1</h3> <p>Whatever you want here (Text, Images…)</p> </div> </div> <div class="g-block size-33-3"> <div class="g-content"> <h3 class="g-title">Box 2</h3> <p>Whatever you want here (Text, Images…)</p> </div> </div> <div class="g-block size-33-3"> <div class="g-content"> <h3 class="g-title">Box 3</h3> <p>Whatever you want here (Text, Images…)</p> </div> </div> </div>
  
  I.e. you had two missing closing DIVs
  
  3. size-49-5 will not work because that class has not been defined anywhere. Also, I can't see any practical application of that size either?
  
  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.
#1299833
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
Re: SOLVED The best way to create row of boxes or images with Gantry 5?

Posted 8 years 10 months ago
- Yep, I saw my missing divs mistake -
  
  size-49-5 will not work because that class has not been defined anywhere.
  
  We are coming back to the whole point of the conversation, if I understand well, I will have to override to —> MyTemplate > custom > engine > scss > nucleus > _sizes.scss or modify it to include whatever new sizes I need...
  
  Is this will work —> I add ('49-5', 1/2) to _sizes.scss ?
  
  // Run Size Creation Function @include size-x; // Equal size fallbacks for older browsers @each $i, $n in ('33-3', 1/3), ('49-5', 1/2), ('16-7', 1/6), ('14-3', 1/7), ('12-5', 1/8), ('11-1', 1/9), ('9-1', 1/11), ('8-3', 1/12) { .size-#{$i} { @include flex(0 percentage($n)); width: percentage($n); } } // Support for non flex browsers .size-100 { width: 100%; @include flex(0 100%); }
  
  Curiously some of the size go over 100%, is this Ok?
  
  ('16-7', 1/6) = 16.7 x 6 = 100.2
  ('14-3', 1/7) = 14.3 x 7 = 100.1
  ('9-1', 1/11) - 9.1 x 11 = 100.1
- Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
  www.grafcomm.ca
#1299857
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED The best way to create row of boxes or images with Gantry 5?

Posted 8 years 10 months ago
- Patrick - as I said, I can think of no practical application for a width of 49.5% - 49.789064, 49.6%, 49.4% are not defined either but we're not about to add those either - it's just adding loads of bloat to Gantry 5 to add those and there's no practical application for those sizes at all. But if you really want to use those then you would add them in your custom.scss file and not in _sizes.scss because that is a core Gantry 5 file that you should never ever change (as it would be overwritten again by Gantry 5 updates).
  
  Again, no in your examples.
  
  The class is called "size-16-7" (to keep it succinct) but the value is 100 divided by 6 = 16.666666 in the CSS width.
  The class is called "size-14-3" (to keep it succinct) but the value is 100 divided by 7 = 14.285714 in the CSS width.
  The class is called "size-9-1" (to keep it succinct) but the value is 100 divided by 11 = 9.090909 in the CSS width.
  
  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.
#1299865

Patrick Toulze
Elite Rocketeer
Posts: 1810
Thanks: 18
Marketing - Web Designer

Re: SOLVED The best way to create row of boxes or images with Gantry 5?

Posted 8 years 10 months ago

Thanks MrT, I solved my problem;

1— I create an Override (more a modification) —> from media > gantry > engines > scss > nucleus > _sizes.scss to —> MyTemplate > custom > engine > scss > nucleus > _sizes.scss

I add my own easy classes to make a range of grid elements I can need

// Run Size Creation Function
@include size-x;

// Equal size fallbacks for older browsers
@each $i, $n in ('2items', 1/2), ('3items', 1/3), ('4items', 1/4), ('5items', 1/5), ('6items', 1/6), ('7items', 1/7), ('8items', 1/8), ('9items', 1/9), ('10items', 1/10), ('11items', 1/11), ('12items', 1/12) {
    .size-#{$i} {
        @include flex(0 percentage($n));
        width: percentage($n);
    }
}

// Support for non flex browsers
.size-100 {
    width: 100%;
    @include flex(0 100%);
}

2— I add to my custom > scss > custom.scss this

///* ----------- SIZE --------------*/
.size-2items { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 50%; -moz-flex: 0 50%; -ms-flex: 0 50%; flex: 0 50%; width: 50%; }
.size-3items { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 33.3332%; -moz-flex: 0 33.3332%; -ms-flex: 0 33.3332%; flex: 0 33.3332%; width: 33.3332%; }
.size-4items { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 25%; -moz-flex: 0 25%; -ms-flex: 0 25%; flex: 0 25%; width: 25%; }
.size-5items { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 20%; -moz-flex: 0 20%; -ms-flex: 0 20%; flex: 0 20%; width: 20%; }
.size-6items { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 16.6665%; -moz-flex: 0 16.6665%; -ms-flex: 0 16.6665%; flex: 0 16.6665%; width: 16.6665%; }
.size-7items { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 14.2856%; -moz-flex: 0 14.2856%; -ms-flex: 0 14.2856%; flex: 0 14.2856%; width: 14.2856%; }
.size-8items { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 12.5%; -moz-flex: 0 12.5%; -ms-flex: 0 12.5%; flex: 0 12.5%; width: 12.5%; }
.size-9items { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 11.1110%; -moz-flex: 0 11.1110%; -ms-flex: 0 11.1110%; flex: 0 11.1110%; width: 11.1110%; }
.size-10items { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 10%; -moz-flex: 0 10%; -ms-flex: 0 10%; flex: 0 10%; width: 10%; }
.size-11items { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 9.0908%; -moz-flex: 0 9.0908%; -ms-flex: 0 9.0908%; flex: 0 9.0908%; width: 9.0908%; }
.size-12items { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 8.3332%; -moz-flex: 0 8.3332%; -ms-flex: 0 8.3332%; flex: 0 8.3332%; width: 8.3332%; }

I take the example from from media > gantry > engines > css-compiled > nucleus.css

Now when I want a 3 elements grid, I add the class -> size-3items
2 elements grid, I add the class -> size-2items

And what I really like the rest of gantry grid css take care of the padding and all.

Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca

#1300403

Time to create page: 0.070 seconds