Speed up responsive webdevelopment with CSS Less (Windows): for beginners

You probably already know Less, the CSS “pre-processor”. Basically Less does exactly what it’s called: you can create your css-files with less typing.

The true advantages of Less are that you can use variables and so-called “Mixins”, which are functions/sets of code you use multiple times in your css. Forget about browser-prefixes and typing a whole set for a simple border-radius, just make use of the mixins.

To get started in a few minutes:

  1. If on Windows, download and install WinLess, a neat and handy GUI which will parse your less-files into CSS and minify them on the fly (automatically, everytime you save your file)
  2. Add the folder you are keeping your Less-files in (your css directory).
  3. Create a Less-file (e.g. all.less), with for example the following contents.

I use a less boilerplate (all.less) for my new projects as following:

/* Default functions */
@import "mixins";

/* Use your preferred reset stylesheet! e.g. http://git.io/normalize */
@import (inline) "reset.css";

/* Any plugin CSS-files here, e.g. font-awesome */
@import (inline) "font-awesome/font-awesome.min.css";

/* All the basic styles, mobile first */
@import "basic"; /* refers to a file called basic.less, which you create yourself */

/* Tablets */
@media screen and (min-width:768px) { 
	@import "res_768"; /* refers to a file called res_768.less, which you create yourself */
}

/* Desktop */
@media screen and (min-width:978px) {
	@import "res_978"; /* refers to a file called res_978.less, which you create yourself */
}

/* Large Desktop */
@media screen and (min-width:1200px) {
	@import "res_1200"; /* refers  to a file called res_1200.less, which you create yourself */
}

Create your own mixins.less file or use a template, like the one on lesselements.com.

In your imported stylesheets (basic.less, res_768.less etc) also place the first line @import "mixins"; to make sure WinLess finds your mixins.

Now start your work in basic.less (mobile-first approach) and keep a clean structure as for example:

header { }

.mainContainer {
	section {
		position: relative;
		.entry-content {
			p {
				margin: 0 0 1em 0;
	
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}

	aside { }
}

footer { }

You will notice that all.less is generated into all.css, which contains all the minified css, including the responsive css. Optimized for production right away!
Good luck!

Responsive circles with CSS3

Ever needed to create a circle with CSS only? Before CSS3 that was quite impossible (apart from the content: ' \25CF'; with a large font-size). But with CSS3, you can even create responsive circles!

Let’s say your circles width is 25% of the containing div. If your circle is in a square div, you could easily give the circle a height of 25% as well, and all is fine (based on the assumption your container is a responsive square). But if your container has a flexible height, the following code will help you out:

.circle {
   height: auto;
   padding-top: 25%;
   width: 25%;
   border-radius: 50%;
   /**
    * Update November, 2014
    * http://caniuse.com/#search=border-radius
    * prefixes -webkit- and -moz- no longer really needed
    */
}

You can find a demo here.

See what happened?
Percentages defined within a padding in CSS, are calculated based on the width of the container. This means that if you use a padding-top to the circle that equals the width, it will give the element the same height as its width.

Enjoy!

P.S. Notice that you could also define the width of the circle as a padding-left with “10%” and give the circle a “display:inline-block” or a “display: block; width: auto; float:left;” to accomplish the same thing. I prefer setting the width, as it doesn’t require me to define the block as an inline-block, or a floating block, which will require you to clear the floats again, or find a backwards-compatibility solution for IE7 and lower.