Irsah in Designs

Customize concrete5 Skeleton Responsive Themes

Here we're going to show you the special features in using Skeleton framework themes for concrete5. You can download free and premium themes here in concrete5 Marketplace or you can test/or download a free concrete5+Skeleton framework theme here, brought to you by Irsah Indesigns.

Out-of-the-box, Skeleton framewotks have it's own unique techniques which you can easily developed and remember. It helps you towards a quicker web build for your clients or friends, and with concrete5 powerful features, it becomes more quicker!

So, let's take a brief look on the Skeleton features and how-to's, it's "classes" or keywords to remember, and several altenative working environment you can use with concrete5 functionalities.

Please take note that,, certain themes contributed by the awesome concrete5 community designers/developers, might have slight differences. But overall, this how-to will detail out on the use and functionality, using Skeleton framework and concrete5.


Using Skeleton Classes for/as Page Layout

Here's a quick example on how to maximise your workflow using concrete5 and Skeleton frameworks. Refer illustrations on how concrete5 can manage your layout efficiently with Skeleton special classes in preparing a full pledge responsive website.


Containers and Column/s

Thanks to Dave (Skeleton author), the responsive framework has already been pre-calculated the nescessary measuremeants for basic web design layout. Based from 960gs framework, the overall total width is 960px (dubbed container) including 10px gutter/gaps on both sides. Which means 940px will be the total width for the content area.

Within the container, there are 16 intermediate columns (including gutters/gaps) which could be called via special CSS classes to refine the internal page layout (inside container). These classes are labeled as column/s for example one column,, two columns, six columns until sixteen columns, which you can use to define the widths of your contents inside the container.


With that said, to have your contents in a row, the total amount of widths would not exceed the total of sixteen columns, for example;,content no.1 (two columns), content no. 2 (five columns) and content no. 3 (ten columns.)  These  3 contents with the specified columns assigned (1 + 5 + 10 = 16 columns) will spread out nicely in a row on your web page.  

Let's take a look on how we can apply these classes/columns in a concrete5 environment. Below are some examples on how to apply these special Skeleton classes for your workflow, including how to nest inner columns the correct way.


Using Skeleton Column Classes

concrete5 have a unique interface for editing, that's right, it's editing your website/web pages on the fly. While logged in, one can go to any page and edit its contents, re-arrange or even switch page designs/layouts. Let's make full use of this amazing ability to Skeleton workflow.

In the illustration below, we have several content blocks stacked vertically in a single page layout. Now, we will use Skeleton framework special classes to refine the content blocks. 

In the example below we wil make these vertical stacked content blocks align by itself in a row and be responsive while doing it!


At Content block top > click on block > Design > CSS section > add "three columns alpha" (wihout quotes) in the classes field > click Save.

Now go to middle content block > click on block > Design > CSS section > add "six columns" (without quotes) in the classes field > click Save.

Lastly go to bottom block > click on block > Design > CSS section > add "seven columns omega" (without quotes) in the classes field > click Save.

Noted that we added "alpha" and "omega" classes for first and the last block for that area/section we wanted the blocks to align. If you calculated the classes above 3 + 6 + 7 =16.

Now click Publish This Page and the content blocks aligns side by side with the first content block on that row/area like below. 


If your design does not exceeds the sixteen columns amount, other blocks with narrower widths will fill in the empty area for that row.. You can add a Spacer Block (from concrete5 Marketplace and free) and add a specific/desired height for both top and bottom of the required row.


You can also assign the "row" class (without quotes) in the beginning of the content block classes to align the required blocks with a sixteen columns in total.

For example as above, 

At Content block top > click on block > Design > CSS section > add "three columns row" (wihout quotes) in the classes field > click Save.

Now go to middle content block > click on block > Design > CSS section > add "six columns" (without quotes) in the classes field > click Save.

Lastly go to bottom block > click on block > Design > CSS section > add "seven columns" (without quotes) in the classes field > click Save.

Note: we've ommited the "alpha" and "omega" classes and only using the "row" classes as above.


Creating Gutter/Gaps with Offset Classes

If your design requires your content blocks with specific gaps/gutters in between the blocks within a row, you can use specified classes as below;

/* Offsets */

Still using the same method/example above for vertical stacked content blocks;

At Content block top > click on block > Design > CSS section > add "three columns alpha" (wihout quotes) in the classes field > click Save.

Now go to middle content block > click on block > Design > CSS section > add "three columns offset-by-two" (wihout quotes) in the classes field > click Save.

Lastly go to bottom block > click on block > Design > CSS section > add "four columns offset-by-four omega" (wihout quotes) in the classes field > click Save.

Still using the "älpha" and "omega" classes like above, but now we've used offsets ie offset-by-two; which means the middle Content block will be seperated with one column from the first block Content block.

