Socuine's super duper CSS3, Less.js framework template.

[Socuine]

Hey,

so I decided to make a template for all of you so you can mess around with CSS3 and what not. It's a pretty simple, hasted template but it's functional. For all the newbies, try this template. The template uses no images and is created using HTML5, CSS3 and the JS framework, Less.js.

**HTML:**
```



Hey! I'm a navigation. But I need training, I'm currently plain text. :(

Sup. I'm a header. Fix me! You can find me over at the header tag inside the .html file!

I'm a title.  =3

Yay title

[b]Kewl[/b]

I hasted dis bum candy

Using br's for breaklines, so bad.

```
**CSS:**
```
// LESS.js framework designed by Alexis Sellier 2010-2012
// LESS.js usage by Glenn van Cauter 2012 (Socuine)

// Le Easy LESS.js Variables
@bg: #EEEEEE;

@white: #FFFFFF;
@gray: #DEDEDE;
@headerheight: 150px;
@radius: 2px;
@boxshadow: 0px 0px 3px #CCC;
@globalpadding: 10px;
@textshadow: 0px 1px 0px rgba(150, 150, 150, 0.55);
@margintop: 10px;
@marginleft: 10px;

// Le Easy LESS.js Divisions

// Body, handles the background, global font family and font size, color
body {
background:@bg;
font-family: 'Droid Serif';
font-size:13px;
color:#666666;
}

// Wrapper, handles the white canvas behind elements, acts as several wrappers. Hence class instead of ID.
.wrapper {
background:@white;
padding:@globalpadding;
border-radius:@radius;
box-shadow:@boxshadow;
width:980px;
margin:0 auto;
}

// Header, corresponds with

header {
background:@gray;
height:130px;
padding:@globalpadding;
font-size:36px;
}
.navigation {
font-size:13px;
height:15px;
background:#a6e455;
-webkit-box-shadow: inset 0px 1px 0px #c6ff7b; -moz-box-shadow: inset 0x 1px 0px #c6ff7b; box-shadow: inset 0px 1px 0px #c6ff7b;
border:1px solid #90c748;
color:white;
text-shadow:@textshadow;
}
.padding {
padding:@globalpadding + 3;
}
.additionalmargin {
margin-top:@margintop;
}
.leftmenu {
float:left;
width:200px;
}
.rightmenu {
float:left;
width:500px;
margin-left:@marginleft;
}
.clear {
clear:both;
}
.title {
font-size:13px;
height:15px;
background:#a6e455;
-webkit-box-shadow: inset 0px 1px 0px #c6ff7b; -moz-box-shadow: inset 0x 1px 0px #c6ff7b; box-shadow: inset 0px 1px 0px #c6ff7b;
border:1px solid #90c748;
color:white;
text-shadow:@textshadow;
}

```
**Download:**

[Click eet.](http://www.burstingforce.com/template.rar)

**Final notes:**

I was bored and needed to do something. I made this template within minutes, not hours. Expect some errors and nesting issues, lol. Other than that, it should work fine.

This is my first try using the framework 'Less.js CSS', expect a more professional approach, soon.

Best regards,
Socuine

[cheatking]

GAH TABS NO EVIL!!!!
2x space plox.

Other than that and your poor choice of variable names, not bad.

[Exception]

Pretty cool, like I said earlier, thanks for mentioning LESS.js, I'm loving using it. It's made CSS WAY less tedious for me.

* * *

If anybody wants to add a "live-watch"-style thing when testing, add in

Directly under '', and whenever you save your CSS, the thing'll refresh and saves you from having to open and close repeatedly. ^_^

(Or, if you don't feel like doing that, add "#!watch" to the end of your URL.)

* * *

Also, Soc, you should note that you can't test LESS.js locally in Chrome (It was making me waste time just trying to test it, working out what I was doing wrong that it wouldn't work on Chrome. v_v), 'cause of it not allowing file access from local files.

Note to anybody who wants to test it on Chrome, find a Chrome shortcut, Right-click, properties, and change the "chrome.exe" at the end to "chrome.exe -allow-file-access-from-files".

[Socuine]

@Lenn:

> Pretty cool, like I said earlier, thanks for mentioning LESS.js, I'm loving using it. It's made CSS WAY less tedious for me.
>
> * * *
>
> If anybody wants to add a "live-watch"-style thing when testing, add in
>
> Directly under '', and whenever you save your CSS, the thing'll refresh and saves you from having to open and close repeatedly. ^_^
>
> (Or, if you don't feel like doing that, add "#!watch" to the end of your URL.)
>
> * * *
>
> Also, Soc, you should note that you can't test LESS.js locally in Chrome (It was making me waste time just trying to test it, working out what I was doing wrong that it wouldn't work on Chrome. v_v), 'cause of it not allowing file access from local files.
>
> Note to anybody who wants to test it on Chrome, find a Chrome shortcut, Right-click, properties, and change the "chrome.exe" at the end to "chrome.exe -allow-file-access-from-files".

Oh neat, I will be sure to use the live-watch development thing, sounds handy! Haha I was having those issues in Chrome as wel. Sean asked me to upload for him to see and all of sudden, it worked. I'm such a douche at times.

Thanks for the additional information, Lenn.