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 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

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