0
Welcome Guest! Login
0 items Join Now

Adding Gantry 4 Utilities Classes to a Gantry 5 template

    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3218
    • Custom work done

    Adding Gantry 4 Utilities Classes to a Gantry 5 template

    Posted 2 years 8 months ago
    • 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

  • Re: Adding Gantry 4 Utilities Classes to a Gantry 5 template

    Posted 1 year 11 months ago
    • 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's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3218
    • Custom work done

    Re: Adding Gantry 4 Utilities Classes to a Gantry 5 template

    Posted 1 year 11 months ago
    • 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 ;)
  • Re: Adding Gantry 4 Utilities Classes to a Gantry 5 template

    Posted 1 year 11 months ago
    • 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's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3218
    • Custom work done

    Re: Adding Gantry 4 Utilities Classes to a Gantry 5 template

    Posted 1 year 11 months ago
    • 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: C4, joanne

Time to create page: 0.080 seconds