We got the setup out of the way in the last part of this web tutorial, and now let's roll those sleeves up and dive into some LESS code. First off, let's make this one change to the HTML. This ensures that your starting theme is always the red one.
index.html
<body class="theme_red">
Now, in your LESS file, create a CSS class for theme_red. We're also going to create a variable called color_red_text. This is a variable that holds the color code for a nice tasteful pink. Also, within theme_red, let's specify that this theme will be using Arial as a font.
styles.less
html, body
{
height:100%;
padding:0px;
margin:0px;
font-size:14px;
}
/*RED*/
@color_red_text: #FFAAAA;
.theme_red
{
font-family:arial;
}
{
height:100%;
padding:0px;
margin:0px;
font-size:14px;
}
/*RED*/
@color_red_text: #FFAAAA;
.theme_red
{
font-family:arial;
}
And then within theme_red, we set the CSS class container. This isn't possible with standard CSS, but it is with LESS. It's a great boon, and you'll see why by the end of the tutorial. width and height properties are set to 100%. This makes container cover the entire screen. The background properties basically uses the image below as a wallpaper.
 |
| bg_red00.jpg |
styles.less
/*RED*/
@color_red_text: #FFAAAA;
.theme_red
{
font-family:arial;
.container
{
width:100%;
height:100%;
background: url(../img/bg_red00.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
}
@color_red_text: #FFAAAA;
.theme_red
{
font-family:arial;
.container
{
width:100%;
height:100%;
background: url(../img/bg_red00.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
}
Got that?
Now, we can hardly see the text, so let's just set the text to use the color we so nicely defined with the variable color_red_text. So now the CSS class header's text color will be defined by color_red_text. The font uses Georgia, though the rest of the page is still in Arial font.
styles.less
.theme_red
{
font-family:arial;
.container
{
width:100%;
height:100%;
background: url(../img/bg_red00.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.header
{
color:@color_red_text;
font-family:georgia;
font-size:7em;
}
}
{
font-family:arial;
.container
{
width:100%;
height:100%;
background: url(../img/bg_red00.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.header
{
color:@color_red_text;
font-family:georgia;
font-size:7em;
}
}
Pretty!
Now, let's do some more fancy LESS stuff. Declare a CSS class, content, and set the color. Give some padding, say, 10 pixels.
styles.less
.content
{
color:@color_red_text;
padding:10px;
}
.header
{
color:@color_red_text;
font-family:georgia;
font-size:7em;
}
{
color:@color_red_text;
padding:10px;
}
.header
{
color:@color_red_text;
font-family:georgia;
font-size:7em;
}
Then create two more CSS classes, content1 and content2, and include content as part of the specification! Now all the properties set by content will be part of content1 and content2.
Notice that I specified the font-size property of content2. I did that because it makes me happy and there's really no vital need for you to do so.
styles.less
.content
{
color:@color_red_text;
padding:10px;
}
.header
{
color:@color_red_text;
font-family:georgia;
font-size:7em;
}
.content1
{
.content;
}
.content2
{
font-size:1.5em;
.content;
}
{
color:@color_red_text;
padding:10px;
}
.header
{
color:@color_red_text;
font-family:georgia;
font-size:7em;
}
.content1
{
.content;
}
.content2
{
font-size:1.5em;
.content;
}
See what we did there?
OK, enough dicking around with the colors for now. Let's set some layout. Create the following CSS classes - header_wrapper, body_wrapper, footer_wrapper and content_wrapper. content_wrapper will fit 100% of its parent's width.
styles.less
font-family:arial;
.container
{
width:100%;
height:100%;
background: url(../img/bg_red00.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.header_wrapper
{
}
.body_wrapper
{
}
.footer_wrapper
{
}
.content_wrapper
{
width:100%;
}
.content
{
color:@color_red_text;
padding:10px;
}
.container
{
width:100%;
height:100%;
background: url(../img/bg_red00.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.header_wrapper
{
}
.body_wrapper
{
}
.footer_wrapper
{
}
.content_wrapper
{
width:100%;
}
.content
{
color:@color_red_text;
padding:10px;
}
Here, we're trying to make a three-column layout, with the header to the left. So header_wrapper takes up 20% of the screen width and floats left. And we'll use the following image below as wallpaper.
 |
| bg_red01.jpg |
styles.less
.header_wrapper
{
width:20%;
height:100%;
float:left;
background: url(../img/bg_red01.jpg);
}
{
width:20%;
height:100%;
float:left;
background: url(../img/bg_red01.jpg);
}
Nice, eh? Yes it's rather messy, but trust me when I say this will all work out in time.
Now do this. body_wrapper will take up 70% of screen width and 90% of screen height, and be floated right. We'll also add a nice pink line at the bottom.
styles.less
.body_wrapper
{
width:70%;
height:90%;
float:right;
border-bottom:3px double @color_red_text;
}
{
width:70%;
height:90%;
float:right;
border-bottom:3px double @color_red_text;
}
Getting there...
Let's set the footer as well. We want it right under the body, so set the width to 70% as well, but with a height of 10% (to use up the remainder of the screen height) and also float it right.
styles.less
.footer_wrapper
{
width:70%;
float:right;
height:10%;
}
{
width:70%;
float:right;
height:10%;
}
We should, of course, style footer content! Make the font white and a little smaller.
styles.less
.content1
{
.content;
}
.content2
{
font-size:1.5em;
.content;
}
.footer
{
color:#FFFFFF;
font-size:0.7em;
}
{
.content;
}
.content2
{
font-size:1.5em;
.content;
}
.footer
{
color:#FFFFFF;
font-size:0.7em;
}
You can see that the footer overlaps the content somewhat. We'll be fixing that.
Make changes to content1 and content2. content1, which house the Christmas carol, will take up 45% of its parent div, and float left. content2, which houses the Lorem Ipsum text, will take up another 45% and float right. It will also only have a height of 50% of its parent div because we want to make space for more content!
styles.less
.content1
{
width:45%;
float:left;
.content;
}
.content2
{
font-size:1.5em;
width:45%;
height:50%;
float:right;
.content;
}
{
width:45%;
float:left;
.content;
}
.content2
{
font-size:1.5em;
width:45%;
height:50%;
float:right;
.content;
}
Presto!
Now let's put in content3. Like content2, it takes up 45% of screen width and is floated right. We'll give it a top margin of 10 pixels to give it some breathing space from content2, and provide a height of 300 pixels. Then we set the background to use the image below.
 |
| bg_red02.jpg |
styles.less
.content1
{
width:45%;
float:left;
.content;
}
.content2
{
font-size:1.5em;
width:45%;
height:50%;
float:right;
.content;
}
.content3
{
width:45%;
height:300px;
margin-top:10px;
float:right;
background-image:url(../img/bg_red02.jpg);
background-repeat:no-repeat;
background-position:left center;
background-size:contain;
}
{
width:45%;
float:left;
.content;
}
.content2
{
font-size:1.5em;
width:45%;
height:50%;
float:right;
.content;
}
.content3
{
width:45%;
height:300px;
margin-top:10px;
float:right;
background-image:url(../img/bg_red02.jpg);
background-repeat:no-repeat;
background-position:left center;
background-size:contain;
}
Looking good! Now all we've got to fix is that header.
We'll rotate the header 90 degrees anti-clockwise from its bottom right corner, and add a little margin at the top.
.header
{
color:@color_red_text;
font-family:georgia;
font-size:7em;
-webkit-transform-origin:100% 100%;
-webkit-transform:rotate(-90deg);
transform-origin:100% 100%;
transform:rotate(-90deg);
margin-top:1em;
}
{
color:@color_red_text;
font-family:georgia;
font-size:7em;
-webkit-transform-origin:100% 100%;
-webkit-transform:rotate(-90deg);
transform-origin:100% 100%;
transform:rotate(-90deg);
margin-top:1em;
}
Excellent!
That's it for your red theme. We'll be uncovering more LESS goodness in the next part!
No comments:
Post a Comment