2012

Thursday, June 14, 2012

Simple-expand: simple jQuery plug-in to expand/collapse elements

Simple-expand, as its name implies, the simplest collapse/expand solution I could think of. It works out of the box without any configuration. All you need is:

<a class="expander" href="#">click me</a>
<div class="content">
    content to show/hide.
</div>

And one line of javascript:

$('.expander').simpleexpand();

View Demos

Tuesday, May 29, 2012

Responsive full height (equal height) columns using the faux columns css technique

Source code on GitHub

First things first, here is the source code.

View project on GitHub

Introduction

In this tutorial I'll show you how to create responsive full height columns using the "faux columns" technique.
There are 3 main concepts in that:

Full/Equal height: When you float an element, its height is equal to its content; not to its "context". This causes a problem if you want a sidebar that has a different background-color than the main area because the background will not extend to the same height as the other column(s).
Faux column technique: This is a technique that uses a background-image to create an effect that looks like the column extends to the full height. This technique has been documented several times but this article is a bit different because of the following point.
Responsive: With responsive design, the width of the page set to a fixed size (such as 960px). Instead the content of the page adapts as your make your browser window wider or narrower.

So this tutorial is about using the faux column technique but with the necessary tweaks to make it work in a responsive layout.

The HTML:

The page has a header div, a main div and a footer div. The main div has an article div and a sidebar div on the right side.

<body>
    <div class="page">
        <div>
            header 
        </div>
        <div class="main clearfix">
            <div class="article">
                Main content
            </div> 
            <div class="sidebar">
                sidebar
            </div>
        </div>
        <div>
            Footer
        </div>
    </div>
</body>

The CSS:

1 - Define the clearfix class to help us clear the float.

There are several ways to clear floats. The technique I use here it the one used in the HTML 5 Boilerplate project. See this blog post to learn about that specific technique.

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }

2 - Define the two columns using a 70/30 ratio.

.article {
    float:left;
    width:69%;
    padding-right:1%;
    overflow:hidden;
}

.sidebar {
    float:right;
    width:28%;
    padding-left:1%;
    padding-right:1%;
    overflow:hidden;
}

Setting the overflow to hidden is not mandatory but I think it looks better when you resize the browser so small that content cannot be wrapped.

3 - Add the faux column effect by setting a background image

This is the key part.

.main {
    background: url(opaque-0.70-5000.png)  
                repeat-y                   
                70%                        
                top;                       
}

Note that:

The background image is set for the main div; not the sidebar div.
The background image is 5000px wide by 1px high.
The width of the image determines the maximum width that your page will support; beyond that point the faux column effect will break (you can use a larger image if you want but 5000px is really wide).
The height of the image does not matter. If you use an opaque color, then 1px is enough. If you want to use a pattern then you can use a taller image.
In the image, the column start at 70% of the width of the image, at pixel 3500 (5000 * 0.7 = 3500).
The 70% value in the css is the position of the image. Use the same value as the ratio.

This works with any image width. The only thing that matters is you have to start the column effect at the right pixel. For example, if you have a 3000 pixel wide image, your column effect should start at pixel 2100 (3000 * 0.7 = 2100). This example does not fill the right side; there is just 1 pixel at position 2100, which create a vertical line.

.main {
    background: url(line-0.70-3000.png) 
                repeat-y                  
                70%                       
                top;                      
}

4 - Set a max width for page and add some spacing

As stated in the previous step, the width of the image determines the maximum width the page support. To ensure it will not break beyond that point I set a max-width on the page div. If you don't like the way your site looks when it is very wide, you can set a max-width of 1600px (that's what I usually do).

.page {
    width:75%;         
    margin:auto;       
    max-width:5000px;  
}

5 - Responsive with media queries

You can use css media queries to change the ratio of the columns based on the browser width and for the faux column to work, you will have to change the background image too. For example, if you want a 75/25 ratio when the page is narrower than 600px, you have to:

Create a background-image with a ratio of 75/25. For a 600px wide image, the column must start at pixel 450 (6000 * 0.75 = 450).
Add media query, change background-image and change the column ratio:

@media screen and (max-width: 600px)
{
    .page {
        width:95%;          
        margin:auto;        
        max-width:600px;              
    }
                
    .main {
        background: url(opaque-0.75-600.png)
                    repeat-y               
                    75%                    
                    top;                   
    }

    .article {
        float:left;
        width:74.5%;
        padding-right:0.5%;
    }

    .sidebar {
        float:right;
        width:24%;
        padding-left:0.5%;
        padding-right:0.5%;
        overflow:hidden;
    }
}

