Snippet :Media queries in less

Went looking around to see if less could help with responsive web design, sure enough it can using the media queries selector.
Not sure if you have came across this snippet yet if not here it is: 




.class{

/* styles go here */

@media (max-width: 480px) {

/ * responsive style here * /

    }

}

Compete mixins bundle

Bernat on twitter (@bernatfortet) alerted me to bundle of mixins he has created with presets including those for transformations,typography and much more. Probably one of the most complete mixin bundle collection i have seen so far, defiantly something to consider adding to your less CSS code collection.

Grab is here: http://bit.ly/IZFyoX

Color less snippet

Here’s yet another useful less mixin to add to your collection. Jonathan Miller over on Forrst “i Was getting tired of having to convert my HEX colors to RGB just to take advantage of RGBa color translucency.” so he posted a code snippet that allows you to write your color codes in Hex an still tell there alpha for less. Here’s the mixins 

.bg_color(@color: #fff, @alpha: 1) {
    background: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}
.txt_color(@color: #fff, @alpha: 1) {
    color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}

Some useful less classes

Here are some more useful Less classes to add to your collection:

Double & triple borders

 

.double-borders( 
	@colorOne : green,
	@colorTwo : red,
	@radius : 0
) {
	border: 1px solid @colorOne;
 
	-webkit-box-shadow: 0 0 0 1px @colorTwo;	
	   -moz-box-shadow: 0 0 0 1px @colorTwo;
	   		box-shadow: 0 0 0 1px @colorTwo;
 
	.border-radius( @radius );
}
 
.triple-borders( 
	@colorOne : green,
	@colorTwo : red,
	@colorThree : blue,
	@radius : 0
) {
	border: 1px solid @colorOne;
 
	.border-radius( @radius );
 
	-webkit-box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;	
	   -moz-box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;
	   		box-shadow: 0 0 0 1px @colorTwo, 0 0 0 2px @colorThree;
}

Linear Gradients

.linear-gradient( 
	@begin: black, 
	@end: white,
	@switch : 100%
) {
	background:  @begin;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(@begin), color-stop(@switch, @end));
	background: -moz-linear-gradient(top, @begin, @end @switch);
	background: -o-linear-gradient(top, @begin, @end @switch);

Columns 

.columns(
	@count : 3,
	@gap : 10
) {
	-webkit-column-count: @count;
	   -moz-column-count: @count;
	        column-count: @count;
 
	-webkit-column-gap: @gap;
	   -moz-column-gap: @gap;
	        column-gap: @gap;
}
 
.box-sizing( @type : border-box ) {
	-webkit-box-sizing: @type;
	   -moz-box-sizing: @type;
	        box-sizing: @type;		
}

Flex

.flex( @val : 1 ) {
	-webkit-box-flex: @val;
	   -moz-box-flex: @val;
	        box-flex: @val;
}
	background: linear-gradient(top, @begin, @end @switch);
}
Enjoy!

New less css compiler -SimpLess

While surffing Forsst I came across a post talking about a new tool, well new to me anyways that does what less.app on Mac osx does - compile less files into valid CSS files. The only difference with this tool which is called SimpLess is the fact this app is cross platform(ability to run on any operating system,windows,mac osx an Linux) Another good thing about this app - how simple it to use. Not like the windows only compiler less.exe which needs the user to know commands in order to get things to work properly. No, all you have to do with this app is install it,run it then drag an drop your project folder into the app an once it detects that a .less file has been save in the folder it automaticity generates a CSS in the same folder JUST LIKE THAT! Another good reason to use this app - it’s open source. Meaning that programmers can dive into the source code an potentially make the app so much better as well build plug-ins adding to the functionality. So I say toss your old less compiler into the trash an download this little app an let er rip. Download SimpLess
Grab source code

Bootstap & Less css

You may have heard about this little thing that Twitter released to the public called bootstrap.

“Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more. Nerd alert: Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind.”
-Twitter Not only does this project include some pre-built code for basic elements it also has support for Less css which you can reference the files using this code 
link rel="stylesheet/less" href="/path/to/bootstrap.less"
script src="/path/to/less.js">
Less support is not the only great thing about bootstrap, it has support for all major browsers (including IE) as well as many templates for fluid grid systems plus some code samples to get you started. Defiantly a good resource to start any web based project.
Download from Github

Coding with Less online with Tinkerbin

I just recently came across a website called Tinkerbin. “Tinkerbin lets you play around with HTML, JavaScript and CSS without creating files or uploading to servers.”

