Gossamer Forum: Products: Gossamer Links: Discussions: Display on SmartPhones

Apr 2, 2013, 6:13 AM

Sies

User (72 posts)

Apr 2, 2013, 6:13 AM

Post #1 of 5

Shortcut

Display on SmartPhones

I need a template set for SmartPhones
What do change on Luna templates css to make it display properly

Apr 2, 2013, 6:34 AM

Andy

Veteran / Moderator (18441 posts)

Apr 2, 2013, 6:34 AM

Post #2 of 5

Shortcut

Re: [Sies] Display on SmartPhones In reply to

Hi,

You really want to use something like Bootstrap to do a whole different design using responsive layouts:

http://twitter.github.com/bootstrap/

I use this on quite a few projects now. You just need to get your head around the span/row bits, and then it does the rest. Here is an example of a site I've done using GLinks + Bootstrap:

http://waaaant.com/

If you resize your window, you should see it re-set the layouts when you get to certain points. You can do this using just min / max width CSS styles, but I prefer bootstrap due to the fact it comes ready to use (even for a relative novice), and will still look great on almost all devices.

Hope that helps.

Cheers

Andy (mod)
andy@ultranerds.co.uk

Apr 2, 2013, 6:51 AM

Sies

User (72 posts)

Apr 2, 2013, 6:51 AM

Post #3 of 5

Shortcut

Re: [Andy] Display on SmartPhones In reply to

Thanks, I looks Good.
I don't understand what you mean about ( head around the span/row bits)

Apr 2, 2013, 6:56 AM

Andy

Veteran / Moderator (18441 posts)

Apr 2, 2013, 6:56 AM

Post #4 of 5

Shortcut

Re: [Sies] Display on SmartPhones In reply to

Hi,

I just mean stuff like:

Code:
<!-- this will center the content, fixing to a max width + auto left/right margins --> 
<div class="content"> 

    <div class="row-fluid span12"> 
            this is your header bit 
    </div> 

    <div class="row-fluid"> 
        <div class="span3"> 
            left bar goes here 
        </div> 
        <div class="span9"> 
            main content goes here 
        </div> 
    </div> 

</div>

That would give you a central wrapped block (980px I believe), then another row with a 3 span (responsive, depending on your screen size) , and then a span9 (again, scaled depending on your screen size).

Your best bet is to play around with Bootstrap, and then see what you can come up with (as a basic HTML page first). Once you have a design you are happy with - then start going about making a new template set for GLinks (which you can test using page.cgi?t=new_set_name)

This probably explains the whole grid system better than I could: http://twitter.github.com/...rap/scaffolding.html

Hope that helps

Cheers

Andy (mod)
andy@ultranerds.co.uk

Apr 2, 2013, 8:23 AM

Sies

User (72 posts)

Apr 2, 2013, 8:23 AM

Post #5 of 5

Shortcut

Re: [Andy] Display on SmartPhones In reply to

Hope that helps, Yes it does. Thanks