Adding Gantry 4 Utilities Classes to a Gantry 5 template
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
This all started as I was writing my guide for Module Instances, I needed a "medpaddingbottom" but no such animal in Gantry 5 - yet
So I decided to use the "Typography" module class suffixes contained in a Gantry 4 "utilities.less" file.
However Gantry 5 doesn't have it's LESS compiler functioning yet. So I took the "utilities.less" file and converted it to "utilities.scss". I've attached the file in a ZIP attached to this post.
This image is hidden for guests.
Please log in or register to see it.
After unzipping "utilities.scss" place it in the [JOOMLA-ROOT]\templates\rt_callisto\custom\scss folder.
If you don't have that path then you'll have to create a ..\custom\scss folder.
If you don't have a "custom.scss" file, then create one. In that file type this line:
@import 'utilities';
and then SAVE the file.
This is the result:
This image is hidden for guests.
Please log in or register to see it.
The classes used are:
1) g-uppercase
2) g-floatright
3) g-boldfont
Here is the FULL list:
g-noborder
g-floatleft
g-floatright
g-uppercase
g-lowercase
g-displayinline
normalfont
boldfont
noitalic
nobold
flush
nomargintop
nomarginbottom
nomarginleft
nomarginright
nopaddingtop
nopaddingbottom
nopaddingleft
nopaddingright
smallmarginbottom
smallmargintop
smallmarginleft
smallmarginright
smallmarginall
medmarginbottom
medmargintop
medmarginleft
medmarginright
medmarginall
largemarginbottom
largemargintop
largemarginleft
largemarginright
largemarginall
smallpaddingbottom
smallpaddingtop
smallpaddingleft
smallpaddingright
smallpaddingall
medpaddingbottom
medpaddingtop
medpaddingleft
medpaddingright
medpaddingall
largepaddingbottom
largepaddingtop
largepaddingleft
largepaddingright
largepaddingall
subsmallmarginbottom
subsmallmargintop
subsmallmarginleft
subsmallmarginright
subsmallmarginall
submedmarginbottom
submedmargintop
submedmarginleft
submedmarginright
submedmarginall
sublargemarginbottom
sublargemargintop
sublargemarginleft
sublargemarginright
sublargemarginall
nomarginall
nopaddingall
nomargintop
nomarginbottom
nomarginleft
nomarginright
nopaddingtop
nopaddingbottom
nopaddingleft
nopaddingright
Here is the current list of Callisto Variation module class suffixes:
Box Variations:
box1: Box 1
box2: Box 2
box3: Box 3
box4: Box 4
box-grey : Box Grey
box-pink : Box Pink
box-red : Box Red
box-purple : Box Purple
box-orange : Box Orange
box-blue : Box Blue
Effects:
shadow: Shadow 1
shadow2: Shadow 2
rounded: Rounded
square: Square
Utility:
g-outer-box: Outer Box
disabled: Disabled
align-right: Align Right
align-left: Align Left
center: Center
nomarginall: No Margin
nopaddingall: No Padding -
The following users have thanked you: emedia, Daniel 6848, Neil Robertson, SouthGateAZ
-
-
-
- Empowermom
- Hero Rocketeer
- Posts: 476
- Thanks: 32
-
Hiya Dan!
Old thread I know, but I'm wondering if we could get RT to include a simililar list for each template release as they are mixing, matching, adding, deleting particles and options along the way.
I.M.H.O., it isn't realistic to expect us (especially newbies) to poke around in files to discover said list.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Empowermom wrote:
Hiya Dan!
Old thread I know, but I'm wondering if we could get RT to include a simililar list for each template release as they are mixing, matching, adding, deleting particles and options along the way.
I.M.H.O., it isn't realistic to expect us (especially newbies) to poke around in files to discover said list.
This is a small crew so even when we had Gantry 4 we never documented the less common used class names. For me, it's a built-in habit and I don't even think about it - new template comes out and I'm checking out the _variations.scss and demo.scss files
-
-
-
- Empowermom
- Hero Rocketeer
- Posts: 476
- Thanks: 32
-
To me, web design is a never ending puzzle with constantly changing pieces. I delve under the hood of every release as soon as I get my hands on it.
Gantry 5 was a big bite to swallow, but I'm finally getting used to it. The files you mentioned are the most important to check because you discover things as yet undocumented. Kind of like a successful Easter egg hunt.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Empowermom wrote:
To me, web design is a never ending puzzle with constantly changing pieces. I delve under the hood of every release as soon as I get my hands on it.
Gantry 5 was a big bite to swallow, but I'm finally getting used to it. The files you mentioned are the most important to check because you discover things as yet undocumented. Kind of like a successful Easter egg hunt.
Always look for the _variations.scss and demo.css files and you will find all kinds of Easter egg goddies. -
The following users have thanked you: Vicky Thomas, C4, joanne
-
Time to create page: 0.061 seconds