If you've ever used Joomla before, you might be familiar with module class suffixes. This cunning little feature allows you to add a wrapping class to any module you publish to the site and is often used to change the design / layout of a specific module.

In SiegeEngine2 we've gone a step further. Not only can you change the appearance of your module using these suffixes, but you also use them to set the width of your modules, allowing for complete flexibility with regards to layout.

Grid suffixes

To define a modules width, you simply use the Foundation4 grid classes as your module suffix (or one of them). For example, if you wish your module to sit full width, you'd set a module class suffix of "large-12". This tells the browser to use a width of 100% on large screens. If you also want it to sit full width on mobile, simply set the additional suffix of "small-12". Easy, eh? No? Ok, let's break this down a bit more.

Foundation uses a 12 column grid system. The page is broken into twelve, equal width columns. To define the width of an element, you simple set a class to define how many of these columns the element should span. So, if you want an element to only fill half the width of the page, you want to span six columns. So you'd use .large-6.

In foundation, we can set different widths for elements based on the viewport. This smaller grid is triggered once the viewport hits 768px or smaller

The following classes can be appended to your modules to set widths;

  • large-12
  • large-11
  • large-10
  • large-9
  • large-8
  • large-7
  • large-6
  • large-5
  • large-4
  • large-3
  • large-2
  • large-1
  • small-12
  • small-11
  • small-10
  • small-9
  • small-8
  • small-7
  • small-6
  • small-5
  • small-4
  • small-3
  • small-2
  • small-1
Additionally, you can also use the following classes to further control your layouts;

offset

Used like so;

<div class="large-6 large-offset-6 small-6 small-offset-6 columns">blah blah blah</div>

Centre

used like so;

<div class="small-6 large-centered columns">6 centered</div>

And also all of the push and pull classes that exist in Foundation. For more info on the Foundation4 grid, see here.


There are also a few other classes you can add to your modules to highlight content etc.

In Foundation, there are .panel and .panel.callout classes. We've included these, but we've also added a couple more;

.panel.yellow

.panel.green

It should be amazingly obvious what they do, but in case you're not sure; .panel.yellow adds a yellow background, and .panel.green adds a green background! For reference, .panel adds a pale grey background, and .panel.callout (or, .panel.blue) adds a blue background. 

Some of the text also changes colour for better readability too, so watch out for that. You can always switch it back using a custom class, or edit SiegeEngine.css!

Note: you need to add the "columns" class as a module suffix too!
Another note: You can also use all of the above classes directly in your article HTML, but here you will have to use the "columns" class too! :)