0
Welcome Guest! Login
0 items Join Now

SOLVED Responsive template building in Gantry 5 for a beginner

  • SOLVED Responsive template building in Gantry 5 for a beginner

    Posted 7 years 9 months ago
    • I’m a template beginner, using Joomla 3.51, Gantry 5, and customizing the Hydrogen template. They're all free.

      (I edited and updated this post.)

      Purpose of the Thread
      1. Help other beginners by pointing to solutions of beginner's problems that I encountered.
      2. Show my progress and request guidance on issues, such as “what’s next?”

      Know your website's purpose
      Knowing your website's purpose (business, social, organization, etc) will guide your decisions.

      Choose your platform
      Rockettheme.com documentation lists the major platforms, e.g. Joomla, Wordpress, etc. Research the pros and cons and choose a platform to fit you website's purpose. For example, is your main purpose to present text content or to run a store? Google search will show you a lot of websites reviewing and comparing the platforms. I chose Joomla for my purpose.

      Have a compelling reason to build your own template
      If at all possible, use an existing template that is free or purchase one. A commercial template that fits you needs is worth every penny compared to the many hours that it takes to build. Often, it takes me a couple of days to find a solution that a programmer would solve in a couple of minutes. Building my template turned out to be a long project.

      I had compelling reasons to build my own template:
      1. I wanted to use Gantry 5, since according to my research it is the most beginner friendly template system.
      2. I needed to retain the look of a well established website that had an obsolete template, which could not support Joomla upgrades.
      3. I could not find a suitable Gantry 5 template.
      4. A professional template designer offered to build my template in Gantry 4 with which he was familiar. He said I could do it in Gantry 5.
      5. I wanted to learn about templates, because I will need several templates in the future.

      Design your template layout first
      Look at other templates, sketch out your layout, and list the functional features that you need. For example, where will the images, menus, text, and other content be placed. Do you need a pop-up window, image gallery, ect?

      Read all the Rockettheme Documentation on Gantry 5
      Read all the Gantry 5 documentation. You will need it.

      Buy a Rockettheme Membership
      I bought a membership so I could get advice from Rockettheme experts. If you’re as much of a beginner as I am, their friendly, expert advice is very much worth the price of admission. (Disclaimer: I’m not associated with Rockettheme.)

      Backup your template after every work session
      Almost certainly, you will break your template, and it will fall apart while you're working on it. It helps to have a backup of the last functioning version. Duplicate your template after every work session. Add a date to the duplicate template's name. Also, copy your custom style sheet and date it to match the duplicate template.

      Next Steps

      Next Step #1
      Study up on responsive design. Responsive means that the template will still look good on smaller screen sizes, such as tablets and mobile phones. There are many sources of info. A good one is 3cSchools

      Next Step #2
      Sketch your template layout or mimic an exsiting template. Some authorities recommend that you design for the smallest screen size first, i.e. for mobil phones, and then scale up your layout to look good on larger sized screens. I tend to favor laying out the large desktop screen first and putting in all the features that you like. Then you can scale down your layout to smalller screen sizes, keeping the features that you deem the most important and necessary.

      Next Step #3
      Install Gantry 5 and the Hydrogen template. Now customize the Hydrogen tempate to become the template you want. If you start with the large desktop sized screen for this phase, the template does not have to be fully responsive yet, but you should be able to shrink the browser window by 10% or 20% and the template should shrink proportionately without breaking up.

      Next Step #4
      Make your template responsive.
      I have not done this part yet, so for this step I was guessing about the process. As I proceed, I plan to come back and edit this post. In the meantime, see MrT's guidance . Use "media queries" to detect the user's device and display the correct CSS and template look that is appropriate for that device. See 3cSchools.com and see Problem Solutions listed below.

      Problem Solutions
      Assuming that other beginners could run into the same problems that I did, I will list and link to solutions of some of the problems that I faced.

      How to switch between Gantry 5 themes
      What is the exact path for Gantry 5 Custom.scss file?
      How to get rid of vertical space in Gantry 5
      Need to remove word "logo" from Gantry 5 image particle background
      Need to remove padding from Main Section in Gantry 5
      Using a 3rd Party Menu Module in Gantry 5
      Can we vertically span rows in Gantry 5 Layout?
      How to create horizontal or vertical lines using Gantry 5 particles
      Can we fine tune Gantry 5 horizontal layout to 1/10th% ?
      How to repeat an image in a Gantry 5 particle?
      How to convert flash animation to HTML5 and put it in a Joomla Gantry 5 template or anywhere
      How to shrink text size as the browser window narrows

      End of Edit

      In another thread, MrT advised me not to give images a fixed height, because it would adversely affect responsiveness of the the template. After reading some Rockettheme documentation on building responsive templates, my first question is should I adjust image height by a) putting images in a flex box, b) using g-container, or c) another method? Thx.
    • Last Edit: 7 years 9 months ago by Pinto Buck.
    • The following users have thanked you: Vitaly

  • Re: SOLVED Responsive template building in Gantry 5 for a beginner

    Posted 7 years 9 months ago
    • I began removing height from my css for images and borders. They appear to resize appropriately when I narrow my browser window to emulate a smaller viewport like a tablet. So, apparently I do not need to use a flex container on those items.

      The items that do not seem to resize are 1) logo text in Custom HTML particle, and 2) HTML5 animation in another Custom HTML particle. So, I think my question/effort should focus on how to get the custom HTML to resize when I narrow my browser window.
    • Last Edit: 7 years 9 months ago by Pinto Buck.
    • The following users have thanked you: Vitaly

    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Responsive template building in Gantry 5 for a beginner

    Posted 7 years 9 months ago
    • Please note that by answering your own post you take yourself out of the MODS "unanswered posts" queue and therefore might have to wait longer for a response - it's better to edit your original post so this does not happen.

      For your customHTML module it's content is just text - therefore it will not resize it will wrap instead - so it's doing what it's supposed to do. If you want your text to change size as the viewport gets smaller then you have to write custom CSS to do that yourself using media queries.

      So this would change the font size....
      #g-header [class^="template-logo-text-auto-style"] {
          font-size: 1rem;
      }

      But you would use that in media queries so you can set a different size by viewport:
      // 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";

      Media queries work like this:

      if the viewport size is xxxxx then
      use this css
      endif


      To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .

      Remember to recompile CSS from base outline too.


      Regards, Mark.
    • The following users have thanked you: Vitaly

    • 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: SOLVED Responsive template building in Gantry 5 for a beginner

    Posted 7 years 9 months ago
    • Pintobuck edited this post and deferred the question pending further study of responsive design. But, if you have comments or suggestions about my long edit of the first post in this thread, I would love to hear it. I'm particularly interested in guidance for my Next Steps 4 & 5. Thx.
    • Last Edit: 7 years 9 months ago by Pinto Buck.
    • The following users have thanked you: Vitaly

    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Responsive template building in Gantry 5 for a beginner

    Posted 7 years 9 months ago
    • It's not the way I tackle a site at all. The template is responsive out-of-the-box so you just need to ensure that as you add your content that it works correctly in all viewports. So as I add new content I just resize my desktop browser window there and then to see if it cause any issues and correct any that I find before moving on to the next piece of content. So in my opinion "responsive design" is not something you do after building a whole site but rather an inherent part of the process of building your site in the first place.

      Regards, Mark.
    • The following users have thanked you: Vitaly, Pinto Buck

    • 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: SOLVED Responsive template building in Gantry 5 for a beginner

    Posted 7 years 9 months ago
    • Thank you for the guidance. What is the purpose of the break point check boxes in the Styles page and what effect do they have?
    • Last Edit: 7 years 9 months ago by Pinto Buck.
    • The following users have thanked you: Vitaly

    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Responsive template building in Gantry 5 for a beginner

    Posted 7 years 9 months ago
    • The check boxes are used to create an override of the values that would otherwise be inherited from the base outline. So you would make style changes normally on the base outline, but if you wanted a specific outline (assign to specific pages) to have different styles then you would check the box and make the changes therein.

      Regards, Mark.
    • The following users have thanked you: Vitaly

    • 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: SOLVED Responsive template building in Gantry 5 for a beginner

    Posted 7 years 9 months ago
    • MrT wrote:
      The check boxes are used to create an override of the values that would otherwise be inherited from the base outline. So you would make style changes normally on the base outline, but if you wanted a specific outline (assign to specific pages) to have different styles then you would check the box and make the changes therein.

      Regards, Mark.
      Thank you for the reply. Clarifying my question, I trying to find out what specifically happens when I mark a check box next to a break point on the Styles page. For example, are all those break points inactive until I mark its check box? Do they duplicate the code shown in your previous post here , or do the Styles page break points have a different purpose?
    • Last Edit: 7 years 9 months ago by Pinto Buck.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Responsive template building in Gantry 5 for a beginner

    Posted 7 years 9 months ago
    • No. Look in the base outline and you will see that all those breakpoints are active and you can change their values and notice that there is no checkbox at all in base outline. Now go to one of you other outlines and you will see the field contents for those values are gray - this means that they are being inherited from the values set in the base outlline - so they are still active. When you check the box you are saying "I don't want you to use the value from the base outline I want to specify a different value for this specific outline only".

      Regards, Mark.
    • The following users have thanked you: Pinto Buck

    • 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: SOLVED Responsive template building in Gantry 5 for a beginner

    Posted 7 years 9 months ago
    • Great answer. Thanks.

Time to create page: 0.049 seconds