While the last content block which has the offset-by-four, will have a gutter/gap of 4 columns between the second Content block.

Using a total 16 overall column width ie. 3 (content block) + 3(content block) + (2 offsets) + 4(content block) + (4 offsets) = 16. The result will look like below;.

Please use the spacer block from concrete5 Marketplace to specify gaps in betwen rows of columns and to make sure the content blocks align in desired row.


Refer the red colored box/s area which shows different gutters/gaps sizes using the offset CSS classes methods.

Note: You can also use the "row" class as explained previously.


Quick Question:

concrete5 already have the Layout helper (in edit mode), to help me chop my web page to several column/s, why use Skeleton classes?

Moderate Answer:

The Layout editor for concrete5 outputs as tables for a webpage, which means, as the browser screen gets narrower, the contents inside the blocks gets narrower too! It makes it almost impossible to read in small screen devices, as the tables are designed with percentages in widths and shrinks to the percentage of the browser screen size..

To make our webpage more readible, we assigned every content on our concrete5 web page to float (using Skeleton classes) so that, they can still preserve readablity on any screen size. These classes also helps in making sure your contents are switched places correctly (in smaller screen sizes) with the existing layout structure.

Well, there is a simple CSS hack here you can also use to prevent native Layout editor in concrete5 and prevent the columns to act like "tables" which contents gets squeezed when reducing screen sizes.


Scaling Images

(Note: Please check with themes designer/s for responsive images classes, our development theme still uses pre-installed Skeleton classes)

Scaling images is much simplyfied using the "scale-with-grid" classes. You can select the required image and use Design > CSS section > add "scale-with-grid" (without quotes) classes in the field.


If you are in a Content block/editor (tinyMCE), click the image icon > Insert/Edit Image (image icon) > Appearence > Classes > add value > insert "scale-with-grid" (without quotes) in the text field > click Save the image edit mode > Save the editor mode > Publish This Page.

Resize your browser to see the images rescale as required.


You can also assign by the drop down styles classes in Content block/editor (tinyMCE) > click the image > go to Styles drop down > find image-with-grid > select the class > Save and Exit Editor > Publish page.

Recommended to clear browser cache first before testing by pressing Ctrl F5 several times. Examples using this CSS classes for responsive/auto scale images is used on this page.

Note: Use the desired techniques to your prefered working/designing environment.


Scaling/Responsive Video's

(Important: This special classes is only included in our development Skeleton+concrete5 theme here)

Video's embedded either from Youtube, Vimeo etc can also auto resize by adding certain classes to it. Assign "video-scale" when embedding videos through the Content block > Add/Edit Video icon > insert URL > insert Video > go to HTML mode using HTML icon > find the iframe code > add outer <div> class like so;

<div class="video-scale">
<iframe ....... THE_VIDEO_CONTENT.... </iframe>

Click Update HTML and save editor > Publish This Page and check by resizing browser.

Recommended to clear browser cache first before testing by pressing Ctrl F5 several times. Example as below;


If the "Styles" drop down section is available when using the content block;

In Content block > click Add/Edit Video icon > enter desired field for your video > Save > while your video finished parsing on content block editor > Click on (highlight) the Video > go to Styles menu drop down > select "video-scale" option > Save and click Save for the content block editor (aka TinyMCE).

Again, clear cache several times and resize browser for testings.

This video technique works best with added surrounding div's, but you can also fully utilise various javascripts includes, just like the file fitvids.js. You can find more tutorial here or browse concrete5 on how-to insert/include javascripts the concrete5 way!




Let's re-cap what we have discussed;

  1. Use Skeletion specially assigned classes for on-page editing (front-end) towards a respnsive design layout approach. For example, naming widths to concrete5 blocks like so; one column, two columns, six columns, fourteen columns etc.
  2. Use offset-by-(size... one, three, seven, fifteen.....) to create gutters/gaps in between blocks in one row.
  3. Using "alpha" and "omega" classes to target align blocks within a row.
  4. Use "row" class to nest blocks wihtin one row.
  5. Use Spacer blocks to also nest blocks in one row.
  6. Use scale-with-grid classes for responsive images scaling.
  7. Use video-scale classes for video embeded on page.
  8. To align blocks in one row, added columns classes must equal to sixteen included required offsets for gutters/gaps.


Last Notes

What was discussed above is just basic fundamentals using concrete5+Skeleton theme a total CSS responsive framewrok. There are other work-arounds which you could look out for, great tutorials on RWD (responsive web designs) and from time to time, we will share more techniques in our website. Do check it out!

It is hoped that concrete5+Skeleton responsive themes will quick start your website project development and any inquiries could be forwarded through our contact mail address here

If you have used or PRO's using Skeleton framework, any special tips to ease workflow? If you do, please share and we thank you in advance for your support.