:rocket: Next Generation Template / Theme Framework

Overview

Gantry Framework Build Status

Join the chat at https://gitter.im/gantry/gantry5

Ready to get started with Gantry 5? That's great! We are here to help.

On this page, you will get some quick tips to help you hit the ground running with Gantry 5. You can find more detailed documentation for each of these tips by clicking the Learn More button at the bottom of each section.

We hope you enjoy Gantry 5 every bit as much as we have enjoyed making it.

Browser Requirements

The back-end administration requirements of Gantry in order of preference are as follows:

  • Google Chrome 41+
  • Firefox 36+
  • Safari 8+
  • Opera 28+
  • Internet Explorer 11+

Installing Gantry 5 and the Hydrogen Theme

Gantry 5 is a framework by which Gantry-powered themes are made. In order for a Gantry theme to work, you will need to install both the framework and the theme. Doing this is not difficult at all.

The first thing you need to do is download the latest build of Gantry 5 and Hydrogen. You can do so by clicking the links below, or via GitHub.

Download Stable Download CI Builds

Once you have the latest packages, installation is simple. We have provided a step-by-step guide in the Installation portion of this documentation.

Learn More

Accessing the Gantry Administrator

Joomla

When you have installed and activated both the Gantry framework and Hydrogen, you can access the Gantry 5 administrator in several different ways. The easiest being simply navigating to Components > Gantry 5 Templates from the back end of Joomla.

Here, you will see a list of any installed Gantry-powered themes. You can Preview the theme from here or select Configure to go directly to the Gantry Administrator where you can get started modifying your Gantry-powered site.

Navigating the Gantry 5 Administrator

The Gantry Administrator has multiple administrative tools you can flip through to configure how your Gantry-powered theme looks and functions. Here is a quick breakdown of each of these tools, and what you can do with them.

You will notice the following menu items in the Gantry 5 Administrator:

  1. Menu Editor: This administrative panel gives you the ability to enhance the platform's menu by altering styling, rearranging links, and creating menu items that sit outside of the CMS's integrated Menu Manager.

  2. About: This page gives you quick, at-a-glance information about the currently-accessed theme. This is a one-stop shop for information about the theme including: name, version number, creator, support links, features, and more.

  3. Platform Settings: This button takes you to the CMS' settings page for Gantry 5. In Joomla, this is the Permissions configuration page.

  4. Clear Cache: This button clears the cache files related to Gantry. This includes all of the temporary files outside of CSS and configuration information.

  5. Outlines Dropdown: This dropdown makes it easy to quickly switch between Outlines without having to leave the Gantry Administrator.

  6. Styles: This administrative panel gives you access to style related outline settings. This includes things like theme colors, fonts, style presets, and more.

  7. Settings: This administrative panel offers you the ability to configure the functional settings of the theme. This includes setting defaults for Particles, as well as enabling/disabling individual Particles.

  8. Layout: This administrative panel is where you would configure the layout for your theme. Creating an placing module positions, Particles, spacers, and non-rendered scripts such as Google Analytics code is all done in this panel.

Learn More

What are Outlines, Particles, Atoms, etc.?

Because Gantry 5 is so different from any version of Gantry before it, we came up with some terms to help make sense of the relationships Gantry's new features have with one-another. Here is a quick breakdown of commonly used terms related to Gantry 5.

Term Definition
Outline A configurable style used in one or more areas of your site. It serves as the container on which a page's style, settings, and layout are set.
Particle A typically small block of data used on the front end. It acts a lot like a widget/module, but can be easily configured in the Gantry 5 Administrator.
Atom A type of Particle that contains non-rendered data, such as custom scripting (JS, CSS, etc.) or analytics scripts for traffic tracking.

Learn More

Where to Get Help

A chat room has been set up using Gitter where you can go to talk about the project with developers, contributors, and other members of the community. This is the best place to go to get quick tips and discuss features with others.

Documentation is also available, and being continually added to as development progresses. Is something missing? You can contribute to the documentation through GitHub.

How to Contribute

