Skeleton CSS - how to span the width of the screen?

StackOverflowNewbie picture StackOverflowNewbie · Apr 30, 2012 · Viewed 16.8k times · Source

I'm looking at www.getskeleton.com. My header and footer are supposed to span 100%. Can I do this without "breaking" the framework? Or am I supposed to restrict my layout to 960px?

Answer

Micahlynn picture Micahlynn · Oct 13, 2012

I realize this is an older post, but I wanted to add my solution in case others in the future need the info:

Yes, you can make a multi-width layout still using Skeleton. I took the Skeleton framework and also adapted some CSS/html from the "Magazine." sample site to meet my needs.

------ HTML CODE - Put in between 'Body' tags -------------

<div id="top">
    <div id="top-nav">
        <nav class="top-subnav">
            BUTTON · BUTTON · BUTTON · BUTTON · BUTTON · BUTTON · BUTTON · BUTTON
        </nav>
    </div>
</div>    

<div class="container">

    <header>
       <div class="three columns">
            <!-- LOGO --><img src="#" alt="Description"> 
       </div>
       <div class="thirteen columns">
            <nav class="main-nav">
                <ul class="main-nav">                            
                    <li>BUTTON</li>
                    <li>BUTTON</li>
                    <li>BUTTON</li>
                    <li>BUTTON</li>
                    <li>BUTTON</li>
                </ul>
            </nav>
       </div>
    </header>   


    <div class="sixteen columns">
        <!-- Feature Banner image -->
    </div>

    <!-- ===== MAIN BODY ====== -->    

    <!-- LEFT COLUMN ---------- -->        
    <div class="four columns">
        <!-- Left column content goes here -->    
        <ul>                            
            <li>BUTTON</li>
            <li>BUTTON</li>
            <li>BUTTON</li>
            <li>BUTTON</li>
            <li>BUTTON</li>
        </ul>
    </div>   


    <!-- CENTER COLUMN ---------- -->        
    <div class="eight columns">
        <!-- Center column content goes here -->
        <h3>Main Title</h3>
        <h5 class="eventTitle">Article Title</h5><br />
        <p class="eventDetail">October 8, 2012 · 5pm - 8pm</p>
        <p class="eventDescrip">Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.
        </p>                                                                
    </div>


    <!-- RIGHT COLUMN ---------- -->        
    <div class="four columns">
        <!-- Right column content goes here -->
        <form class="search clearfix">
            <input type="search" placeholder="eg: Website Design" value="">
            <button type="submit">Search</button>
        </form>

        <form class="search clearfix">
            <input type="search" placeholder="[email protected]" value="">
            <button type="submit">Sign-up</button>
        </form>
    </div>
</div>


    <!-- ===== FOOTER ====== --> 

<div class="footer">    

        <footer class="container">
            <div class="four columns">
                <header><h6>Sample Title</h6></header>
                    <ul>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                    </ul>
            </div>


            <div class="four columns">
                <header><h6>Sample Title</h6></header>
                    <ul>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                    </ul>
            </div>

           <div class="four columns">
                <header><h6>Sample Title</h6></header>
                    <ul>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                    </ul>
            </div>


            <div class="four columns textRight">
                   <span class="contactTitle">Business Name</span> <br />
                   12345 Main Road<br />
                   City, CO 80334<br />
                   (505) 555-5555<br />
                   Contact Us
            </div>

        </footer>
</div>

<div id="Credits">
Website Design by Dominical Design & Development · www.dominicaldesign.com · Indian Hills, Colorado
</div>

==================================================

...... then .......... add the following CSS code to your standard Skeleton "layout.css" file

------- CSS CODE ---------------------------------

* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
}

body    {
color: #333333;
padding: 0px;   
    }

img {
max-width: 100%;
}


#top    {
width: 100%;
background: #069;
border-bottom: 3px solid #FC6;
padding: 8px;
margin: 0px;
}

nav.main-nav    {
text-align: right;
font-size: 12px;
padding: 110px 0px 0px 0px;
color: #666666;
}

nav.top-subnav  {
font-size: 11px;
color: #f6f6f6;
text-align: center;
}

nav.main-nav ul li {
display: inline;
list-style-type: none;
padding-left: 20px; 
}

#Feature-Banner {
width: 100%;
margin: 0px 0px 20px 0px;
}

.footer {
width: 100%;
background-color: #063;
color: #f6f6f6;
margin: 20px auto 0px auto; 
padding: 20px 0px;
font-size: 10px;
line-height: 18px;
}

.footer ul li   {
margin: 0px 0px 0px 15px;
line-height: 16px;
font-size: 10px;
}

.footer h6 {
color: #CCC;
margin: 0px 0px 5px 0px;    
}

.textRight  {
text-align: right;  
}

.contactTitle   {
font-weight: bold;
font-size: 11px;
}

#Credits    {
width: 100%;
font-size: 11px;
background-color: #033;
color: #cccccc;
text-align: center; 
padding: 20px 10px;
letter-spacing: 0.09em;
border-top: 1px solid #444444;
}

==========================================

That should give you the following:

Full width color bar at top, with option to add link/navigation in it Header area for logo, main navigation, banner/feature graphic 3-column centered layout for the body Full-width footer and credits bar down below

Hope this helps someone out there! Share the knowledge! :) ≈