LESS CSS Tutorial: Designing A Slick Menu Navigation bar |
- LESS CSS Tutorial: Designing A Slick Menu Navigation bar
- 16 Ways How Educators Use Pinterest [Infographic]
- [Freebie] Rainbow UI Kit (PSD)
LESS CSS Tutorial: Designing A Slick Menu Navigation bar Posted: 08 Apr 2012 09:44 PM PDT Web design and development world is really evolving rapidly. We can see this in the great number of new stuff launched in the community (almost) everyday, be it Apps or new Frameworks that help make our day-to-day job as web designers or developers more effective and efficient. One that caught my attention from web design evolvement today is LESS, a programmable stylesheet language that extends the way we write CSS syntax by combining some programming concepts like Variables, Mixins, Functions and Operations. It opens new capabilities in writing CSS syntax. For instance, by applying Mixins in CSS like the way we do in a program, we can now store default styles and values that can be applied in the entire file whenever possible. With this, we won’t need to write the same styles over and over again. Well, let’s do some exercises with LESS to get better insight into what it has to offer. Designing with LESSIn this tutorial we will try to design a slick menu navigation bar that is inspired from the one in Apple.com. As it is only ‘inspired’ by the original product, take note that our final tutorial product will not be precisely the same as the original. To get started, you might want to read the following helpful resources first. They explain some basic implementations of LESS language, which will be helpful to you before you dig further into this tutorial.
PreparationFirst of all, there are some essential things we need for this small project, that is: 1. LESS Text EditorWe will need a text editor to code the navigation menu. However, most of the text editors available in the market today (such as Dreamweaver, Notepad++, InType, Sublime Text 2) have yet to support So, for the purpose of this tutorial, we will use a special text editor for LESS named ChrunchApp. We can open and edit For the HTML editor you can use any editor you are already comfortable using now. I personally like Sublime Text 2. 2. Less.jsNext, download the LESS JavaScript Library from their official website, the current version is 1.2.1. Place it inside your practice folder for this. Then link the file to the HTML document. <script src="less-1.2.1.min.js" type="text/javascript"></script> 3. Prefix-freeWe will also utilize a few CSS3 features to accomplish some effects in the navigation menu which will include vendor prefixes ( For this reason, I decided to use prefix-free, a JavaScript library created by Lea Verou that will handle the vendor prefixes automatically in the background. So we will only need to write the official syntax from W3C. Download the file and link it to the HTML file. <script src="prefix-free.js" type="text/javascript"></script> All right, we are all set up; now let’s start structuring the HTML markup. HTML MarkupThe navigation is quite simple. It will have five menus wrapped inside an unordered list tag. Open up your favorite HTML editor and put the following markup: <nav> <ul> <li><a rel="external" href="#">Home</a></li> <li><a rel="external" href="#">Inspiration</a></li> <li><a rel="external" href="#">Tutorials</a></li> <li><a rel="external" href="#">Freebies</a></li> <li><a rel="external" href="#">Resources</a></li> </ul> </nav> LESS StylingIn this section we will start styling the navigation with LESS language. For those who are new to programming-like language, writing CSS syntax with LESS would feel a little weird and awkward. But don’t worry, once you have some practice, it will surely more enjoyable than the way we write pure CSS (it my experience, it is also a bit addictive). Let’s examine the navigation style from our source of inspiration. As we can see in the screenshot above, the Apple.com navigation has the following 6 main common styles:
We will store these styles and save them inside <link rel="stylesheet/less" type="text/css" href="styles.less"> Make sure you place it before the LESS JavaScript library. Define Color Base with VariablesIn this step we will define the navigation color base using Variables. The variable in LESS is declared using the @theme: #555; This Define Default Shadow Style with MixinsOne of the features I love from LESS is Mixins. It is a programming concept that stores several predefined styles that in LESS can be inherited in classes or ids later on in the stylesheet. .shadow { box-shadow: 0 1px 2px 0 @theme; } In the code above I did not include the prefixed version of the Define Border Style with Parametric MixinsThe navigation bar will need a distinct border color with a slightly rounded corner. We can compile the border style using Parametric Mixins. It actually has the same functionality as Mixins, only difference is that it also has changeable parameters so the values are more adjustable. .border(@radius:3px) { border-radius: @radius; border: 1px solid @theme - #050505; } In the code above, we set up the default border Define Gradient, Divider, and Hover Style with OperationOperation is simply a programming language where we can apply mathematic formula like Addition, Division, Subtraction and Multiplication to get a desired result. Let’s take a look at the following code: .divider { border-style: solid; border-width: 0 1px 0 1px; border-color: transparent @theme - #111 transparent @theme + #333; } In the code above we subtract Color Scheme LevelWell, for some of you that might be confused with formulas, let’s examine the color scheme diagram below to get a better understanding: The maximum dark tone is Next, we will operate the gradient color. .gradient { background: linear-gradient(top, @theme + #252525 0%, @theme + #171717 50%, @theme - #010101 51%, @theme + #151515 100%); } .hovereffect { background: linear-gradient(top, @theme - #010101 0%, @theme - #121212 50%, @theme - #222222 51%, @theme - #050505 100%); } Define Text Style with Guard MixinsWe plan to have 2 colors on the navigation bar, ne dark color and one light. We apply two conditional statements for the text using Guard Mixins. First, when the text is given a color that has lightness equal to or greater than 50%, the .textcolor(@txtcolor) when (lightness(@txtcolor) >= 50%) { color: @txtcolor; text-shadow: 1px 1px 0px #000000; } Then, when the text is given a color that the lightness is less than 50% the .textcolor(@txtcolor) when (lightness(@txtcolor) < 50%) { color: @txtcolor; text-shadow: 1px 1px 0px #ffffff; } Importing LESSLet's now create another @import "config.less"; Add Font FamilyIn order for the navigation bar to look more appealing, we will include a new font family using This time we will use the Asap font. Download it from Font Squirrel's font face collection. Then insert the following styles to our recently created @font-face { font-family: 'AsapRegular'; src:url('fonts/Asap-Regular-webfont.eot'); src:url('fonts/Asap-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Asap-Regular-webfont.woff') format('woff'), url('fonts/Asap-Regular-webfont.ttf') format('truetype'), url('fonts/Asap-Regular-webfont.svg#AsapRegular') format('svg'); font-weight: normal; font-style: normal; } Styling the Body with Color functionsNow, we will give a background color to the The following code will lighten the background at 30%. body { background: lighten(@theme, 30%); font-family: AsapRegular, sans-serif; font-size: 11pt; } Styling the Navigation with Nested RuleIn LESS we are able to nest styles directly under its parent. Let's take a look at the code below. The nav { margin: 50px auto 0; width: 788px; height: 45px; .border; .shadow; } Notice that, instead of giving a bunch of CSS rules again, I only inserted Next, we give styles for the nav { ... } nav ul { ... } There is nothing wrong with this approach, in fact, I used to do it every time and am pretty comfortable with it. However, this method, many a CSS designer has said, is verbosed and in some cases, not easily manageable. Now, we can do something like this: nav { margin: 50px auto 0; width: 788px; height: 45px; .border; .shadow; ul { padding: 0; margin: 0; } } And then the menu will be displayed in a row using nav { margin: 50px auto 0; width: 788px; height: 45px; .border; .shadow; ul { padding: 0; margin: 0; li { display: inline; } } } In the syntax below we specify the menu anchor tag style and add our predefined styles, those are: nav { margin: 50px auto 0; width: 788px; height: 45px; .border; .shadow; ul { padding: 0; margin: 0; li { display: inline; a { text-decoration: none; display: inline-block; float: left; width: 156px; height: 45px; text-align: center; line-height: 300%; .textcolor(#f2f2f2); // You can change this line .divider; .gradient; } } } } In the code above we apply hex color However, if we look at the current result above, each of the menu are having dividers thus resulting in the last section overflowing to the bottom. So we need to to omit the border style for the first and last child of the navigation bar. nav { margin: 50px auto 0; width: 788px; height: 45px; .border; .shadow; ul { padding: 0; margin: 0; li { display: inline; a { text-decoration: none; display: inline-block; float: left; width: 156px; height: 45px; text-align: center; line-height: 300%; .textcolor(#f2f2f2); // You can change this line .divider; .gradient; } } li:first-child a { border-left: none; } li:last-child a { border-right: none; } } } Hover StateFor the last step we will add the hover effect. In LESS we can add nav { margin: 50px auto 0; width: 788px; height: 45px; .border; .shadow; ul { padding: 0; margin: 0; li { display: inline; a { text-decoration: none; display: inline-block; float: left; width: 156px; height: 45px; text-align: center; line-height: 300%; .textcolor(#f2f2f2); // You can change this line .divider; .gradient; &:hover { .hovereffect; } } } li:first-child a { border-left: none; } li:last-child a { border-right: none; } } } Change the color themeHere is the cool part of LESS. If we want to change the overall color theme, we can do it in fewer line changes than what we need in pure CSS. In this case, I will change the navigation color to be a bit lighter. Simply change the following two lines. @theme: #ccc; //Change this .textcolor(#555); //And this And here is the result. Compile LESS into CSSWhen we are still using the LESS JavaScript, it will grab the So, when we are about to put the navigation bar live on a website, it is important to compile the LESS file into static CSS. Click the Crunch It! big button. Save the .less in our exercise file, link it to the HTML document and unlink the .shadow { box-shadow: 0 1px 2px 0 #555555; } .divider { border-style: solid; border-width: 0 1px 0 1px; border-color: transparent #444444 transparent #888888; } .gradient { background: linear-gradient(top, #7a7a7a 0%, #6c6c6c 50%, #545454 51%, #6a6a6a 100%); } .hovereffect { background: linear-gradient(top, #545454 0%, #434343 50%, #333333 51%, #505050 100%); } @font-face { font-family: 'AsapRegular'; src: url('fonts/Asap-Regular-webfont.eot'); src: url('fonts/Asap-Regular-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/Asap-Regular-webfont.woff') format('woff'),url('fonts/Asap-Regular-webfont.ttf') format('truetype'),url('fonts/Asap-Regular-webfont.svg#AsapRegular') format('svg'); font-weight: normal; font-style: normal; } body { background: #a2a2a2; font-family: AsapRegular,sans-serif; font-size: 11pt; } nav { margin: 50px auto 0; width: 788px; height: 45px; border-radius: 3px; border: 1px solid #505050; box-shadow: 0 1px 2px 0 #555555; } nav ul { padding: 0; margin: 0; } nav ul li { display: inline; } nav ul li a { text-decoration: none; display: inline-block; float: left; width: 156px; height: 45px; text-align: center; line-height: 300%; color: #f2f2f2; text-shadow: 1px 1px 0px #000000; border-style: solid; border-width: 0 1px 0 1px; border-color: transparent #444444 transparent #888888; background: linear-gradient(top, #7a7a7a 0%, #6c6c6c 50%, #545454 51%, #6a6a6a 100%); } nav ul li a:hover { background: linear-gradient(top, #545454 0%, #434343 50%, #333333 51%, #505050 100%); } nav ul li:first-child a { border-left: none; } nav ul li:last-child a { border-right: none; } Let's take a look at the result once again. And we are done, please feel free to experiment with it. ConclusionWe have learned many things about LESS language today, such as:
Although there are many things that can be covered further and many possibilities to be shown and explained, we hope you enjoyed this basic tutorial. |
16 Ways How Educators Use Pinterest [Infographic] Posted: 10 Apr 2012 12:10 AM PDT Have you joined the pinning craze yet? With all the hype focused on how Pinterest is a social networking site for women and how it is valued at US$200 million etc, we mustn’t lose sight of the technology and potential Pinterest has for the academic world. Pinterest is a platform that allows you to showcase your interest and ideals via the simple act of pinning. This pinned collection of yours is easily shared to your network of followers or friends. They, in turn, can continue pinning materials from your board to theirs and spread the info further, all at the speed of a click. The potential behind this information transfer is enormous and now that the technology for it exists, academicians and educators should be quick to jump on the bandwagon and start pinning as well. To help this process along, onlineuniversities.com has created this infographic showing the ways educators can use Pinterest to collect, organize, collaborate and encourage active learning amongst students. Think of it like the bulletin board you always pass by at the school corridor – only more regularly updated and with plenty of space for just about everyone to put their stuff up and show to the whole school and beyond. Recommended Reading: More Infographic related posts. |
[Freebie] Rainbow UI Kit (PSD) Posted: 10 Apr 2012 12:13 AM PDT A new freebie! Grafpedia, folks who previously brought us the St Valentines Icon Set is releasing yet another great design freebie exclusively for Hongkiat.com readers. This Rainbow UI Kit comes in Photoshop PSD format; it is comprised of beautiful User Interface elements designers can use in web design, for example: buttons, navigation bar, login interface, file uploading interface and more. Here’s a quick preview. A Word from GrafpediaGrafpedia is one of the biggest resource collections for professional web designers on the Web. Every week, its team provides you with original and exclusive graphic items such as icons, brushes, vectors, templates, tutorials and much more. Grafpedia is glad to share its work with Hongkiat.com readers, and we hope you will like today’s .PSD offering. Check out Grafpedia and follow us on Twitter to discover our collections and follow our updates. |
You are subscribed to email updates from hongkiat.com To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
0 comments:
Post a Comment