Headerlabs Blog

Stylus Css needs a hero

Expressive, dynamic, robust CSS

In stylus no need omit braces, semi-colons, stop drop the columns, keep thing dry, keep transparent mixins.

Simple paste it in terminal to install stylus    $ npm install stylus

Stylus is different from css like:-

In CSS = body{ font: 12px Helvetica, Arial, sans-serif;}

In Stylus = body font: 12px Helvetica, Arial, sans-serif;

---

Cross browser styling

Why we use ( * ) and ( _ ) in css

In CSS ( * ) renders for IE7 

In CSS ( _ ) renders for IE6 

like:-

color: red; :- for all latest browser

*color: green :- Specially for IE7

_color: yellow :- Specially for IE6

---

Title styling using css like tooltip

In css You can style the title like tooltip like:-

.tool_Tip {position: relative;}

.tool_Tip:hover:after {
        content: attr(title);

        padding: 4px 8px;
        color: #333;
        position: absolute;
        left: 0;
        white-space: nowrap;
        z-index: 99px;
        background: #F3F3F3;
        border: 1px solid #ccc;
        border-radius: 3px;
        word-break: break-all;
}

---

Calculate div height according to window height 

function handleResize() {
var h = $(window).height();
        $('#inboxr_container, .pullme').css({'height':h+'px'});
}
$(function(){
        handleResize();
        $(window).resize(function(){
        handleResize();
    });
});

---

Add Class/Remove class and animation using jquery

More than one class add at a time, separated by a space like :-

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

Animation errors using jquery like:-

$("#reminder_message_show").delay(5000).animate({"right" : "-200px"});