SOLVED The best way to create row of boxes or images with Gantry 5?
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
- I was wondering what will be the best way to create rows of boxes, images, buttons (any numbers of items) and to kepp all that responsive and well align ?
- Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- 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-
I don't know what template you are using but have a look at the "block variations" article that is provided in most of the rocketlaunchers for Gantry 5 templates. That will give you an illustration of how to use the Gantry 5 classes to create blocks (it's basically the use of the size-xx classes).
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.
-
-
-
- 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-
I’m using Isotope
Thanks, whewn I look at the code, I can see a lot of possibility, but I don’t find all the details in the template Isotope documentation.
I can see some of the classes
g-container, g-grid, g-block, .size-33-3, g-content, g-title, class .center etc...
I’m looking at the css files that control that styling and they seem all over the place even in /media/gantry5/engines/nucleus/.
Lot of possibility but I cannot find a concise tutorial how to use them to build efficient grid or reuse them efficiently.
2 questions:
- Do I need a g-container and/or g-grid div ?
- .size-33-3, not sure what the -3 mean (3 columns?) - also not sure where it’s control (the file that control this type of class .size-33-3), how it react on mobile?
I see the file _gridcontent.scss, but the classes are like .g-gridcontent-3col, you got also a _imagegrid.scss with .g-imagegrid-3cols ? - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- 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-
size-33-3 means width of 33.3% 33.3 x 3 = 100% so it means you will get 3 items per row.
size-25 means width of 25% 25% x 4 = 100% so you will get 4 items per row etc etc
You don't need g-container You do need g-grid (to say your using a grid layout) g-block (in conjuction with size-xx) top define how big that block is within the grid. g-content is the DIV that contains your content.
These classes use the flex box model in CSS. The "box" classes are just ways of styling the boxes.
Using those classes you will be able to construct responsive rows of content that collapse automatically to one column on mobile devices as the rest of Gantry 5 content does.
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.
-
-
-
- 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, do you know what css/scss file controling the “size-33-3” type of classes?
- Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- 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-
Why do you need to know that?
1. I told you what it does
2. You should never ever change that file since it is part of core Gantry 5.
nevertheless it's /media/gantry5/engines/nucleus/scss/nucleus/_sizes.scss
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.
-
-
-
- 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-
Thank, as I was thinking this file miss other needed possibilities
as example we cant here have a 2, 4 or 6 column
What a convoluted way to control the width of blocks
These ones don’t even make sense, I try to understand the logic
—> ('16-7', 1/6) (16% 1/6 but 7 columns, not 6 ?)
-> ('14-3', 1/7) (14% 1/7 sur 3 colums, not 7 ?)
Can I add them to an override MyTemplate > custom > engine > scss > nucleus > _sizes.scss
// Run Size Creation Function @include size-x; // Equal size fallbacks for older browsers @each $i, $n in ('33-3', 1/3), ('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%); } - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- 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-
Of course you can have 2 columns - that would be size-50 and that code adds that class in?
100% divided by 6 columns means each column would be 16.666% (16.7% rounded) class will be "size-16-7"
100% divided by 7 columns means each column would be 14.2857% wide (14.3% rounded) class will be "size-14-3"
You're not reading the code correctly 1/7 means one seventh, 1/6 means one sixth.
You don't need to add anything?
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.
-
-
-
- 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-
Ok I see. Sorry to ask for precision, I want to be sure I understand...
If I understand well what you said ?
1— I don’t have to add anything to the .ccss file
2— If I add the class -> .size-50 to anyting (div, images...) they will take 50% of the available Space.
3- If I add -> .size-49-5, they will take 49.5% of the available Space. No need to add anything ? - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- 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. no you don't
2. no. I said that the size-xx are used in conjunction with the g-block class which is defined as a flex box.
3. 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).
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.
-
Time to create page: 0.077 seconds