Mohunky.FrameworkV6

A start point framework for building responsive websites


Basics

TODO:- Insert a graphic of columns and gutters here

The Mohunky HTML/CSS framework (v6) is a Flexbox based 12 column layout. The basic structure of a page is broken into <section>'s. Each with a contextual ID that can be used to help the developer navigate the page and used as in page links for the end-user.

Each <section> then has a <div class="container">, <div class="container wide"> or <div class="container widest">. Containers are used to set the width of the content. A standard container has a max width of 1180px, a .wide container has a max width of 1920px and a .widest container has no max width.

Container Class Pixel Widths
Container .container Max-Width: 1230px
Wide Container .container.wide Max-Width: 1920px
Widest Container .container.widest Max-Width: None

A container is then broken into <div class="row">'s containing multiple <div class="column">'s. It's a 12 column grid system so the theoretical maximum number of columns is 12 but really you can stack them up beyond this, they need to behave themselves and break onto new virtual rows on smaller devices anyway. (It should also be noted that you can break out of the 12 column grid by centering a single narrow column, more on that later).

That leaves you with something like this:
<section id="sectionOne">
	<div class="container">
		<div class="row">
			<div class="column">.column</div>
			<div class="column">.column</div>
			<div class="column">.column</div>
			<div class="column">.column</div>
		</div>
	</div>
</section>
<section id="sectionTwo">
	<div class="container">
		<div class="row">
			<div class="column">.column</div>
			<div class="column">.column</div>
		</div>
	</div>
</section>
And that renders a little something like this:
.column
.column
.column
.column
.column
.column

Manipulating Columns

At this point the system isn't actually using a 12 column grid, it's more freeform. If left like this, columns would always equalise. Two columns would share the row 50/50, four would be 25% each and so on. To break out of this we can start adding .span# classes to the <div class="column">'s. This column for instance is <div class="column .span9">. (It's also centred, again breaking the 12 column grid, but more on that later.)

Defining the column widths using the above example:
<section id="sectionOne">
	<div class="container">
		<div class="row">
			<div class="column span6">.column</div>
			<div class="column span2">.column</div>
			<div class="column span2">.column</div>
			<div class="column span2">.column</div>
		</div>
	</div>
</section>
<section id="sectionTwo">
	<div class="container">
		<div class="row">
			<div class="column span8">.column</div>
			<div class="column span4">.column</div>
		</div>
	</div>
</section>
Giving us the following:
.column .span6
.column .span2
.column .span2
.column .span2
.column .span8
.column .span4

Offsetting Columns

Lets say you want to align a column with the row above but you don't need the row aboves left most column. In this case you need to offset the column by the width of the column you're removing, thats a really confusing way to describe what will make a lot more sense if you just look at the example below.

<div class="row"> 
	<div class="column demo span2"><code>.column.span2</code></div> 
	<div class="column demo span6"><code>.column.span6</code></div> 
	<div class="column demo span4"><code>.column.span4</code></div> 
</div> 
<div class="row"> 
	<div class="column demo span6 offset2"><code>.column.span6.offset2</code></div> 
</div>
And that renders a little something like this:
.column.span2
.column.span6
.column.span4
.column.span6.offset2

Centering Columns

It's very common to need to center columns, in both directions. For horizontal centering, if you're using the 12 column grid and columns who's total width add up to an even number. You can offset the first column by half the remaining width to center them all.

Example:
<div class="row">
	<div class="column span2 offset3 demo"><code>.column.span2.offset3</code></div>
	<div class="column span2 demo"><code>.column.span2</code></div>
	<div class="column span2 demo"><code>.column.span2</code></div>
</div>
.column.span2.offset3
.column.span2
.column.span2

Or do it the easy way

However, if you're using an number of columns who's width add up to an odd number, or if you just want an easier way to do it, then just stick .hCenter on the parent .row.

Example:
<div class="row hCenter">
	<div class="column span2 demo"><code>.column.span2</code></div>
	<div class="column span2 demo"><code>.column.span2</code></div>
	<div class="column span2 demo"><code>.column.span2</code></div>
</div>
.column.span2
.column.span2
.column.span2

You can even break out of the grid

You might not need to do this very often, but its another quick and easy tool at your disposal. This explainer is breaking the grid. The example below shows 12 single width columns and a centred column breaking the grid. I'm sure you dont need to see the HTML at this point.

Example:
1
2
3
4
5
6
7
8
9
10
11
12
.column.span9 centered
.column.span3 centered
.column.span3 centered
.column.span3 centered
.column.span7 centered

And lastly, vertical centering

And probably most commonly needed in a grid system. Vertical centering, I bet you've guessed it, stick .vCenter on the parent .row.

Example:
<div class="row vCenter">
	<div class="column span4 demo"><code>.column.span4</code>Lorem Ipsum...</div>
	<div class="column span8 demo"><code>.column.span8</code></div>
