by Daniel, on 10th Jan, 2014

Creating Responsive Content using HMTL/CSS - No Javascript required

Hi all,

First time I have blogged in quite a while. Forrk have had a very exiciting few months with our first Social App being released in early December which ended up trending on Twitter and receiving hundreds of thousands of uniques (Social Santa), anyway enough of the shameless plug. We are here today to discuss responsive content.

It's a tricky area, responsive design is now pretty much a standard accross the web and whilst we developers can easily hide and manipulate the positions of elements based on the users screen size it is difficult to actually change the content without using JS. Whilst working on a new website today I created a pretty cool trick in order to allow us to do that. I will explain how to implement this below, you can check out a live example here.

First up is the HTML - pretty basic I'm sure we can agree. 

Fashion discount copuons are the bomb. They work in a variety of ways, you can use them at most stores cause they are well cool and stuff. Some codes give you up to 50% off at some of the worlds top retailers.

We have a basic DIV with the class 'responsive-content' which contains a paragraph of text. The only thing out of the ordinary here is the attribute 'data-small' which contains the content we wish to display responsively. 

Now for the CSS. Again it is pretty basic stuff but I feel it definitely achieves what is needed whilst remaining as lightweight as possible. (Remember my CSS is actually SCSS and therefore classes etc are nested, you can easily replicate it in standard CSS by simply removing nesting)

.responsive-content
{
    &:after
    {
         display:none;
         content:attr(data-small);
    }
}


All we are doing here is creating a pseduo element :after and ensuring the content is that of its parent elements 'data-small' attribute. Now all that is left to do is show/hide the content based on screen size.

