Nucleus Grid System
-
-
- Dawn Russell
- Newbie
- Posts: 18
- Thanks: 0
-
Hello,
I would like to create an Illustrator and Photoshop file that is setup according to the Nucleus Grid System so I can present designs to my clients and then build them with Gantry 5. I've done some research and I keep finding information about Nucleus Theme as it relates to Drupal, but I don't see any information on the Nucleus Grid System that you are using for Gantry. Would you be so kind as to point me to documentation (like the Bootstrap framework has) that would assist me in setting up the grid system that correlates with Nucleus within my Adobe applications?
Thanks
Dawn
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
- Each page in our Gantry 5 Layout Manager is genereated by it's respective YAML and TWIG files. Currently the preset with the largest number of module position's is the "Gantry 4" pre-configured layout. You can see it's layout here http://www.rockettheme.com/forum/gantry5-for-joomla/244788-gantry-4-layout-in-gantry-5
-
-
-
- Dawn Russell
- Newbie
- Posts: 18
- Thanks: 0
-
Hi Dan,
I'm sorry but I don't have more clarity about the layout of Gantry 5 based upon your response. Let me phrase the question a different way.
From a design perspective, does the Nucleus Grid System that, according to your documentation, forms the basis of the Gantry 5 template framework have a certain number of columns? For example, Bootstrap has 12 columns, that can be manipulated with CSS class selectors. How is Gantry laid out 960 degree grid, 12 columns, 10 columns, etc? This way I can translate it into a starter design file where I can layout my customer designs.
Thanks,
Dawn
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
There is no limit for columns (width in %).
There is no restriction to 960px – you can set breakpoints and widths yourself.
Nucleus is a Grid system that was developed by Rocketheme.
It has nothing to do with Drupal.
Doesn't really make much sense to have a illu/ps template ...
What I do sometimes is to use the PagesLayers app (mac only) to get a layered psd file of a theme.
www.pagelayers.com
From a design-point of view:
Nucleus is based on css-flex, it's using box-sizing: border-box and rem-units ("root-em").
I suggest to look at the (quite simple) basic html structure of G5 templates if you want to build a ai or psd template ... - Last Edit: 9 years 4 months ago by Henning.
-
-
-
- iCandy Webs
- Newbie
- Posts: 12
- Thanks: 0
-
I, like Dawn, am confused as to how this Nucleus Grid System works. I get that we could look at an existing Gantry 5 site to understand the markup, however is there no documentation as to how this Grid System functions? I would like to begin using Gantry in my latest projects but I dont quite understand how it or I tell it to behave responsively.
I say this with all due respect but you'd think there would be sufficient documentation elaborating on this so that newcomers can begin to adopt this wonderful framework that you've been working on for years. It's kind of difficult to get used to a completely new framework that has so many robust features and not even know how to use it. Thanks! - Last Edit: 9 years 4 months ago by iCandy Webs.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
So you checked
docs.gantry.org/gantry5/configure/layout-manager
?
You can look at all our Gantry5 demos on the RT site to get examples or simply grab the Rocketlauncher from the Gantry site and install it locally.
-
-
-
- iCandy Webs
- Newbie
- Posts: 12
- Thanks: 0
-
Hi again,
Thanks for he prompt reply. Yes I checked out the existing docs on your layout manager and watched a tutorial and found it very intuitive but it still left me with more questions. For instance, what if I'm developing a component or module and I would like o create a new view that folows your Nucleus Grid System? From time to time, I use Easy Component Creator to begin developing a Joomla component. Coming from a Bootstrap background, I can easily reference their documentation to see how I can implement specific classes for my required layout. How would I accomplish something like that with this?
If there were specific documentation that we could reference as a guide, I believe that it definitely makes Gantry 5 an even more attractive prospect for new adopters such as Dawn and I. We're basically saying, "Hey, guys this is amazing. We like what you've done for the community but how exactly do you use this thing, now?"
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
From a developers side: Keep in mind. Nucleus is no a full css-framework. Gantry5 itself is css-framework and platform agnostic. It's not made to replace them. It's made to work with frameworks like Bootstrap and UIkit etc. It doesn't have a big footprint. If you like Bootstrap ... use Bootstrap. That's totally fine. That doesn't mean you cant reuse Nucleus-classes. Just inspect the nucleus sccs (css) to see what it offers.
Nucleus is using Flexbox and box-sizing: border-box.
That should be the most important things for you.
But I will suggest to Ryan (the guy that does a docs) to add something about using nucleus-classes for your own stuff. - Last Edit: 9 years 4 months ago by Henning.
-
The following users have thanked you: iCandy Webs
-
Time to create page: 0.088 seconds