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.
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 10+ (9 supported at limited capacity)
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.
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.
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:
-
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.
-
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.
-
Platform Settings: This button takes you to the CMS' settings page for Gantry 5. In Joomla, this is the Permissions configuration page.
-
Clear Cache: This button clears the cache files related to Gantry. This includes all of the temporary files outside of CSS and configuration information.
-
Outlines Dropdown: This dropdown makes it easy to quickly switch between Outlines without having to leave the Gantry Administrator.
-
Styles: This administrative panel gives you access to style related outline settings. This includes things like theme colors, fonts, style presets, and more.
-
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.
-
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.
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. |
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.
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.
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/.
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: npm install —-global gulp
Now that you have the required pieces, 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.
Because we have different sets of JS and SCSS applications for admin, site, nucleus, you will also need to install the node modules for all of them. Still, from the root of your project you can run the command gulp -up which will take care of all the sub projects.
Along with the
-upcommand, 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:
$ gulp/$ gulp all: Compiles all of the CSS and JS in the project.$ gulp watch: Starts the compilers inwatchmode. Any change applied to targeted JS or SCSS files will trigger an automatic recompilation.$ gulp watch --css/$ gulp watch --js: Starts the compilers inwatchmode and listens to only SCSS or JS changes. Useful if you are only focusing on one and not the other.$ gulp css/$ gulp js: Compiles all of either CSS or JS files, in case you are only working on one and not the other.$ 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).