Conclusion

I learned a lot in the process of writing this post. I don't consider myself an expert on the matter. Don't hesitate to leave comments if you think the solution can be improved and I will update the post accordingly.

Don’t forget that you can browse the code on GitHub.

Tuesday, May 22, 2012

Build Twitter Bootstrap on Windows

This post is written using these tools and libraries: Twitter Bootstrap 2.0.3 | nodejs version 0.6.18 | lessc nodejs module version 1.3.0 | uglifyjs nodejs module version 1.2.6.

Intro
In this very short post I explain how to build twitter bootstrap on windows.

1 - Get the source from github
If you go to the Twitter Bootstrap main page there are several download options. In this case you want to download the source code. Click the View project on GitHub button or visit https://github.com/twitter/bootstrap/ and download the latests version using the ZIP button (or clone the repo using git). Extract the ZIP.

2- Install nodejs and the necessary modules
2.1 - Install nodejs (see Install Node on Windows with NPM tutorial)
2.2 - Open a command prompt and CD to the folder where your extracted the source
2.3 - Install lessc: npm install lessc
2.4 - Instal uglifyjs: npm install uglify-js

3 - Create make.bat
Create make.bat at the root of the folder where you downloaded the source. Please note that the batch file deletes and recreates a "build" in your working folder. I know this version is not as complete as the real makefile but that is what I use now.

make.bat

@echo off

rd build /s /q

mkdir build\img

mkdir build\css

mkdir build\js

copy  img\* build\img

call  .\node_modules\.bin\lessc -x less\bootstrap.less > build\css\bootstrap.min.css

copy /B js\bootstrap-transition.js+js\bootstrap-alert.js+js\bootstrap-button.js+js\bootstrap-carousel.js+js\bootstrap-collapse.js+js\bootstrap-dropdown.js+js\bootstrap-modal.js+js\bootstrap-tooltip.js+js\bootstrap-popover.js+js\bootstrap-scrollspy.js+js\bootstrap-tab.js+js\bootstrap-typeahead.js build\js\bootstrap.js

call .\node_modules\.bin\uglifyjs --ascii bootstrap\js\bootstrap.js > build\js\bootstrap.min.js

4 - Try it using one of the examples from the Twitter Bootstrap examples page

4.1 - Run make.bat
4.2 - Save one of the twitter bootstrap examples by right clicking on it and selecting "Save as link..." and save it to your source folder.
4.3 - Open the example file in your favorite text editor.
4.4 - Locate this line <link href="../assets/css/bootstrap.css" rel="stylesheet"> and replace it with <link href="/css/bootstrap.min.css" rel="stylesheet">
4.5 - Locate this line <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> and replace it with <link href="/css/bootstrap-responsive.min.css" rel="stylesheet">

4.6 - Locate the scripts a the bottom of the file

4.7 - Replace the reference to jquery with: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

4.8 - Replace all references to individual bootstrap javascript files by a single reference to bootstrap.min.js: <script src="/js/bootstrap.min.js"></script>

4.9 - Open the file in your Web browser.

Hope this helps

Thursday, May 17, 2012

Install Node on Windows with NPM tutorial

This post is written for nodejs version 0.6.18.

Intro:

It took me a while to figure out a few things after installing node so this is just a few notes to help you get started.

Steps:

- Download and install node from http://nodejs.org

- Open a command-line in window using Run As Administrator

- make a test folder and go to that folder: c:\node_test\

- Create a hello world script: echo console.log("Hello World") > hw.js

- Run the test: node hw.js
Expected output: Hello World
Check: If you see an error here, something is wrong with your nodejs installation. Check your path maybe...

- Enter npm install less to install the less module. It does not really matter what module you install, this just proves that the package manager called NPM works.
Expected outcome: NPM downloading modules
Check: If you see an error here, something is wrong with your nodejs installation or with NPM.

- Your working directory should have a folder node_modules and a sub folder less.
Check: If you don't have those folders then something is wrong with where NPM installs modules.

- To test the module: node node_modules\less\bin\lessc -help
Expected output: a help message from less
Check: If you get an error, something is wrong with where or how NPM installs modules.

If you got to this point without any errors, you are good to go.

I hope this helps

- Sly

code that works