@media (max-width: 550px)
{
.responsive-content
{
    *
    {
        display:none;
    }
    &:after
    {
        display:block;
    }
}


This CSS includes a media query which comes into affect once the users viewport is < 550px. At this time we are instructing all children of the 'responsive-content' element to be hidden and the pseudo element created using the 'data-small' attribute to be shown.

You can see a live example of this in action here. If you have any questions you can always contact me on @ddarrko.




 

by Daniel, on 17th Sep, 2013

Building a Responsive Grid Generator with SASS

Hello All,

Today I thought I would dive right in and explain what I have been trying to achieve - which is creating my very own responsive grid layout with as little bloat as possible. There are many, many other grids, frameworks, libraries out there already such as bootstrap and Semantic UI. Both are brilliant frameworks and I thoroughly recommend them however responsive design is something I have been intrigued with for a long time and there is no better way to learn about something than by doing.

If you would like you can check out the demo or alternatively download the source files here.

When beginning this project I had only intended to build my own small (static) framework for use internally within the small team of developers/designers we have here @ Forrk however as I was writing my SASS I began tweaking/improving the code in such a fashion that it soon became possible to create any type of responsive grid by simply changing a few variables denoted at the beginning of the script. This enables me to use this base for all new projects without having to spend time customising the grid or spending an age cursing at the screen with frustration.

So without further adue please see below my full code. We will tackle the SASS/CSS first :

A good backbone

body, html
{
    margin:0;
    padding:0;
}
img
{
    max-width:100%;
}
.container
{
    max-width:1200px;
    margin:0 auto;
    min-height:1px;
}
.row
{
    width:100%;
    &:after
    {
        clear:both;
        display:block;
        content:'';
        line-height:0; 
    }
    [class*="block"]
        {
        display:block;
        float:left;
        margin-left:$margin;
        &:first-of-type
        {
            margin-left:0 !important;
        }
    }
}
Essentially this is the backbone of the grid. This is where the whole thing comes together. The '.container' element can of course be styled in any way you like. I have no fixed width but added a max-width to prevent gargantuan containers on larger screen resolutions but this is optional and you can remove a maximum option completely or even set a fixed width. The blocks (as I have named them are container inside a 'row' which spans the entire width of its parent. We also have the attribute selector [class*="block"] which targets any elements whose class attribute contains "block". Using this universal selector for "block" will save us time, code and therefore file size for our production CSS file. One other thing to note is the &:first-of-type selector which removes any margin from our first block. The important thing to note about this is that it will NOT work in IE8 or less, you could alternatively add a class of first to each first block and remove the margin using this selector. E.g
[class*="block"]
{
     .first
     {
            margin-left: 0 !important;
     }
}

Your subsequent HTML will look something along the lines of this (dependant on the number of columns you denote)

    
Block 5
Block 5

Calculating the widths

Here is where we do the smart stuff, generating the widths and margins for our grid. At the top of our SASS file I have two variables and a a function. The variables are completely interchangeable however it is important to remember abnormally large margins and a high number of columns may break your layout. A margin of around 1.5-3% is the equivalent of 20/30px on a standard size screen. Most popular frameworks use values within this range.

The reason it breaks the layout is simple, take the values of:

$columns : 33;

$margin: 5%;

Here we are saying we want 10 columns of equal width. So 100% / 33 gives us 3.03030303%, we then want a margin of 5% so this is removed from our width leaving us with -1.969696969697%. Now as each block increases in size this total is multiplied by the size of the block and a margin offset, which will infact by the second block return us to positive integers however it is safe to remember the below formulae to be safe.

$columns * $margin should never equate to more than 100 and should ideally remain below 70. This should leave ample amounts of flexibility and indeed it is certainly impossible to implement a responsive grid system where each block is of an equal (relevant) size & $columns * $margin equates to more than 100%.

Creating the grid

After the variables are set there is a function which calculates (from within a SASS) the relevant width of each block. I will not bore you with ins and outs as each line is commented for full explanations.

@function calculateBlock ( $number: 1, $margin: $margin)
{

    /* find base width of individual columns - set margin */
    $calc : (100%/$columns*$number)-$margin;
    
    /* divide margin by num of columns */
    $margin-divide: $margin/$columns;
    
    /* return width of block by base width calculated plus margin divisible * block number*/
    @return $calc + ($margin-divide*$number);

}
Now in order to actually create the blocks we need a simple SASS loop which creates a class with the name 'block+num' for however many columns you have set. Once the class is created we use the calculateBlock function explained above to return a percentage width :
    @for $i from 1 to $columns+1
    {
        $width : calculateBlock($i);
        .block#{$i} { width:$width }
    }

Responsive Media Queries

To complete the structure I have included (completely optional) media queries which slightly alter the grids behaviour at particular sizes. The SASS can be found below. Essentially what I am doing is setting the container to 85% width below a screen resolution of 1200px. At 800px or below I am decreasing the size of each block slightly and increasing the margins to help prevent content bunching. At 550px or below, which I think of as targeting mobiles (although targeting devices by screen resolution is certainly not fireproof) I set all blocks to span the entire width of the container. I add 20px padding either side to the container to center it and ensure content isn't pushed up against the edge of the screen.

@media (max-width : 1200px)
{
	.container
	{
		max-width:85%;
	}
}
@media (max-width: 800px)
{	
	@for $i from 1 to $columns+1
	{
		$halfWidth : calculateBlock($i, $margin * 1.75);
		
		.block#{$i} { width:$halfWidth; }
	}
	[class*="block"]
	{
		margin-left:$margin * 1.75 !important;
	}
}
@media (max-width: 550px)
{
	.container
	{
		width:100%;
		padding:0 20px;
	}
	[class^="block"]
	{
		width:100% !important;
		float:none !important;
		margin:0 0 0 0 !important;
	}
}

You can view my example grid here or alternatively download the source files here. Remember once you have downloaded them you only need to change the $column & $margin variables inside of the SASS, once compiled it will generate the relevant CSS grid for you.

by Daniel, on 12th Aug, 2013

Recreating the Facebook Mobile Menu effect

Hello all,

Been busy here @weareforrk HQ with lots of new client work (& our summer holidays) which explains the slight delay in our latest blog post. 

Today we are going to create a mobile menu in HTML/CSS and a tiny bit of JQuery. The mobile menu will function in the same way the Facebook mobile-app menu expands from the left hand side and pushes the main content out of the viewport. You can view it in action on Facebook by visiting http://m.facebook.com & you can check out our example here.

 

Lets begin with our HTML. (Start with a blank HTML template - I personally prefer http://html5reset.org/)

Below are the elements we will use to build our basic mobile menu:

 

    

Mobile Menu Example

  • Home
  • About
  • Contact

Now lets move onto the styling of the elements. I will start with the content container, for this element the styling is mostly dependant upon your needs. I have gone with a fluid width and a set height of 100% (height should be removed for non-demo purposes). The container is centered and has padding although this is calculated within the width by using box-sizing:border-box. The important CSS here is that the .content class has a position of relative.

 

    .content
    {
        width:75%;
        margin:0px auto;
        background:white;
        -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.05);
        box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.05);
        height:100%;
        text-align:center;
        box-sizing:border-box;
        position:relative;
    }

Next up we will style the actual mobile menu. Once again exact styles can be changed dependant on your needs, the only important styles that must be applied are those which position the element and ensure display is set to none by default. We will also create a class of active which will display the element when appropriate.

 

   #mobile-menu
    {
        position:absolute;
        left:0;
        top:0;
        width:70%;
        height:100%;
        z-index:100;
        -webkit-box-shadow: inset -25px 0px 15px -25px rgba(0,0,0,0.2);
        box-shadow: inset -25px 0px 15px -25px rgba(0,0,0,0.2);
        display:none;
    }
    #mobile-menu.active
    {
        display:block;
    }

Now we have built our basic page we need to style the element which will trigger the mobile menu when clicked. This is contained in the .top-bar element. This element is once again hidden and only becomes visible using media queries when our screen is less than a certain width. I have this set to

   .top-bar
 {
 display:none;
 width:100%;
 background:#2f2f2f;
 color:white;
 padding:10px 0 10px;
 z-index:100;
 text-align:left;
 }

So to recap we have a standard container for our content. A top bar which becomes visible when the site is viewed in a device with a low enough screen resolution and a mobile menu which is placed absolutely to the left of the page and hidden with display:none

Now we have to use some JQuery to make the mobile menu visible when the user clicks our 'open menu' link. The JQuery is below and is very simple. All we do is listen for a click event on the relevant DOM element and check if the mobile menu has a class of active. If it does not then show the menu and force the main container out of view, if it does then rehide the menu and move the container back.

   
 $('.mobile-interact').click(function()
 {

    if($('#mobile-menu').hasClass('active'))
    {
        $('#mobile-menu').removeClass('active');
        $('.content').css('left', '0%');
    }
    else
    {
        $('#mobile-menu').addClass('active');
        $('.content').css('left', '70%');
    }

 });

And that's about it. You can style this however you want. Don't forget if you have any questions about this tutorial you can always tweet us @weareforrk. The demo can be found here. (Remember you will need to resize your browser window (or view on mobile) if you wish to actually see the effects, this is after all a mobile tutorial)

by Daniel, on 5th Jul, 2013

Short Twitter Usernames

Hello

As advised in my previous post I have been scouring (not manually) for short Twitter usernames. Good news! I have found some & have two four character Twitter usernames which I am willing to give away.

All you have to do to win one is tweet this article and follow @weareforrk.

I will pick the winners randomly and tweet them on Monday!

Good luck!

by Daniel, on 5th Jul, 2013

10 Yetis - Facebook Competition Tab

Forrk were asked by 10Yetis to create an interesting and dynamic competition page tab for their Facebook page. 10Yetis has over 4,000 likes on Facebook so it was important the tab worked well to engage exisiting users as well as attract new 'likes'.

The brief was a short one (always difficult) - we were just informed it was to be a competition page tab based on Social Media Survival.

The below is what we came up with in full:

 

 

As you can see we intrepreted Survival and came up with a cool and quirky 'at sea' scene complete with textured backgrounds to give depth. 

request a callback

Why not check us out on some of our social networking accounts. Alternatively, if you would prefer to contact us directly, you can always drop us a line below or on hello@forrk.co.uk or tell us about your project and get a quote.

GET A QUOTE Back to top