</div>
.column.span4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl. Adipiscing elit duis tristique sollicitudin. Eu ultrices vitae auctor eu augue ut lectus arcu. Tristique risus nec feugiat in fermentum posuere urna.

.column.span8

To align the colmns to their bottom, add .vBottom on the parent .row.

Example:
<div class="row vBottom">
	<div class="column span4 demo"><code>.column.span4</code>Lorem Ipsum...</div>
	<div class="column span8 demo"><code>.column.span8</code></div>
</div>
.column.span4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl. Adipiscing elit duis tristique sollicitudin. Eu ultrices vitae auctor eu augue ut lectus arcu. Tristique risus nec feugiat in fermentum posuere urna.

.column.span8

Nesting Rows and Columns

More .row's and .column's can be nested within one another to give extra flexibility.

Using the same example again:
<section id="sectionOne">
	<div class="container">
		<div class="row">
			<div class="column span6">.column</div>
			<div class="column span2">.column</div>
			<div class="column span2">.column</div>
			<div class="column span2">.column</div>
		</div>
	</div>
</section>
<section id="sectionTwo">
	<div class="container">
		<div class="row">
			<div class="column span8"> 
				.column .span8 
				<div class="row pdTop1"> 
					<div class="column span8">.span8</div> 
					<div class="column span4">.span4</div> 
				</div> 
			</div> 
			<div class="column span4"> 
				.column .span4 
				<div class="row pdTop1"> 
					<div class="column span6">.span6</div> 
					<div class="column span6">.span6</div> 
				</div> 
			</div> 
		</div>
	</div>
</section>
Giving us the following:
.column .span6
.column .span2
.column .span2
.column .span2
.column .span8
.span8
.span4
.column .span4
.span6
.span6
And that'll about wrap up the basics.
Back to the top

Responsive

If you're a "mobile first" person, take a long walk off a short pier. Every device and breakpoint should be considered equally, however we start with big screens and work down. If you start small with no consideration of the big picture you are going to trip yourself up! So start with the big picture and trim back. That's a rant for another day. Now that's out the way, everything to do with a specific breakpoint has a short 3-letter prefix as seen in the table below. The table also shows when those breakpoints occur

Note:- Although I've listed an pixel range, we leverage inheritance so if you've applied something at .tbs it'll also apply to .mbl and .mbs.

Equivalent Class Prefix Viewport Widths Container Width
Desktop 1920px and bigger See Basics above
Laptop .lap 1270px to 1025px 960px
Tablet Large .tbl 1024px to 811px 760px
Tablet Small .tbs 810px to 601px 540px
Mobile Large .mbl 600px to 401px 100% / Fluid
Mobile Small .mbs 400px and smaller 100% / Fluid
Using these prefixes

For instance, if you want to switch a column from .span6 to being full width on smaller tablet devices you'd add .tbsSpan12. Giving a full class string of class="column span6 tbsSpan12".

.span6.tbsSpan12
.span6.tbsSpan12
Offseting columns at breakpoints

Just like with .span's, stick a prefix onto any of the 12 offset classes to change an offset at that breakpoint.

Note:- There's also an .offset0 for all but desktop breakpoints.

Example:
<div class="row">
	<div class="column demo span2"><code>.column.span2</code></div>
	<div class="column demo span2"><code>.column.span2</code></div>
	<div class="column demo span6"><code>.column.span6</code></div>
</div>
<div class="row">
	<div class="column demo span6 offset2 lapOffset4"><code>.column.span6.offset2.lapOffset4</code></div>
</div>
.column.span2
.column.span2
.column.span6
.column.span6.offset2.lapOffset4

Display and Visibility

OH MY FERKING GAWD the dreaded display:none;. Get over yourself! Ready to move on?

Sometimes a bit of content needs hiding on smaller devices. It's just not needed / relevant or in the worst case you have to render if completely different for mobiles.

In that case we have several helper classes that use the prefixes already meantioned above.

None Block Inline-block Flex
Desktop .dispNone .dispBlock .dispInlBlck .dispFlex
Laptop .lapDispNone .lapDispBlock .lapDispInlBlck .lapDispFlex
Tablet Large .tblDispNone .tblDispBlock .tblDispInlBlck .tblDispFlex
Tablet Small .tbsDispNone .tbsDispBlock .tbsDispInlBlck .tbsDispFlex
Mobile Large .mblDispNone .mblDispBlock .mblDispInlBlck .mblDispFlex
Mobile Small .mbsDispNone .mbsDispBlock .mbsDispInlBlck .mbsDispFlex

Remember these inherit downwards so revealing content at Tablet Small using .dispNone.tbsDispBlock would have it visible at Mobile Large and Mobile Small. Similarly hiding something at Tablet Small with .tbsDispNone would again hide it at both Mobile sizes.

One of the most common uses for this is shortening long form dates to better fit on mobile devices so in the most convoluted example so far:

