Using Recess - CSS Hinter on Windows

Perhaps the best CSS hinter I've ever used , in reality it's the only one I have ever used . It open sourced a few years back and hardly ever got noticed .

A hinter basically is a piece of code that formats the ugly looking code keeping it tidy and consistent .
This post outlines the process of using Recess on a windows set up .
NOTE : You'll need to have Node.js installed.

After installing Node.js , search for cmd . And select the one which says Node.js command prompt . Get it?

Now recess is stored in a web Node Package archive known as the Node Package manager .

And the syntax for installing Node packages is

npm install -g [ package name ] 

So for installing recess we'll type

npm install -g recess

You'll see the comand prompt buzzing with a dozed of  http get requests , so if you have a slow internet connection sit back and relax .

After installing RECESS there are a couple of things that you can do with it , major ones being compiling
it,checking for errors , style sheet flow etc.

Using RECESS

NOTE: All this is done within the Node.js command prompt

The general syntax is

 recess [ path ] --[options]

You can specify the following options

•  noIDs - Don’t style IDs like #foo
•  noJSPrefix - Don’t style .js- prefixed classnames
•  noOverqualifying - Don’t overqualify your selectors, like div#foo.bar
•  noUnderscores - Don’t use underscores when naming classes, like .my_class
•  noUniversalSelectors - Don’t use the universal selector, *
•  zeroUnits - Don’t add the unit to a value of 0, like 0px
•  strictPropertyOrder - Enforce a strict property order (order defined here)

•  help - provides a quick cli cheatsheet
•  compile - outputs your compiled source
•  includePath - additional directory to look in for relative LESS imports (repeat for each additional directory)
•  compress - outputs your compiled source, but minified
•  watch - watch a directory and automatically compile a file when changes occur

Feel free to flood the comments section.

Recreating & Playground

If you have already come across Dribbble , you certainly have noticed the hover effect on the popular shots . The image blanks out , and all you can see are the comments put up by the dribbblers along with the post title and the date. Quite subtle , so we decided to recreate this effect .
The idea is to set the text matter's opacity to 0 and on hover to 1 .But it takes much more than this to get this perfect effect . Clever element posistioning , and a little bit of math ( tiny little bit ) .

THE MARKUP

<div class="blah">

            <img alt="Main" src="http://cl.ly/VvpM/ren.jpg" />

            <aside>

            <h1><strong>Dribbble Shot</strong></h1>

            <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.</p>

                <h7>Monovalent</h7>

            </aside>

        </div>

We've wrapped the whole text- content inside an aside tag , as we'll need to change the opacity of the content only , hence an extra wrapper.

CSS

.blah{

    display: :block;

    margin:0 auto;

    margin-left:150px;

    margin-top:100px;

    float:left;

    max-width:500px;

    border: 9px solid #fafafa;

    height:350px;

    background-color:#fafafa;

    border-radius:5px;

    box-shadow: 0 1px 0.5px #b1b1b1;

}

aside{

    vertical-align: baseline;

    position:absolute;

    opacity:0;

    margin:0 ;

    padding:10px;

    z-index:3;

    max-width:100%;

    width: 380px;

    height: 280px;

    float:left; 

    transition: all 0.2s ease-in-out;

}

aside:hover{

    transform:all 0.2s ease-in-out;

opacity: 1;

    background-color: #fafafa;

}

h7,p,strong{

background-color:transparent;

    margin: 40px;

    margin-top:50px;

}

h1{

    background-color:transparent;

    font-family:'HelveticaNeue';

    font-weight: 1000;

    color:#363636;

}

h7{

    position:relative;

    color:#969696;

}

p{

color:#313131;

}

img{

    float:left;

    transition: all 0.2s ease-in-out;

}

img:hover{   

opacity:0.2;

}

Illustration by Artcore

Now since the image content has to lie on top of the image , we add a positive z-index to it , and not negative or I guess we could also use the :after property to achieve this.

A bit about position:absolute 

This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relatively to the page itself.The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. It's overuse or improper use can limit the flexibility of your site.

Take a look at the final demo .