Grid System for Building HUD's - GLayout

Download - GLayout Github

Video Demonstration

Debug & Drawn Grid - Side-by-Side

GLayout is a Grid System for building complex HUD’s using techniques from modern Web Development grid system’s, implemented into gmod.

GLayout is a grid system in that it uses row’s & columns to layout it’s content. All this is defined in code. An example of a similar system would be this Bootstrap Grid Example, taken from their documentation. In GLayout, you define a grid & it’s maximum width, then define columns to fill that grid. GLayout will hand the placement & stacking of columns itself, so you don’t have to worry about it.

GLayout provides tools for spacing your grid & columns as well. Margins can be used to define the space away from other elements of the grid ( such as the edge, or the space one column is away from another ). Padding can be used to define the space internally, as the space that the column or grid’s content has from the start of it’s container.

The main different between margin & padding is in what’s drawn. Margin’s are never drawn ( unless using Base:DrawDebug(), a method which draws margins to show you the full box model of a grid or column ). Padding, on the other hand, is drawn when referring to the container. Grids & Columns both have two positioning groups: the Container & the Content.

The container can be gotten through variations of :Get methods. So, if you want to get the width of a container, you’d do :GetContainerWidth() on the item you are referring to.

Content can be gotten through more direct :Get methods. To get the X position of the content, you’d run :GetX().

A full documentation can be found on the GLayout Github.

I was asked recently what the difference between GLayout & HUD Designer are. I’ll copy-paste my full reply below:

TL;DR at bottom.

I’ll have to be forward in my reply, I wasn’t aware HUD Designer existed! My reply will entirely be from a first-impressions perspective of what I could find searching the tool, rather than using it ( and I do apologize if I may be misinformed because of that! )
HUD Designer appears to be a visual tool first, which is very cool. Visual tools are great for allowing a designer ( or developer ) to focus on composition of UI. We use tools in Web Development for the same task. Photoshop is still quite common for design, but these days many people use Sketch, and due to it’s popularity Adobe is building a competitor to Sketch called Adobe Experience Designer.

Anyway’s, essentially what I see is that it’s a totally viable tool, but I would probably use HUD Designer for mockup’s first ( though at this time it could very well be more powerful than GLayout ). I also feel like there’s a difference between HUD Designer’s grid & GLayout’s grid.

HUD Designer seems to have a pre-defined grid ( that is probably changeable ) to help you align HUD boxes relative to each other.

GLayout, on the other hand, is the grid system. HUD Designer puts a grid on your screen for positioning boxes, GLayout asks you how many columns wide you want your grid’s width to be interpreted as ( or defaults to 12 ), and you tell columns to span that much of the grid. It then provides stacking, margin & padding features on top of this.

Refer to the visual example in the Bootstrap Grid. In this you define each row individually, and fill it with columns with a number of columns to span.

In GLayout, the row’s don’t have to be defined. GLayout will handle that and the stacking of columns for you, so you just have to define your Grid & Columns, and tell them each what to draw.


HUD Designer has a grid for aligning HUD boxes (HUD Designer Grid Example). GLayout is a grid for aligning HUD boxes (GLayout Referential Grid Example)

Can you show us a live example like Exho’s instead of bootstraps grid system?

I would like to see it working before touching it. Looks like a good idea for new developers or server owners.

Just posted a video & image comparison of the debug feature next to a regularly draw grid item as example of how to use it, what’s useful about it and what’s actually happening mathematically.