Web Tutorial: Christmas-themed LESS Demo (Part 4/4)

We're at the final part of this tutorial, and we will get the blue theme up for this one, and use some more LESS in the process. (More LESS, geddit? Hur hur)

As before, make a blank copy of the CSS class theme_green and name it theme_blue. This one will be a centered single-column layout.

styles.less

/*GREEN*/
@green_content_background: rgba(100,255,100,0.7);
@color_green_text: rgba(0,0,0,0.8);

.theme_green
{
    font-family:arial;
    font-size:1.2em;

    .container
    {
        width:100%;
        height:100%;
        background: url(../img/bg_green00.jpg);
        background-repeat:no-repeat;
        background-position:left top;
        background-size:20%;
    }

    .header_wrapper
    {
        width:100%;
        height:20%;
    }

    .body_wrapper
    {
        width:100%;
        height:65%;
    }

    .footer_wrapper
    {
        width:100%;
        height:15%;
        background: #FFFFFF; /* Old browsers */
        background: -moz-linear-gradient(top, #FFFFFF 0%, @green_content_background 41%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #FFFFFF 0%,@green_content_background 41%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #FFFFFF 0%,@green_content_background 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='@green_content_background',GradientType=0 ); /* IE6-9 */
    }

    .content_wrapper
    {
        width:95%;
        padding-top:2%;
        padding-bottom:2%;
        .centered;
    }

    .content
    {
        .rounded_corners(2em);
        border:0.5em solid darken(@green_content_background,50%);
        background-color: darken(@green_content_background,10%);
        color:@color_green_text;
        width:75%;
        .centered;
        padding:1em;
    }

    .header
    {
        width:80%;
        height:20%;
        .centered;
        text-align:center;
        font-size:6.5em;
        font-family: impact;
        color:darken(@green_content_background,50%);
    }

    .content1
    {
        width:100%;
        .content;
    }

    .content1:after
    {
        display:block;
        content:"";
        clear:both;
    }

    .content1 p
    {
        float:left;
        margin-left:2em;
    }

    .content2
    {
        width:100%;
        margin-top:1em;
        .content;
        .centered;
    }

    .content3
    {
        width:100%;
        height:150px;
        background-image:url(../img/bg_green01.jpg);
        background-repeat:no-repeat;
        background-position:right center;
        background-size:contain;
        margin-top:-10%;
        margin-right:-10%;
    }

    .footer
    {
        margin-top:1em;
        color:@color_green_text;
        font-size:0.7em;
    }
}

/*BLUE*/

.theme_blue
{
    .container
    {

    }

    .header_wrapper
    {

    }

    .body_wrapper
    {

    }

    .footer_wrapper
    {

    }

    .content_wrapper
    {

    }

    .content
    {

    }

    .header
    {

    }

    .content1
    {

    }

    .content2
    {

    }

    .content3
    {

    }

    .footer
    {

    }
}

Start by declaring four variables that we'll use later: color_blue_overlay, color_blue_content_background, color-blue-border and color-blue-text. They're all different shades of blue or grey. Within theme_blue, set the font to Verdana. Y'know, just for variety.

styles.less

/*BLUE*/
@color_blue_overlay: rgba(50,50,100,0.7);
@color_blue_content_background: rgba(255,255,255,0.8);
@color-blue-border: #4444FF;
@color-blue-text: #AAAAFF;

.theme_blue
{
    font-family:verdana;

Now, for this theme, we will set the entire screen to use the image shown below as the background.

bg_blue00.jpg

styles.less

.theme_blue
{
    font-family:verdana;

    background-image:url(../img/bg_blue00.jpg);
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:cover;

Ain't she a beauty? But wait, there's more.

Now, set the container class to use centered as a mixin, make the width 70% of screen width and the height 100% of screen height. For the background, use the variable color_blue_overlay.

styles.less

    .container
    {
        width:70%;
        height:100%;
        background-color: @color_blue_overlay;
        .centered;
    }

Got that? Good.

Now for the header_wrapper, body_wrapper and footer_wrapper classes, specify a 100% width for all of them, and varying heights. Use the darken() function with the color_blue_overlay variable as an argument for the background colors of header_wrapper and footer_wrapper, with different percentages.

styles.less

    .container
    {
        width:70%;
        height:100%;
        background-color: @color_blue_overlay;
        .centered;
    }

    .header_wrapper
    {
        background-color: darken(@color_blue_overlay,50%);
        width:100%;
        height:20%;
        text-align:center;
    }

    .body_wrapper
    {
        width:100%;
        height:70%;
    }

    .footer_wrapper
    {
        background-color: darken(@color_blue_overlay,10%);
        width:100%;
        height:10%;
    }

A bit messy. We'll be cleaning that right up.

This should help. A bit of padding goes a long way.

styles.less

    .content_wrapper
    {
        width:98%;
        padding-top:1%;
        padding-bottom:1%;
        .centered;
    }

Now, style content with a blue border using the variable color-blue-border and a background using the darken() version of color_blue_overlay, and set the text color to the variable color-blue-text. Add some padding and use the rounded_corners() function we created, for good measure. Then use content as a mixin in content1 and content2. content1 and content2 will float left and right respectively.
styles.less

    .content
    {
        border:2px solid @color-blue-border;
        background-color: darken(@color_blue_overlay,10%);
        color:@color-blue-text;
        padding:1em;
        .rounded_corners(0.5em);
    }

    .header
    {

    }

    .content1
    {
        width:35%;
        float:left;
        font-size:0.85em;
        .content;
    }

    .content2
    {
        width:55%;
        float:right;
        .content;
    }

Looking prettier now.

Now style the header class. Use the lighten() function on the variable color_blue_overlay. That's a new one, eh?

styles.less

    .header
    {
        font-size:5.5em;
        font-family:verdana;
        color: lighten(@color_blue_overlay,50%);
        font-weight:bold;
    }

Merry Christmas!

Now start styling the footer too.

styles.less

    .footer
    {
        color:lighten(@color-blue-text,10%);
        font-size:0.7em;
    }

Here you go.

Finally, let's stye content3. Use the image below.

bg_blue01.png

styles.less

    .content3
    {
        width:400px;
        height:400px;
        float:right;
        background-image:url(../img/bg_blue01.png);
        background-repeat:no-repeat;
        background-position:center center;
        background-size:contain;
    }

Not bad. Not bad at all!

Have fun switching between themes. Today's web tutorial was meant to illustrate how useful LESS can be when dealing with nested CSS classes. Lots of reusability there.

Wishing you a very Red Green Blue Christmas!
T___T