Contributing to the Gantry 5 framework, or to its associated documentation is easy. Development for both of these projects is being conducted via Github, where you can submit Issues to report any bugs or suggest improvements, as well as submit your own Pull Requests to submit your own fixes and additions.

We recommend chatting with the team via Gitter prior to submitting the pull request to avoid doubling up on a fix that is already pending or likely to be overwritten by an upcoming change.

Bundling JS and Compiling SCSS

In our development environment, we use Gulp to bundle JavaScript and compile SCSS with the capability of watch so that any change on target files will automatically trigger the recompilation.

If you would like to set this up in your own development environment, you can do so following these simple instructions.

Note that for this to work, you need to have Gantry 5 source and not a package. You can either clone it or download the source from GitHub.

The first thing you need is Node / NPM. If you don’t have them already, you can grab the installer for your OS from https://nodejs.org/download/.

The next step is to install all of the JS module dependencies. To do so, make sure you are at the root of the Gantry 5 project, and run the command npm install.

Once that’s done, you can install Gulp. We recommend installing Gulp globally so you can use the command from any folder. Here is the command to do so: sudo npm install gulp --global

Gantry has different sets of JS and CSS files that can be recompiled from the root. The first time you get started with Gantry, or if you ever need to reset and reinstall all the modules, you can run the command npm run build-assets. This operation will remove all the node_modules folders and re-run npm install in all the project folders. It will take a while.

An alternative method which won't remove all the node_modules folders is via gulp -up.

Along with the -up command, you can alternatively use -update, --update, -up, --up, -install, --install, -inst, --inst, -go, --go, -deps, --deps. Whichever is easier for you to remember. The code will understand on its own if it needs to install for the first time or just update the node modules.

Note that this might take a few moments.

At this point you have everything you need to run Gulp. Just type the command gulp and you should see the CSS and JS getting compiled.

We provide a few handy tasks as well:

  1. $ gulp / $ gulp all: Compiles all of the CSS and JS in the project.
  2. $ gulp watch: Starts the compilers in watch mode. Any change applied to targeted JS or SCSS files will trigger an automatic recompilation.
  3. $ gulp watch --css / $ gulp watch --js: Starts the compilers in watch mode and listens to only SCSS or JS changes. Useful if you are only focusing on one and not the other.
  4. $ gulp css / $ gulp js: Compiles all of either CSS or JS files, in case you are only working on one and not the other.
  5. $ gulp —prod: Compiles every CSS and JS in production mode. The compiled files won’t have source maps and will be compressed (this usually takes slightly longer than normal mode).

Updating Google Fonts

The Google Fonts JSON file can be generated by following guide at https://developers.google.com/fonts/docs/developer_api or simply using the https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY url. You need to enable usage of Google Fonts API and provide your API key in the place of YOUR-API-KEY.

License