<p>
	<span class="mblDispNone">
		Fri<span class="lapDispNone">day</span> 
		18 Dec<span class="tblDispNone">ember</span> 
		<span class="tbsDispNone">20</span><span class="dispNone tbsDispInlBlck">'</span>20
	</span>
	<span class="dispNone mblDispInlBlck">18/12/20</span>
</p>

Friday 18 December 20'20 18/12/20

Reordering Content

It's not very often but sometimes we find the need to reoder content at different breakpoints. That left sidebar thats kinda handy on Desktop but just a pain in the ass for Mobile users? Reorder it using something like .mbsOrder2, get it out of the way (and then maybe even collapse it or do something else fancy).

Since you can't really, and probably won't need more than 12 columns in any one row, we've got .order1 through to .order12 and they each have their breakpoint prefixes.

Example:
<div class="row">
	<div class="column demo lapOrder6 tblOrder5 tbsOrder3 mblOrder3 mbsOrder2">Col 1</div>
	<div class="column demo lapOrder1 tblOrder6 tbsOrder5 mblOrder4 mbsOrder3">Col 2</div>
	<div class="column demo lapOrder2 tblOrder1 tbsOrder6 mblOrder5 mbsOrder4">Col 3</div>
	<div class="column demo lapOrder3 tblOrder2 tbsOrder1 mblOrder6 mbsOrder5">Col 4</div>
	<div class="column demo lapOrder4 tblOrder3 tbsOrder2 mblOrder1 mbsOrder6">Col 5</div>
	<div class="column demo lapOrder5 tblOrder4 tbsOrder3 mblOrder2 mbsOrder1">Col 6</div>
</div>
Col 1
Col 2
Col 3
Col 4
Col 5
Col 6

Buttons

We don'd like to dumb too much bloat into our framework, but a few things make life easier, such as a baseline for buttons. These live inside mrwdStyle.css and so are entirely intended to be rewritten, replaced or just plain deleted. At least it gives a baseline for all the properties and states you need to consider for a button.

Our default button styles apply very simply using either <a href="#" class="button"></a>, <button></button> or <span class="fauxBtn"></span> as you can see below. (FauxBtn could also be a <div>)

.button .fauxBtn

Ghost Buttons

We then apply additional classes to adjust our buttons to do different things. For instance we have a default outlined button called "ghost". To apply this to any of the three defaults just add .ghost.

.button.ghost .fauxBtn.ghost

Small Buttons

Alternatively, we can create smaller buttons very simply by adding the class .small. You could expand this easily by adding another class .smaller for even smaller buttons, or perhaps a class .large for bigger buttons.

.button .button .fauxBtn.small .fauxBtn.small

Icon Buttons

This one probably is going too far for the base framework but positioning the icon can be a faff so we've left them in. Again this uses the standard classes and adds a class of .icnBtn along with the child <svg> element to create buttons like so:

.button.ghost .button.ghost
.fauxBtn.ghost
.fauxBtn.ghost

Pagination

And lastly for buttons, who doesn't often need some sort of pagination interface. This uses the same standard .button class on the <a> tag but inherits a few extra bits and bobs from <ul class="pagination"> above it.


Typography

Everything in this section is just a starting point and designed to be rewritten, replaced or deleted. It can all be found in mrwdTypography.css.

This is a heading 1

This is a heading 2

This is a heading 3

This is a heading 4

This is a heading 5
This is a heading 6

Bold text

Italic text

This is a standard <p> paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is a paragraph with .txt-large class added to it serving as a simple introductory or emphasised paragraph.

Sit amet cursus sit amet dictum. Morbi inline hyperlink urna id volutpat lacus laoreet. Rhoncus mattis rhoncus urna neque. Elit at imperdiet dui accumsan sit amet. Neque vitae tempus quam pellentesque nec. Volutpat odio facilisis mauris sit amet massa. Tempus egestas sed sed risus. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.

Lorem ipsum dolor sit amet, .txt-upper consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl. Adipiscing elit duis tristique sollicitudin. Eu ultrices vitae auctor eu augue ut lectus arcu. Tristique risus nec feugiat in fermentum posuere urna. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Sit amet cursus sit amet dictum. Morbi tempus iaculis urna id volutpat lacus laoreet.

This is a blockquote lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Authors name and title

Forms

Here's all the base form elements and styles. Much like buttons, this probably goes a little over the top but there's a bunch of things we at Mohunky need to consider so this is a start point and saves us trying to remember and write it all from scratch.

If you want to reuse any of these form bits, use Element Inspector to reverse engineer them. Don't forget the SVG's which are probably hidden at the very bottom of the HTML.

Characters 0 / 500

Error states

Please supply at least 2 characters.
Please write fewer than 500 characters.
Characters 0 / 500

Link Down Arrow Check Mark

CSS: px
JS: px