Irsah in Designs


Consistent Arrange Contents With concrete5 Skeleton Themes on Mobile Devices




When we introduced Skeleton frameworks, as our responsive web design features to our friends, they loved the idea. How the framework automatically displays your web contents to any screen sizes and looked good. With a little bit of how-to's, they can even become designers, detailing out their concrete5 built websites layout while using c5 live on-page editing features.

Here we are going to explore another feature using Skeleton framework and concrete5. Creating your content to consistently arrange/stacked on any screen sizes.

If you have work with Skeleton framework or/and concrete5, basically you can get the general idea. When the browser sizes change, ie for mobile devices or iPads, the structure of your webpage will suit to the desired screen size.

Some will stacked on top of one an another, and some content/s will rearrange itself to the required area (depending on the themes designer). So how can we make sure that each of our contents/blocks in our web page will suit nicely?

In Skeleton framework, Dave (the author) have already pre-assigned line-heights, margins and additional contents to suit desired screen sizes. But when you use concrete5, add several more contents or blocks within your Skeleton theme page/s, these margins will defer (depending on the blocks individual stylesheets)

In making sure your blocks or contents arrangment is consistently stacked with breatheable margins /gutters/gaps (between one and the other), you can use the "add-bottom", "half-bottom" and "remove-bottom" (without quotes) to your blocks in page edit mode > block > design > css section > class field.

The classes references as below;-

add-bottom

This will add 20px margin/gutter/gap below your content/block.

half-bottom

This will ad 10px margin/gutter/gap below your content/block.

remove-bottom

This will force and remove any content block that has already pre-assign with bottom margins to no margins/gutter/gap.

Here's an example page when different margins/gutter/gaps was pre-assigned without using the classes above in a smaller screen layout with Skeleton+concrete5.

4-Columns_--_Small-BizDev.jpg

You can review how margins/gutters/gaps in between different blcoks is inconsistent by the red lines and squares. We initially use different blocks/contents to show you it's margin differences.

Below is an example when an added classes ie "add-bottom", "half-bottom" was added to blocks for a smaller screen size.

Arteri5_--_Small-BizDev.jpg

In the second illustration, the content blocks stacked consistently and with more breather area in between. So, you can quickly assign these classes in making sure your website (and contents) will look wondeful/pleasent/readable in any screen size.

Certain themes available in concrete5 marketplace do let you assign these classes, but there are some which are "greedy" (pre-assigned by theme designers) in making sure the overall design layout will not break. These great designers can't be to blame though.

There is also our development web page/s using Skeleton framework and concrete5 here, if you want to see it in action. We've added some other features ie screen sizing effects, gradients background and mobile menu switch, among others, only using pure CSS, mobile quiries with Mobile First initiatives in mind.

Why we're developing/upgrading CSS ony powered designs, especially with concrete5? Well, we'will get to it in later articles, stay tuned.