Gantry Framework v5 or later is licensed under a dual license system (MIT or GPL version 2 or later. This means you are free to choose which license (MIT or GPL version 2 or later) is appropriate for your needs.

More Details
Comments
  • How can I change the showcase to full width or use a slide to replace it?

    How can I change the showcase to full width or use a slide to replace it?

    Hi, first of all let me say Gantry is getting better and better. I used a few years ago when I purchased a template from Rocketthemes and, the difference between versions is just shocking.. Now, the predicament that brings me here is the following: I would like to stretch the showcase to full width but I can't seem to do it because I know almost nothing of coding. I've read somewhere that I should add the following lines to index.php to add module position within body tag( don't know where to do this):

    <?php /** Begin FullwidthSlider **/ if($gantry->countModules('fullslideshow')): ?>
                    <div id="rt-fullslideshow">
                            <div class="rt-container">
                                           <?php echo $gantry->displayModules('fullslideshow','standard','standard'); ?>
                                           <div class="clear"></div>
                                    </div>
                            </div>
                            <?php /** End FullwidthSlider **/ endif; ?>
        <?php /** Begin Showcase **/ if ($gantry->countModules('showcase')) : ?>
    

    2 - According to the same website I should then add the module to templateDetails.xml(which I've already found in hydrogen folder but doesn't seem to mention any modules); And at last the Instructions I've read mention I should create some custom css file and add:

    #rt-fullslideshow{
        width:100%;
        height:500px;
        z-index: 999;
        overflow: hidden;
        .rt-container{
            position: fixed;
            top: 0px;
            left: 0px;
            width:100%;
            height: 100%;
            .rt-block{
                width:100%;
            margin:0;
            padding:0;
            .module-surround{
            overflow: hidden;
            width:100%;
            }
            }
            .rt-grid-12{
                width:100% !important;
            }
    

    Now, my problem is, I've opened my website's index.php(which doesn't mention nor body nor and the templateDetails.xml and I don't know where to add the information nor if the instructions I'm following don't apply to gantry 5. Sorry for the long post. Can you help me?

    enhancement 
    opened by deusbraga 77
  • Add support for Fontawesome 5

    Add support for Fontawesome 5

    Since Fontawesome 5 is now available and uses SVG's it would be nice to provide support for this within Gantry5. Fortunately Fontawesome do provide a mechanism to retain backwards compatibility with fontawesome 4 codes through the use of their "shim" - please see...

    https://fontawesome.com/how-to-use/upgrading-from-4

    enhancement fixed 
    opened by marktaylor46 71
  • inappropriate folder permissions

    inappropriate folder permissions

    disappointing coding and possible security risk

    if (is_dir($folder)) {
        return;
    }
    
    $success = @mkdir($folder, 0777, true);
    
    if (!$success) {
        // Double check if the folder exists
    
    invalid wontfix 
    opened by mandville 52
  • Add Tab support to Particles, and better Description

    Add Tab support to Particles, and better Description

    If particle have a lot of settings say 50 or more we would really need tabs in the particle so we can adjust the layout better.

    Also description filed could be done better as some setting have a 2 or 3 sentences of explaining what to enter in it or we can add a http://fortawesome.github.io/Font-Awesome/icon/info-circle/ next to the field and when users click on it it will explain it in popup, the tooltip that is used now is a little short on the info ....

    enhancement 
    opened by DamirPecnik 42
  • Menu ordering not reflected in Joomla/Gantry menu

    Menu ordering not reflected in Joomla/Gantry menu

    This is a reopen of https://github.com/gantry/gantry5/issues/463

    The issue does not seem to be resolved. I just tested it with the latest CI Build and here's what happens:

    Clean install of Joomla 3.4.3 + latest CI Build of both G5 and Hydrogen

    1. Created a new Menu Item of type External Link (Item1)
    2. Created another Menu Item of type External Link (Item2)
    3. Changed the order of the above menu items - WORKS on the front end
    4. Renamed the above menu items - WORKS on the front end
    5. Went to the G5 Admin (Menu Editor) and added a custom class and an icon to the above menu items
    6. Went back to the Menu Manager and changed the order of the menu items - DOES NOT WORK on the front end anymore
    7. Went back to the Menu Manager and renamed the menu items - DOES NOT WORK on the front end anymore
    bug joomla fixed 
    opened by JoomFX 42
  • Gantry's Relationship with YAML is leading to unpredictable results (Hydrogen)

    Gantry's Relationship with YAML is leading to unpredictable results (Hydrogen)

    Hello,

    I have an issue whereby, if I load the same YAML file, I end up with different sections nested inside each other without any other changes - these change each time I reload. I am calling this unpredictable results.

    Whilst there could easily be something slightly off with my YAML, Gantry's error handling is nowhere near strict enough to point to a line of code it is not happy with.

    I have checked, and checked again the sections that are affected and compared them to working YAML templates and, for love nor money, I cannot see any issues with spacing or syntax.

    The YAML file itself is here - https://pastebin.com/FMnMr8ay

    A screenshot of the latest weird nesting is here: https://snipboard.io/zBjin2.jpg

    As you can see, it's still seeing container sections as numbers rather than letters.

    Many thanks.

    docs 
    opened by greenlanegreb 40
  • Responsive support classes broken.

    Responsive support classes broken.

    Further to #1487 that was fixed in G5.3.9 it would appear that the responsive support classes have been broken further.

    Example: "hidden-desktop" should only hide content in desktop and large display viewports but in fact the content never shows with this responsive support class as it is always set to display: none !important.

    The problem seems to eminate though the bootstrap responsive-utilities.less which is setting display : none !important and then the Gantry responsive utility code in /media/gantry5/engines/nucleus/scss/nucleus/theme/breakpoints/_utilities.scss never contradicts this or sets the correct value according to the breakpoints.

    Also note that the bootstrap CSS is using all the wrong breakpoints (hardcoded viewport sizes) which is not compatible with Gantry 5 (which can have variable viewport sizes).

    I think all of the responsive support classes should be retested to ensure that they match what they are supposed to be.

    bug joomla 
    opened by marktaylor46 36
  • Safari (11.x +) Web Inspector Issue

    Safari (11.x +) Web Inspector Issue

    Hi all,

    A long term user of the Gantry Framework (mainly Joomla).

    Recently I have started to experience the Safari Web Inspector crashing/hanging. At first I was thinking that it was solely due to Safari 11.x version updates by Apple. However, other developers I spoke with had a hard time replicating the issue.

    Until I gave them a Gantry (5) website to test this issue on. As a matter of fact it occurs on the Gantry Demo site too - http://demo.gantry.org .

    It seems to be a combination of Safari 11.x and Gantry (The issue does not occur on Safari 10.x) - however, no errors are visible on the test sites.

    I have created a video to showcase the issue and gove some more information: http://screenshots.blueoceanyyc.com/7aabef210e6f

    My hope is that someone involved with Gantry development can pinpoint the exact issue and find or propose a solution to this issue. Wether that is a fix in Gantry or a fix in Safari 11.x that Apple needs to be informed about...

    I have even been thinking that Safari uses DNS prefetchin.. could that be an issue...? But to no avail, I was able to turn off prefetching and same results. Web Inspector hanging...

    joomla cannot reproduce 
    opened by pnutster 35
  • Hydrogen child theme

    Hydrogen child theme

    Hello for sure I'm a dummy but please someone can explain me how make a child theme assuming that I use the last version native Hydrogen5 template. I've read the doc but I always have some errors, this was the last one ** RuntimeException (404)

    Theme g5_hydrogen-child not found **

    Should be nice to have a native Hydrogen-child.zip added on G5 official site

    question wordpress 
    opened by prankyboy 33
  • System messages are not closed - Gantry 5.5.7 (Helium) - with Joomla 4.0.5

    System messages are not closed - Gantry 5.5.7 (Helium) - with Joomla 4.0.5

    A clean install of Joomla 4.05 and the Gantry 5.5.7(Helium) template. The site is a test site. The Phoca Cart component of the latest version is installed. PHP 8. To see this problem, you need to add/remove an item to the cart or to the wish list, a system message appears that the item has been added/removed.

    https://testing1.joomla.com/index.php/ajfony

    And this system message does not close, the cursor does not change when hovering over the cross. The window cannot be closed. The Phoca Cart component itself has nothing to do with it, and the developer knows about it and wrote that the component does not use any additional windows. It is enough to switch to the default Cassiopeia template, all system messages are closed normally. Tell me what to do?

    https://cdn1.savepice.ru/uploads/2022/1/12/52d8d1c6e0cc57aaed0e23cc4eb72975-full.jpg

    bug joomla4 fixed 
    opened by kosh2323 31
  • mod_menu overrides in Joomla not working with Gantry Menu

    mod_menu overrides in Joomla not working with Gantry Menu

    I have discovered an issue with Firefox that is quite annoying and I have figured out a way around it using a Joomla! override. However the override does not work for Gantry templates. I have applied the override to several different installations and the outcome is the same every time. It works on the standard Beez or Protostar template but when a Gantry template is applied it fails. Here is a link to the discussion thread with the solution over on the Joomla! forum. https://forum.joomla.org/viewtopic.php?f=706&t=960992

    Any ideas on how I can get the override to work with the Gantry templates? I believe it has something to do with the fact that the Gantry menu has it's own setting for the "Link Target" and the override is not passed through to it properly.

    @w00fz I know the menu is your area of expertise though if you @mahagr or @newkind have any input for me I would welcome it very much!

    enhancement 
    opened by N8Solutions 31
  • Gantry 5 not supporting Advance Template Manager

    Gantry 5 not supporting Advance Template Manager

    Hello! It seems Advanced Template Manager not working with Gantry Framework templates. This is a big disappointment. Because Gantry 5 is a genius framework, extremely flexible and fast. In same time it has poor assignments options - only to menu items. So, we can't assign templates to some tags, specific items and URLs. Example: We use Google AdSense code in the head area. Ok, we need to remove this code for specific tags and specific items and some URLs. In the same time, we can't create menu items for that (too many tags and items). So, question: Isn't there any way to make it work together - Gantry and ATM? Maybe some hack?

    opened by lipatovroman 3
  • Installer joomla pkg gantry 5 error Field 'update_site_id' doesn't have a default value

    Installer joomla pkg gantry 5 error Field 'update_site_id' doesn't have a default value

    installed this template. Everything seems to be normal. When the site was ready, the main page template stopped working. I deleted it, but I couldn't create a new one. Then I reinstalled the template and baked Gentry 5. I deleted it, but I couldn’t install it again. Now nothing is installed on the site at all. This is my fifth Gantry 5 site, but the first on Joomla 4. What should I do? Code error: .../libraries/vendor/joomla/database/src/Mysqli/MysqliStatement.php:435 "if (!$this->statement->execute()) 434 { 435 throw new ExecutionFailureException($this->query, $this->statement->error, $this->statement->errno); 436 } "

    opened by client510 1
  • Wrong version displayed in Hydrogen Template

    Wrong version displayed in Hydrogen Template

    I upgraded a site using Hydrogen to Gantry 5.5.14 & 5.5.15 from version 5.5.13 and both .14 & .15 are displaying the Gantry version as 5.4.28. In 5.5.13 it displays the version correctly.

    image

    opened by N8Solutions 0
  • Administrator Menu Editor Unusable in Gantry 5.5.15 with PHP 8.1.13

    Administrator Menu Editor Unusable in Gantry 5.5.15 with PHP 8.1.13

    This issue was previously mentioned in https://github.com/gantry/gantry5/issues/3073. I was asked to enter a new issue focusing specifically on this problem.

    As of updating to 5.5.15, which resolved this problem (https://github.com/gantry/gantry5/issues/3088), the Menu Editor is no longer usable. This is what I get on all my sites running 5.5.15 (both Hydrogen and Helium templates) for all menus. This has been occurring with Joomla! 4.2.5 and 4.2.6 since updating to PHP 8.1.13 and Gantry 5.5.15.

    image

    opened by bascherz 6
  • Expand on Hover problem

    Expand on Hover problem

    Dear Gantry team I have problems since the upgrade from J3.10.11 to J4.2.5 on a page with with 3 different menus. If I deactivate/disable "Expand on Hover" for one menu, "Expand on Hover" is deactivated/disabled for ALL menus of this page.

    It seems like the bug #2062 was fixed until J3.10.11 and resurfaced in J4.x?

    A fast (also temporary) fix would be very much appreciated. Thank you all!

    Alexander

    opened by alexatshark 3
Releases(5.5.15)
Owner
Gantry Framework
Theme Development Framework for Joomla, WordPress, Grav
Gantry Framework
:rocket: GraphQL API for WordPress

WPGraphQL WPGraphQL is a free, open-source WordPress plugin that provides an extendable GraphQL schema and API for any WordPress site. Below are some

WPGraphQL 3.4k Jan 5, 2023
Wordless is a junction between a WordPress plugin and a theme boilerplate that dramatically speeds up and enhances your custom theme creation

Wordless is a junction between a WordPress plugin and a theme boilerplate that dramatically speeds up and enhances your custom theme creation. Some of

weLaika 1.4k Dec 9, 2022
WordPress Framework based on parent theme

Cherry Framework The most delicious WordPress framework Fully responsive design, easy install, steady updates, great number of shortcodes and widgets,

Cherry Framework 158 Nov 23, 2022
A curated list of Awesome WordPress Theme, Plugins and Framework development Resources and WordPress Communities.

Awesome WordPress A curated list of Awesome WordPress Theme, Plugins and Framework development Resources and WordPress Communities. Inspired by bayand

Dropndot Limited 91 Dec 26, 2022
The WordPress theme powered by the Laravel Framework.

Laravel in WordPress Theme Laravel is a web application framework with expressive, elegant syntax. It's one of the most popular PHP frameworks today.

null 201 Dec 11, 2022
Hozokit - Theme Building Framework for WordPress

Hozokit - Theme Building Framework for WordPress Hozokit gives you the power to create unique WordPress themes without the WordPress hassle.

cristiano 16 Nov 15, 2022
Classy is a framework for building WordPress themes, based on Blade template engine

Classy is a framework for building WordPress themes, based on Blade template engine. It's fast with beautiful architecture that allows you to write le

DigitalKwarts 75 Nov 23, 2022
A Theme Customizer control allowing selection and sorting of multiple images.

Multi Image Control (work in progress) A Theme customizer control allowing selection and sorting of multiple images. Currently under refactoring to ma

theAverageDev (Luca Tumedei) 14 Nov 8, 2021
A custom WordPress nav walker class to fully implement the Twitter Bootstrap 4.0+ navigation style (v3-branch available for Bootstrap 3) in a custom theme using the WordPress built in menu manager.

WP Bootstrap Navwalker This code in the main repo branch is undergoing a big shakeup to bring it in line with recent standards and to merge and test t

WP Bootstrap 3.3k Jan 5, 2023
A WordPress theme switcher for developers

WP Theme Switcher To help you build or preview a new theme directly on your site without affecting your visitors (they always see the default theme wh

WP Clevel 3 Oct 20, 2021
Manuel Monteiro WP Starter Theme

_s Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turnin

Manuel 1 Oct 25, 2021
Twenty Twenty-Two, the default WordPress theme that will launch with WordPress 5.9.

Twenty Twenty-Two Welcome to the development repository for the default theme that will launch with WordPress 5.9. About Twenty Twenty-Two is designed

null 414 Nov 28, 2022
Custom WordPress theme for DotOrg

wd_s Debt Collective Theme Table of Contents Introduction Getting Started Prerequisites Quick Start Advanced Setup Development Contributing and Suppor

The Debt Collective 1 Oct 31, 2022
Sakura🌸: A Wonderful WordPress Theme

Sakura??: A Wonderful WordPress Theme

幼稚鬼呀 2 Dec 15, 2022
The most powerful all in one, SEO-friendly theme for WordPress.

Help us Become a backer via Patreon. Make one time donation with PayPal. About Seven SERP Theme Seven SERP Theme is an open source WordPress theme. Wi

Seven SERP 3 Nov 19, 2021
Création du thème "mytheme" WordPress from Scratch

<!DOCTYPE html> <html lang="fr"> <head> <meta name="viewport" content="width=device-width" /> <meta http-equiv="Content-Type" content="text/html;

Jules Eulalie 0 Dec 27, 2021
A WordPress theme I developed for metamaxlab.com website.

=== metamaxlab === A WordPress theme I developed for metamaxlab.com website. This theme has compatibility with Bootstrap 5.1, Font Awesome, and Jetp

Gregory Noguera 0 Jul 17, 2022
Advanced Import : One Click Import for WordPress or Theme Demo Data

Advanced Import is a very flexible plugin which convenient user to import site data( posts, page, media and even widget and customizer option ).

Santosh Kunwar 1 Jan 18, 2022
A one-page user-profile WordPress theme

X3P0 - Profile A one-page user-profile WordPress theme. Currently, it ships with a few patterns. More will be added. Credits patterns/artist.php - Pho

X3P0 25 Nov 4, 2022