I’m pretty sure that you have heard about Jsfiddle which is a online code editor that is free to use where you can write your code an then save it. Jsfiddle has become popular for developers & designers to show off there code so they can get help…or just to show off.
What makes tinkerbin different is the fact they support more then just the standered HTML,CSS and JavaScript. They also support HAML,SASS,Coffeescript an even Less!
Yep now you can open this online editor write your less code save it,let it run an then past it into your project without having to worry about compiling it the site does that for you. Best of all this whole thing is free
Down part is there’s no mobile web app(well Jsfiddle doesn’t have one either) anyways head your selfs over to tinkerbin bookmark the site as a development tool for later use it’s defiantly going as one of mine.

Pure CSS buttons with less

Gideon Farrell over on Forrst has posted a neat little code block to make pure CSS buttons using less css that I’d like to share with you all here. The block is a mixin an in order to use it you must have elements.less you can call the file up by using 

@import 'elements.less'
since some code is called in from this file. 
.make_button(@col1, @col2, @fcol, @size:0.9em, @round:5px) {
	.gradient(@col2, @col1, @col2);
	.rounded(@round);

	color: @fcol;
	text-decoration: none;
	font-size: @size;
	font-weight: bold;
	line-height: 1.3*@size;
	
	margin: @size/4 @size/2;
	padding:(@size/2)+(@size/8) (@size) (@size/2)-(@size/8);
	border-bottom: thin solid rgba(0,0,0,0.25);
	
	display: inline-block;
	
	cursor:pointer;
	
	.box-shadow(0 1px 2px rgba(0,0,0,0.5));
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	
	position: relative;
	
	&:active {
		.gradient(@col1, @col2, @col1);
	}
}

Less is better with a grid

Recently with the mobile & tablet boom on the Internet web developers have had to rethink the way web sites are built. Usually that means creating a web site for the desktop an then a seperait mobile version of the site then adding in a redirect with JavaScript,php or with the httaccess file to detect mobile devices. Well mobile devices are made up by cell phones an tablets. Both device types have different screen resolution then each other an then there’s the sub categories were some cell phones have bigger screens an others smaller rather then create four or five different web sites for each device how about you use a grid system? Grid systems have become a very big trend in the web development community since they offer us a template to code upon an make our sites responsive across mulitable device & screen types without much hassle, plus it cuts down on code. Enter in less framework 4.
What is this?
Don’t get confused this with less CSS. Both are totally different but you can use less CSS with this grid system since it’s also based around using CSS.
“Less Framework is a CSS grid system for designing adaptive web sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.”
-lessframework.com
The use of CSS media queries is presented in less framework an they have been around since CSS2 with media=screen but have been updated greatly in CSS3. Technically you can just use media queries without a grid system but seeing as less framework also has pre-defined styles for typograpy an it’s all set up for you, a good head starter for any web development project.
How do I use it?
So all you have to do is download the files, write the HTML code an some CSS code an then go through the grid system adding in CSS code for each layout reusing elements already created. The best part is you don’t need multable HTML or CSS documents for each layout there all in one CSS file plus this whole thing is free.
final thoughts
When I first starting coding websites I never used a grid system thus had the hard time of making it look great on what ever device my sites were viewed on. Then I found out about using grids an my whole approacht to coding changed. Not only could I create a amazing site but without any extra effort I could great a amazing site for every device type. Less framework by far is my favorite an may even be the best grid system out there.
word of advice They do recommend that you code the desktop version first then work your way to all the other layouts, it’s just easier that way since you already have most of the site done just need to may it mobile friendly. Grab less framework 4

Less CSS environment setup

Before anyone can began to code using {less} CSS one must set up a envierment to code with. Now less is fairly new language so not many programs out there support the syntax of less even though it’s CSS. Although there are ways around this, you could use the lesscss.js file to compile the code server side or you can grab the less.app for Mac osx you could also enable less syntax in coda but what about windows users? They too have some options. You can grab the lessc.exe and download this CSS is less add-on or visual studio 2010 or you could enable less CSS syntax in dreamweaver cs5.5
All these are good solutions but they don’t work perfectly (yet). I would highly suggest making sure you have a program that supports less syntax an a compiler. Not matter how you code less CSS have a compiler so you can turn the less CSS code into just CSS so browsers can read it.
Now that you have your tools set up it’s time to code some less. This I’d the fun part just a word of advice is make sure that when saving your less code out .less for the file exstention so the compiler can do it’s job.
Alright I think your all set up an ready to go. If you have anymore questions drop me a line so I may help.
Have fun !