We continue on our journey of Learning LESS today as we take a look at Nested Rules in LESS, which will help you write extremely clean code. If you haven’t read our first three posts on the topic, check out Learning LESS: An Introduction, Learning LESS: Variables and Learning LESS: Mixins.

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

Now we jump into Nested Rules, a topic that can be somewhat difficult to conceptualize, but we’ll break it down with great code examples and some diagrams.

What Do You Mean ‘Nested’?

I’m sure you’ve heard of ‘nesting’ in code, probably referring to nested tables in old table design websites (or current table design HTML emails). With LESS, we’re basically doing the same concept of nesting rules within other rules.

Let’s set up an example. You’re coding a website and you’ve got a paragraph rule. In addition to your standard paragraph tag, you also have classes for an intro paragraph and a highlighted paragraph. For this scenario, let’s say that you’re going to set the standard paragraph with a basic sans-serif font, general font size, line height, etc. Here is what our CSS looks like (note, this isn’t going into our LESS file – this is just for example):

p { color: #232323; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; }

Pretty standard, so far. For your intro paragraph class, you set the font size to be a little bit bigger and have the text be small caps. And for the highlighted paragraph, we’ll make the text a bold blue. Don’t ask me why you would want to do this in terms of modern design – I’m just trying to come up with creative examples!

So in CSS, you would write those classes like this:

p { color: #232323; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; } p .intro { font-variant: small-caps; font-size: 16px; line-height: 24px; } p .highlight { color: #00214D; font-weight: bold; }

The code isn’t super lengthy, but mostly because this is a basic example. But the LESS for this is even – well – less.

Writing A LESS Nested Rule

We’re going to replicate the code we wrote above using LESS and nested rules. A LESS nested rule starts like a regular rule. For this, we’ll also use variables, just to drill in the concept.

To start, we look at our basic paragraph tag:

// Variables // --------- @textColor: #232323; @textHighlight: #00214D; @fontFamily: Helvetica, Arial, sans-serif; @fontSize: 14px; @lineHeight: 21px; @introSize: 16px; @introLineHeight: 24px; @introFontVariant: small-caps; // LESS for Paragraph // ------------------ p { color: @textColor; font-family: @fontFamily; font-size: @fontSize; line-height: @lineHeight; }

Now we’re going to nest in the .intro class. To do this, we simply create the class as we normally would, but we include the class inside the curly braces of the paragraph rule.

// Variables // --------- @textColor: #232323; @textHighlight: #00214D; @fontFamily: Helvetica, Arial,...

In the first part of this tutorial, detailed information was provided on utilizing RSS (Really Simple Syndication) coding to incorporate free news content and links into any web page.

It is recommended that you review Pt. 1, because it explains more about RSS and reveals how to integrate a basic newsfeed module using Google Feed API.

The goal of this tutorial is to furnish instructions on adding a larger news content module, a horizontal newsfeed, and a list-format style feed.

Let’s get started. The idea of incorporating free news content links into your website, blog, or online newsletter may sound intriguing, but you might want it to occupy a larger designated area than required for a small, four-link module. Also, rather than manually changing the RSS coding to accommodate different news sources, you’d prefer to list a number of them all at once. The perfect solution is a multiple-source newsfeed.

Vertical Newsfeed Module

To set the feed up, copy the coding below into the Head section of any web page. The entire set of lines should be slotted beneath the Title and Meta Tag areas, and just in front of the closing Head tag:

<style type="text/css"> @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css"); #feedControl { margin-top : 20px; margin-left: auto; margin-right: auto; width : 440px; font-size: 16px; color: #9CADD0; } </style> <script src="https://www.google.com/jsapi/" type="text/javascript"></script> <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script> <script type="text/javascript"> function showControl() { var feeds = [ {title:'CNN', url:'http://rss.cnn.com/rss/edition_world.rss'}, {title:'NY Times', url:'http://feeds.nytimes.com/nyt/rss/World'}, {title:'Reuters', url:'http://feeds.reuters.com/Reuters/worldNews'}];...

The WordPress platform allows you to modify, customize and enhance your existing website easily. You don’t need to change the core program but rather you can create or modify existing plugins to add the extra functionality that you need. This flexibility in customizing your WordPress installation is provided by the WordPress Plugin API.

There are already hundreds of WordPress Plugins on various WordPress Plugin repositories on the Web where you can download and install. If you cannot find a plugin of your choice, this article will introduce the basics of developing your own plugin for WordPress.

Know the Environment

The first thing you want to do is get familiar with the WordPress environment. This includes how files and folders are organized and arranged and how they are referenced from the WordPress interface.  Since PHP is the language used for Plugin development, having PHP programming experience is a prerequisite. Plugins in WordPress are located inside the folder below:

wp-content/plugins

Create a folder for your plugin. We shall name it “Author”. This is where your plugin PHP and JavaScript code will reside as well as the CSS and images that renders the code to make it user-friendly.

Plugin Header Code

Create a PHP file inside the “Author” folder and name it “author.php”. Add the following code to the file:

<?php /* Plugin Name: Author Plugin URI: http://www.davgit.com Version: 1.0 Description: A Plugin that displays author info for each post. Author: David Gitonga Author UI: http://www.davgit.com */

This is standard plugin information header that must be present if WordPress is to recognize the plugin. This plugin info will be displayed when you visit the “Installed Plugins” page.

Adding Functionality

Functions are hard-coded into the plugin files using PHP. In our case, we are going to define one function that calls a section holding the author info. We will also add HTML and WordPress template tags that will be used to build the author info section.

Start by defining the function below:

function author_info() { ?>

Add the HTML needed to build the page as shown below:

<div class = “author_info”> <?php if (function_exists (‘get_avatar’)) { echo get_avatar(get_author_email(), ‘70’); } ?> <?php author_meta (‘description’); ?> </div> <?php

Note the template tags used tell you their functionality. For example, the “get_author_email” tag gets the author email from his profile page.

Add the CSS styles that control the HTML page appearance by adding the code below:

<?php function stylesheet() { echo" <style> .avatar { float:left;background-color: #9A9B9B;padding: 4px;margin: 0 4px 0 0;display: inline; } .author_info { color: #666;background: #DDDDDD;padding: 8px;margin:0 0 6px 0; } </style> "; }

CSS styles that control the HTML page appearance can also be added by creating a separate file called “styles.css” and then adding the above code to it.

Load the function that will be executed when the plugin loads below:

function display_author_info() { if (is_single()) return author_info().stylesheet(); }

Create a file “single.php” and add the code below to it:

<?php...

We continue on our journey of Learning LESS today as we dig into an extremely powerful component of LESS: Mixins. If you haven’t read our first two posts on the topic, check out Learning LESS: An Introduction and Learning LESS: Variables.

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

So let’s introduce LESS Mixins, and showcase some of what you can do with them.

What is a Mixin?

A Mixin in LESS is basically a common group of CSS properties grouped into one, which can then be inserted into various other LESS selectors. You can think of it like a variable, with several different properties.

Any ideas where this might come in handy? [Answer. CSS3.] And you’ll be very impressed at how powerful the mixins can be, as we have both Mixins and Parametric Mixins that can take a variable. You can also mixin Mixins with Mixins. And yes, I believe that is a grammatically correct sentence.

So starting with a basic Mixin, let’s create a scenario that you might use this in a web design project. Let’s say that the design you’re building uses a standard sans-serif font for the body copy, and a different serif font for headers. Instead of writing each font in each class (which could become cumbersome to manage if certain headers use different fonts), you can set the fonts within a mixin and include that class in other classes.

For this, we’ll create three classes, a serif class, sans-serif class and a monospace (code) class. Additionally, for the example, I’m going to throw in two variables which we learned in part two of our series. Let’s take a look at the code.

// Variables @baseFontSize: 14px; @baseLineHeight: 21px; .serif { font-family: Georgia, 'Times New Roman', serif; } .sans-serif { font-family: Helvetica, Arial, sans-serif; } .monospaced { font-family: 'Courier New', monospace; }

Pretty standard so far, right? By the way, the // denotes a comment in LESS and are not compiled with the LESS.app application. Standard CSS comments (/* */) will be compiled, but obviously not read. Let’s get into the meat ‘n potatoes of the Mixin.

Back to the code, check out how we format our paragraph tag.

p { font-size: @baseFontSize; line-height: @baseLineHeight; .serif; }

As you can see, we set the font-size and line-height using the variables we defined, which are pretty self explanatory. We then set our font by just calling the class serif within the properties for the paragraph. This mixin acts very much like a variable. The .serif mixin stores all of the properties in “.serif” and when compiled, all of the properties are then included in the paragraph properties.

Let’s look at the compiled version.

.serif { font-family: Georgia, 'Times New Roman', serif; } .sans-serif { font-family: Helvetica, Arial, sans-serif; } .monospaced { font-family: 'Courier New', monospace; } p { font-size: 14px; line-height: 21px; font-family: Georgia, 'Times New Roman', serif; }

The result of the compiled LESS is clean and streamlined CSS. What would happen if we simply changed the .serif to .sans-serif? So our LESS now reads:

p { font-size: @baseFontSize; line-height: @baseLineHeight; .sans-serif; }

And our output becomes:

p { font-size: 14px; line-height: 21px; font-family: Helvetica, Arial, sans-serif; }

That should give you a glimpse into how amazingly powerful making quick changes in LESS can be. But we’re not done yet, let’s take a look at Parametric Mixins.

Parametric Mixins

Parametric Mixins are just like regular mixins, but similar to functions they can accept parameters to attach to the code within the mixin. With these, you can set the parameter in your mixin or you can define a variable within your parameter for a default option.

This is perfect to use when you’re working with CSS3 properties and you need to declare your browser prefixes, but you can use the properties in different ways. For this example, we’ll use border-radius. Our mixin looks like this:

.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius:...

Offline storage is one of the most anticipated features of HTML5. With users browsing to your pages and accessing your Web apps on various devices, often with limited connectivity, the Application Cache utility could prove to be a serious advantage. With HTML5 App Cache, you can instruct supporting browsers to cache copies of certain files. Once these files have been downloaded they will then be accessible offline. In this tutorial we will work through a simple example of caching a page, including an image and external JavaScript file.

Create an HTML5 Page

Create your HTML5 page using the following initial outline:

<!DOCTYPE html> <html> <head> </head> <body> <h1>Lovely Picture</h1> <canvas id="picCanvas" width="450" height="350"></canvas> </body> </html>

The page is going to include a drawing within the canvas element, which will in turn include an image. The canvas element at the moment simply specifies dimensions, we will use JavaScript in a separate file to draw within it, referencing it through the ID attribute.

Create a JavaScript File

So that we can test the App Cache function, let’s create a separate JavaScript file to work with the page. Create a new file and save it “picdraw_functions.js”.

Enter the following function:

function drawPic(picSRC, canvasElem) { //get the canvas using passed element ID var canv = document.getElementById(canvasElem); //get the context var cont = canv.getContext("2d"); //define a gradient to spread across the canvas diagonally var grad = cont.createLinearGradient(0, 0, 450, 350); //define two colors grad.addColorStop(0, "#000033"); grad.addColorStop(1, "#003300"); //set the gradient fill cont.fillStyle = grad; //fill the entire canvas with the gradient cont.fillRect(0, 0, 450, 350); //create the image var picImg = new Image(); //draw the image so that it is centered...

We continue on our journey of Learning LESS today as we dive in to the wonderful world of Variables. If you haven’t read Learning LESS: An Introduction, be sure to read that first to cover some intro to this topic.

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

So let’s dive in to LESS Variables, and showcase some of what you can do with them.

The Syntax

The syntax for LESS is almost identical to CSS. And the creators of LESS were very smart and made LESS completely compatible with CSS which means you can write CSS in your LESS files. It’s basically the best of both worlds! Just remember to write your LESS files names as .less and not .css.

Variables

Variables in LESS begin with the @ sign. What follows that can be any combination of letters and numbers, dashes and underscores. Once you’ve named your variable, follow with a colon (similar to CSS) and define the variable. This can include a hex code for a color (very common) or a string enclosed in quotes. Let’s take a look at a few variables and see how they’ll render once they’re compiled.

@blue: #00214D; @red: #CF142B; @white: #FFF; @black: #000; @baseFontSize: 15px; @baseLineHeight: 22px;

Pretty simple, right? Now you can use those variables in any of your other LESS files throughout your project where you would use the hex code. This is a fantastic way to keep your code clean and easy to manage. For example, I like to set up a single LESS file that is just my variables, which includes font sizes, colors, headers, etc.

When you use your variables in your LESS files, they compile to be perfectly clean CSS. Let’s take a look.

h1 { color: @red; } h2 { color: @blue; } h3 { color: @black; } p { color: @black; font-size: @baseFontSize; line-height: @baseLineHeight; }

Which compiles to…

h1 { color: #CF142B; } h2 { color: #00214D; } h3 { color: #000; } p { color: #000; font-size: 15px; line-height: 22px; }

Setting Strings as Variables

Variables don’t have to be just colors or font sizes. We can also set strings to variables, just like you would in JavaScript or PHP. This can become extremely valuable when using Icon Fonts in your web design, as it’s best practice to set Icon Fonts with pseudo elements to maintain accessibility instead of just typing characters in a specific class element. Let’s take a look at variables as strings.

@name: "Alex Ball"; @description: "I love to write and code."; a:before { content: @description; }

When the code above is compiled, we get this.

a:before { content: "I love to write and code."; }

If you’re looking into using icon fonts in your web designs along with LESS, definitely check out Chris Coyier’s great posts on icon fonts, how to use them accessibly, and the various fonts that are out there, both free and paid.

Wraping Up Variables

That concludes our discussion on variables in LESS, and while it was a shorter lesson, it’s extremely valuable and worth practicing some on your own. As I mentioned in the Introduction, go out and download LESS.app and try out using variables in your projects. You’ll be amazed at how quickly it can speed up development time and maintainability.

In the next segment of Learning LESS, we’ll dive in to Mixins, one of the most powerful advances in LESS.

Have questions on variables and how they work in LESS? Or having trouble getting your LESS files to compile correctly? Comment below and I’ll get to them as soon as possible!

See you next time.

...

Today, I’m proud to start a series of posts that will focus on LESS, the dynamic language that takes your CSS and puts it on steroids. LESS let’s you use variables, mixins, nested rules, and even functions within your CSS. It’s extremely powerful and can dramatically speed up your development. There is a little bit of a learning curve to it, but once you wrap your head around it, you won’t type CSS again without using LESS.

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

So with that laid you, you’ve got a lot of great stuff to look forward to. Let’s get started on our introduction to LESS.

What Is LESS and Why Should I Care?

In my dealings on the web, I have found that there are three types of people when it comes to dealing with LESS (or any other CSS preprocessor). There are the I’ve never heard of it people, the Yeah, I’ve tried it, but it’s not for me, and the Yup! I love it people.

My goal after this blog series is to make you fit into that last category.

According to Wikipedia, LESS is:

a dynamic stylesheet language designed by Alexis Sellier. It is influenced by Sass and has influenced the newer “SCSS” syntax of Sass, which adapted its CSS-like block formatting syntax.

LESS has been around since 2009 and has really ramped up in the past few months, getting widespread use by projects large and small, including Bootstrap, from Twitter, the most popular project on GitHub.

As we progress through this series, you’ll get a better grasp on what LESS really is, and what it can be used for, but in short, it allows you to create a powerful library of variables, quick CSS3 effects, and much more.

What Resources Are Out There?

There are plenty of places you can read up about LESS, but you might as well make your first stop the source, http://lesscss.org, the home base of LESS. They will help guide you through setup, some intro to the code, steps to process your LESS files, and much more.

Smashing Magazine also posted a intro to LESS and how it compares to SASS, which is another popular CSS preprocessor.

A simple Google search on LESS will bring up a lot of other tools, tips, and tricks, but nothing is better than getting your hands dirty in actual code and learning from the ground up.

Is This Server Side or Client Side?

Good question, and the answer to that is it can be both. Or neither.

To implement LESS using a client side method, save all of your files as type.less and incorporate them into your document just like you would a CSS file.

<link rel="stylesheet/less" type="text/css" href="type.less">

Once you’ve got all of your LESS files loaded up, it’s time to call the LESS JS file which compiles all of your LESS files to one CSS stylesheet.

<script src="less.js" type="text/javascript"></script>

And that’s it for client side! Be sure that you call the less.js file after you include your .less stylesheets.

Unfortunately, I won’t go in to details on how to set up LESS on the server side simply because I don’t work with server side much, and I wouldn’t want to lead you astray. Instead, I’ll go in depth on the third method, which I highly recommend. Do neither client or server side.

Using LESS.app for Mac OS X

One of the most powerful clients that I use when coding in LESS is the LESS.app for Mac OS X (Sorry, Microsoft users – although give SimpLESS a try). The LESS.app compiles your LESS files into a CSS stylesheet in development, and even gives you the option to minify your CSS to save file size. This makes creating styles extremely powerful, because you can utilize dozens of LESS files, compile them to one stylesheet, minify it and publish to your server.

To use LESS.app, simply drag your development folder to the app window and LESS.app will automatically find all of your LESS files. You can then specify which ones you want to convert to CSS, where to save them (in your development folder) and whether or not to minify the CSS.

Pretty cool stuff, that’s for sure.

So take a few minutes out of your day today and in the coming days to check out LESS, the LESS.app, and some of the other resources out there.

Coming up next in the blog series, Learning LESS: Using Variables. See you next time.

...