{"id":13339,"date":"2012-04-10T21:01:55","date_gmt":"2012-04-10T13:01:55","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=13339"},"modified":"2025-04-04T00:45:17","modified_gmt":"2025-04-03T16:45:17","slug":"less-css-tutorial-design-slick-menu-nav-bar","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/","title":{"rendered":"LESS CSS Tutorial: Designing A Slick Menu Navigation bar"},"content":{"rendered":"<p>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 <a href=\"https:\/\/www.hongkiat.com\/blog\/html5-template-generators-frameworks-tools\/\">new Frameworks<\/a> that help make our day-to-day job as web designers or developers more effective and efficient.<\/p>\n<p>One that caught my attention from web design evolvement today is <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lesscss.org\/\">LESS<\/a>, a programmable stylesheet language that extends the way we write CSS syntax by combining some programming concepts like Variables, Mixins, Functions and Operations.<\/p>\n<p>It opens new capabilities in writing <a href=\"https:\/\/www.hongkiat.com\/blog\/keep-css3-markup-slim\/\">CSS syntax<\/a>. 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\u2019t need to write the same styles over and over again.<\/p>\n<p>Well, let\u2019s do some exercises with LESS to get better insight into what it has to offer.<\/p>\n<h2>Designing with LESS<\/h2>\n<p>In this tutorial we will try to design a slick menu navigation bar that is inspired from the one in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.apple.com\/\">Apple.com<\/a>. As it is only \u2018inspired\u2019 by the original product, take note that our final tutorial product will not be precisely the same as the original.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img2-apple-nav.jpg\" alt=\"Apple Website Navigation\" width=\"600\" height=\"80\"><\/figure>\n<p>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.<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.elated.com\/less-is-more-make-your-css-coding-easier-with-less\/\">LESS Is More: Make Your CSS Coding Easier with LESS<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.sitepoint.com\/write-better-css-with-less\/\">Write Better CSS with Less<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.smashingmagazine.com\/2011\/09\/an-introduction-to-less-and-comparison-to-sass\/\">An Introduction To LESS, And Comparison To Sass<\/a><\/li>\n<\/ul>\n<h2>Preparation<\/h2>\n<p>First of all, there are some essential things we need for this small project, that is:<\/p>\n<h3>1. LESS Text Editor<\/h3>\n<p>We 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 <code>.less<\/code> file extensions by default, so the syntax may not be highlighted well.<\/p>\n<p>So, for the purpose of this tutorial, we will use a special text editor for LESS named <strong>ChrunchApp<\/strong>. We can open and edit <code>.less<\/code> extension files and compile it into static CSS using this application. Since it is an <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.adobe.com\/products\/air.html\">Adobe Air<\/a> application, it can be installed in every major desktop OS (Win, OSX and Linux).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img3-crunch.jpg\" alt=\"Crunch\" width=\"600\" height=\"467\"><\/figure>\n<p>For the HTML editor you can use any editor you are already comfortable using now. I personally like Sublime Text 2.<\/p>\n<h3>2. Less.js<\/h3>\n<p>Next, download the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lesscss.org\">LESS JavaScript Library<\/a> from their official website, the current version is 1.2.1. Place it inside your practice folder for this.<\/p>\n<p>Then link the file to the HTML document.<\/p>\n<pre>&lt;script src=\"less-1.2.1.min.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;<\/pre>\n<h3>3. Prefix-free<\/h3>\n<p>We will also utilize a few CSS3 features to accomplish some effects in the navigation menu which will include vendor prefixes (<code>-moz-<\/code>, <code>-o-<\/code>, <code>-webkit-<\/code>) for it to render correctly across different browsers. However, I personally do not favor using prefixes as it will bloat the CSS file.<\/p>\n<p>For this reason, I decided to use <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/leaverou.github.com\/prefixfree\/\">prefix-free<\/a>, a JavaScript library created by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lea.verou.me\/\">Lea Verou<\/a> that will handle the vendor prefixes automatically in the background. So we will only need to write the official syntax from W3C.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img3-prefix-free.jpg\" alt=\"Prefix Free\" width=\"600\" height=\"250\"><\/figure>\n<p>Download the file and link it to the HTML file.<\/p>\n<pre>&lt;script src=\"prefix-free.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;<\/pre>\n<p>All right, we are all set up; now let\u2019s start structuring the HTML markup.<\/p>\n<h2>HTML Markup<\/h2>\n<p>The 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:<\/p>\n<pre>&lt;nav&gt;\r\n\t&lt;ul&gt;\r\n\t\t&lt;li&gt;&lt;a rel=\"nofollow\" target=\"_blank\" href=\"#\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a rel=\"nofollow\" target=\"_blank\" href=\"#\"&gt;Inspiration&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a rel=\"nofollow\" target=\"_blank\" href=\"#\"&gt;Tutorials&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a rel=\"nofollow\" target=\"_blank\" href=\"#\"&gt;Freebies&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a rel=\"nofollow\" target=\"_blank\" href=\"#\"&gt;Resources&lt;\/a&gt;&lt;\/li&gt;\r\n\t&lt;\/ul&gt;\r\n&lt;\/nav&gt;\r\n<\/pre>\n<h2>LESS Styling<\/h2>\n<p>In 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\u2019t 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).<\/p>\n<p>Let\u2019s examine the navigation style from our source of inspiration.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img4-apple-nav-exam.jpg\" alt=\"Apple Navigation\" width=\"600\" height=\"264\"><\/figure>\n<p>As we can see in the screenshot above, the Apple.com navigation has the following 6 main common styles:<\/p>\n<ul>\n<li>shadow<\/li>\n<li>border<\/li>\n<li>divider<\/li>\n<li>gradients<\/li>\n<li>hover effect<\/li>\n<li>text<\/li>\n<\/ul>\n<p>We will store these styles and save them inside <code>config.less<\/code> as the default style <strong>Configuration;<\/strong> some designers might also name it <code>lib.css<\/code> that stands for <strong>Library<\/strong>. Link this file to our document.<\/p>\n<pre>&lt;link rel=\"stylesheet\/less\" type=\"text\/css\" href=\"styles.less\"&gt;<\/pre>\n<p>Make sure you place it before the LESS JavaScript library.<\/p>\n<h3>Define Color Base with Variables<\/h3>\n<p>In this step we will define the navigation color base using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lesscss.org\/#-variables\">Variables<\/a>. The variable in LESS is declared using the <code>@<\/code> symbol.<\/p>\n<pre>@theme: #555;<\/pre>\n<p>This <code>@theme<\/code> variable is our standard color; we will use it in every way possible to tail perfect color scheme and so that the color composition would be expected to become more consistent.<\/p>\n<h3>Define Default Shadow Style with Mixins<\/h3>\n<p>One of the features I love from LESS is <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lesscss.org\/#-mixins\">Mixins<\/a>. 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.<\/p>\n<pre>.shadow {\r\n\tbox-shadow: 0 1px 2px 0 @theme;\r\n}<\/pre>\n<p>In the code above I did not include the prefixed version of the <code>box-shadow<\/code> property, since the prefix-free library will handle them automatically. Also, the shadow color is inherited from the theme variable color.<\/p>\n<h3>Define Border Style with Parametric Mixins<\/h3>\n<p>The navigation bar will need a distinct border color with a slightly rounded corner. We can compile the border style using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lesscss.org\/\">Parametric Mixins<\/a>. It actually has the same functionality as Mixins, only difference is that it also has changeable parameters so the values are more adjustable.<\/p>\n<pre>.border(@radius:3px) {\r\n\tborder-radius: @radius;\r\n\tborder: 1px solid @theme - #050505;\r\n}<\/pre>\n<p>In the code above, we set up the default border <code>@radius<\/code> for <code>3px<\/code> and as we mentioned before, this value can be changed later.<\/p>\n<h3>Define Gradient, Divider, and Hover Style with Operation<\/h3>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lesscss.org\/#-operations\">Operation<\/a> is simply a programming language where we can apply mathematic formula like Addition, Division, Subtraction and Multiplication to get a desired result. Let\u2019s take a look at the following code:<\/p>\n<pre>.divider {\r\n\tborder-style: solid;\r\n\tborder-width: 0 1px 0 1px;\r\n\tborder-color: transparent @theme - #111 transparent @theme + #333;\r\n}<\/pre>\n<p>In the code above we subtract <code>@theme<\/code> variable by <code>#111<\/code>, this way the left border color output would be a bit darker. While the right border color is derived from the addition of <code>@theme<\/code> variable with hex color <code>#333<\/code>, the output would be lighter.<\/p>\n<h3>Color Scheme Level<\/h3>\n<p>Well, for some of you that might be confused with formulas, let\u2019s examine the color scheme diagram below to get a better understanding:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img5-colorscheme.jpg\" alt=\"Color Scheme\" width=\"600\" height=\"420\"><\/figure>\n<p>The maximum dark tone is <code>#000<\/code> (black), while the maximum light tone is <code>#fff<\/code> (white) and our current color base is <code>#555<\/code>. So, if we want the color base to be <strong>3<\/strong> levels darker from the current, we can simply subtract it by <code>#333<\/code>. The same way can also be applied to lighten the color.<\/p>\n<p>Next, we will operate the gradient color.<\/p>\n<pre>.gradient {\r\n\tbackground: linear-gradient(top, @theme + #252525 0%, @theme + #171717 50%, @theme - #010101 51%, @theme + #151515 100%);\r\n}\r\n.hovereffect {\r\n\tbackground: linear-gradient(top, @theme - #010101 0%, @theme - #121212 50%, @theme - #222222 51%, @theme - #050505 100%);\r\n}<\/pre>\n<h3>Define Text Style with Guard Mixins<\/h3>\n<p>We plan to have 2 colors on the navigation bar, ne dark color and one light. We apply two conditional statements for the text using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lesscss.org\/#-pattern-matching-and-guard-expressions\">Guard Mixins<\/a>.<\/p>\n<p>First, when the text is given a color that has lightness equal to or greater than 50%, the <code>text-shadow<\/code> should turn dark, in this case color <code>#000000<\/code>.<\/p>\n<pre>.textcolor(@txtcolor) when (lightness(@txtcolor) &gt;= 50%) {\r\n\tcolor: @txtcolor;\r\n\ttext-shadow: 1px 1px 0px #000000;\r\n}<\/pre>\n<p>Then, when the text is given a color that the lightness is less than 50% the <code>text-shadow<\/code> will turn white.<\/p>\n<pre>.textcolor(@txtcolor) when (lightness(@txtcolor) &lt; 50%) {\r\n\tcolor: @txtcolor;\r\n\ttext-shadow: 1px 1px 0px #ffffff;\r\n}<\/pre>\n<h3>Importing LESS<\/h3>\n<p>Let\u2019s now create another <code>.less<\/code> file named <code>styles.less<\/code> and import <code>config.less<\/code> into it:<\/p>\n<pre>@import \"config.less\";<\/pre>\n<h3>Add Font Family<\/h3>\n<p>In order for the navigation bar to look more appealing, we will include a new font family using <code>@font-face<\/code> rule. Surprisingly, <code>@font-face<\/code> rule is actually already supported since IE6!<\/p>\n<p>This time we will use the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.fontsquirrel.com\/\/fonts\/asap\">Asap<\/a> font. Download it from Font Squirrel\u2019s <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.fontsquirrel.com\/\/fontface\">font face collection<\/a>. Then insert the following styles to our recently created <code>styles.less<\/code> file.<\/p>\n<pre>@font-face {\r\n\tfont-family: 'AsapRegular';\r\n\tsrc:url('fonts\/Asap-Regular-webfont.eot');\r\n\tsrc:url('fonts\/Asap-Regular-webfont.eot?#iefix') format('embedded-opentype'),\r\n\turl('fonts\/Asap-Regular-webfont.woff') format('woff'),\r\n\turl('fonts\/Asap-Regular-webfont.ttf') format('truetype'),\r\n\turl('fonts\/Asap-Regular-webfont.svg#AsapRegular') format('svg');\r\n\tfont-weight: normal;\r\n\tfont-style: normal;\r\n}\r\n<\/pre>\n<h3>Styling the Body with Color functions<\/h3>\n<p>Now, we will give a background color to the <code>body<\/code> (that should be lighter than the color base) as well as specifying the font family and font size. We can approach the effect using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lesscss.org\/#-color-functions\">Color functions<\/a>:<\/p>\n<p>The following code will lighten the background at 30%.<\/p>\n<pre>body {\r\n\tbackground: lighten(@theme, 30%);\r\n\tfont-family: AsapRegular, sans-serif;\r\n\tfont-size: 11pt;\r\n}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img6-step1.jpg\" alt=\"Step 1- Styling the Body with Color functions\" width=\"600\" height=\"250\"><\/figure>\n<h3>Styling the Navigation with Nested Rule<\/h3>\n<p>In LESS we are able to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lesscss.org\/#-nested-rules\">nest styles<\/a> directly under its parent. Let\u2019s take a look at the code below.<\/p>\n<p>The <code>nav<\/code> tag that contains all the necessary elements for the navigation will be given the following styles.<\/p>\n<pre>nav {\r\n\tmargin: 50px auto 0;\r\n\twidth: 788px;\r\n\theight: 45px;\r\n\t.border;\r\n\t.shadow;\r\n}<\/pre>\n<p>Notice that, instead of giving a bunch of CSS rules again, I only inserted <code>.border<\/code> to give the border style and <code>.shadow<\/code> to add shadow. In real cases, these set of classes can be reused in another element as well, wherever it\u2019s needed.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img7-step2.jpg\" alt=\"Step 2 - Styling the Navigation with Nested Rule\" width=\"600\" height=\"250\"><\/figure>\n<p>Next, we give styles for the <code>ul<\/code> inside the <code>nav<\/code> to have zero padding and margin. Not so long ago we will approach the style by writing something like this:<\/p>\n<pre>nav {\r\n\t...\r\n}\r\nnav ul {\r\n\t...\r\n}<\/pre>\n<p>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.<\/p>\n<p>Now, we can do something like this:<\/p>\n<pre>nav {\r\n\tmargin: 50px auto 0;\r\n\twidth: 788px;\r\n\theight: 45px;\r\n\t.border;\r\n\t.shadow;\r\n\tul {\r\n\t\tpadding: 0;\r\n\t\tmargin: 0;\r\n\t}\r\n}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img8-step3.jpg\" alt=\"Step 3 - Zero Padding & Margin\" width=\"600\" height=\"250\"><\/figure>\n<p>And then the menu will be displayed in a row using <code>display: inline<\/code> property.<\/p>\n<pre>nav {\r\n\tmargin: 50px auto 0;\r\n\twidth: 788px;\r\n\theight: 45px;\r\n\t.border;\r\n\t.shadow;\r\n\tul {\r\n\t\tpadding: 0;\r\n\t\tmargin: 0;\r\n\t\tli {\r\n\t\t\tdisplay: inline;\r\n\t\t}\r\n\t}\r\n}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img9-step4.jpg\" alt=\"Step 4 - Display: Inline\" width=\"600\" height=\"250\"><\/figure>\n<p>In the syntax below we specify the menu anchor tag style and add our predefined styles, those are: <code>.textcolor<\/code>, <code>.divider<\/code>, <code>.gradient<\/code>.<\/p>\n<pre>nav {\r\n\tmargin: 50px auto 0;\r\n\twidth: 788px;\r\n\theight: 45px;\r\n\t.border;\r\n\t.shadow;\r\n\tul {\r\n\t\tpadding: 0;\r\n\t\tmargin: 0;\r\n\t\tli {\r\n\t\t\tdisplay: inline;\r\n\t\t\ta {\r\n\t\t\t\ttext-decoration: none;\r\n\t\t\t\tdisplay: inline-block;\r\n\t\t\t\tfloat: left;\r\n\t\t\t\twidth: 156px;\r\n\t\t\t\theight: 45px;\r\n\t\t\t\ttext-align: center;\r\n\t\t\t\tline-height: 300%;\r\n\t\t\t\t.textcolor(#f2f2f2); \/\/ You can change this line\r\n\t\t\t\t.divider;\r\n\t\t\t\t.gradient;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}<\/pre>\n<p>In the code above we apply hex color <code>#f2f2f2<\/code> in which the lightness is considered above 50%, so we would expect to see the shadow to become dark (automatically). The rest of the code I am sure is quite self-explanatory.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img10-step5.jpg\" alt=\"Step 5 - Overflow\" width=\"600\" height=\"250\"><\/figure>\n<p>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.<\/p>\n<pre>nav {\t\r\n\tmargin: 50px auto 0;\r\n\twidth: 788px;\r\n\theight: 45px;\r\n\t.border;\r\n\t.shadow;\r\n\tul {\r\n\t\tpadding: 0;\r\n\t\tmargin: 0;\r\n\t\tli {\r\n\t\t\tdisplay: inline;\r\n\t\t\ta {\r\n\t\t\t\ttext-decoration: none;\r\n\t\t\t\tdisplay: inline-block;\r\n\t\t\t\tfloat: left;\r\n\t\t\t\twidth: 156px;\r\n\t\t\t\theight: 45px;\r\n\t\t\t\ttext-align: center;\r\n\t\t\t\tline-height: 300%;\r\n\t\t\t\t.textcolor(#f2f2f2); \/\/ You can change this line\r\n\t\t\t\t.divider;\r\n\t\t\t\t.gradient;\r\n\t\t\t}\r\n\t\t}\r\n\t\tli:first-child a {\r\n\t\t\tborder-left: none;\r\n\t\t}\r\n\t\tli:last-child a {\r\n\t\t\tborder-right: none;\r\n\t\t}\r\n\t}\r\n}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img11-step6.jpg\" alt=\"Step 6\" width=\"600\" height=\"250\"><\/figure>\n<h3>Hover State<\/h3>\n<p>For the last step we will add the hover effect. In LESS we can add <code>pseudo-element<\/code> such as <code>:hover<\/code> using <code>&<\/code> symbol.<\/p>\n<pre>nav {\r\n\tmargin: 50px auto 0;\r\n\twidth: 788px;\r\n\theight: 45px;\r\n\t.border;\r\n\t.shadow;\r\n\t\tul {\r\n\t\t\tpadding: 0;\r\n\t\t\tmargin: 0;\r\n\t\t\tli {\r\n\t\t\t\tdisplay: inline;\r\n\t\t\t\ta {\r\n\t\t\t\t\ttext-decoration: none;\r\n\t\t\t\t\tdisplay: inline-block;\r\n\t\t\t\t\tfloat: left;\r\n\t\t\t\t\twidth: 156px;\r\n\t\t\t\t\theight: 45px;\r\n\t\t\t\t\ttext-align: center;\r\n\t\t\t\t\tline-height: 300%;\r\n\t\t\t\t\t.textcolor(#f2f2f2); \/\/ You can change this line\r\n\t\t\t\t\t.divider;\r\n\t\t\t\t\t.gradient;\r\n\t\t\t\t\t&:hover {\r\n\t\t\t\t\t\t.hovereffect;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tli:first-child a {\r\n\t\t\t\tborder-left: none;\r\n\t\t\t}\r\n\t\t\tli:last-child a {\r\n\t\t\t\tborder-right: none;\r\n\t\t\t}\r\n\t\t}\r\n\t}<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img12-step7.jpg\" alt=\"Step 7 - on:hover\" width=\"600\" height=\"250\"><\/figure>\n<h3>Change the color theme<\/h3>\n<p>Here 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.<\/p>\n<p>In this case, I will change the navigation color to be a bit lighter. Simply change the following two lines.<\/p>\n<pre>@theme: #ccc; \/\/Change this<\/pre>\n<pre>.textcolor(#555); \/\/And this<\/pre>\n<p>And here is the result.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img13-step8.jpg\" alt=\"Result\" width=\"600\" height=\"250\"><\/figure>\n<h2>Compile LESS into CSS<\/h2>\n<p>When we are still using the LESS JavaScript, it will grab the <code>.less<\/code> file and translate it into static CSS so that the standard browser can interpret it. This is a double job in the client side, not to mention redundant and wastes bandwidth. The main point of LESS is in the workflow to simplify our practice in compiling static CSS to be more dynamic and programmable.<\/p>\n<p>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.<\/p>\n<p>Click the <strong>Crunch It!<\/strong> big button.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img15-crunch-it.jpg\" alt=\"Crunch It!\" width=\"600\" height=\"250\"><\/figure>\n<p>Save the .less in our exercise file, link it to the HTML document and unlink the <code>.less<\/code> & <code>less.js<\/code> file from the document.<\/p>\n<pre>\r\n.shadow { box-shadow: 0 1px 2px 0 #555555; }\r\n \r\n.divider {\r\n\tborder-style: solid;\r\n\tborder-width: 0 1px 0 1px;\r\n\tborder-color: transparent #444444 transparent #888888; }\r\n \r\n.gradient { background: linear-gradient(top, #7a7a7a 0%, #6c6c6c 50%, #545454 51%, #6a6a6a 100%); }\r\n \r\n.hovereffect { background: linear-gradient(top, #545454 0%, #434343 50%, #333333 51%, #505050 100%); }\r\n \r\n@font-face {\r\n\tfont-family: 'AsapRegular';\r\n\tsrc: url('fonts\/Asap-Regular-webfont.eot');\r\n\tsrc: 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');\r\n\tfont-weight: normal;\r\n\tfont-style: normal; }\r\n \r\nbody {\r\n\tbackground: #a2a2a2;\r\n\tfont-family: AsapRegular,sans-serif;\r\n\tfont-size: 11pt; }\r\n \r\nnav {\r\n\tmargin: 50px auto 0;\r\n\twidth: 788px;\r\n\theight: 45px;\r\n\tborder-radius: 3px;\r\n\tborder: 1px solid #505050;\r\n\tbox-shadow: 0 1px 2px 0 #555555; }\r\n \r\nnav ul {\r\n\tpadding: 0;\r\n\tmargin: 0; }\r\n \r\nnav ul li { display: inline; }\r\n \r\nnav ul li a {\r\n\ttext-decoration: none;\r\n\tdisplay: inline-block;\r\n\tfloat: left;\r\n\twidth: 156px;\r\n\theight: 45px;\r\n\ttext-align: center;\r\n\tline-height: 300%;\r\n\tcolor: #f2f2f2;\r\n\ttext-shadow: 1px 1px 0px #000000;\r\n\tborder-style: solid;\r\n\tborder-width: 0 1px 0 1px;\r\n\tborder-color: transparent #444444 transparent #888888;\r\n\tbackground: linear-gradient(top, #7a7a7a 0%, #6c6c6c 50%, #545454 51%, #6a6a6a 100%); }\r\n\tnav ul li a:hover { background: linear-gradient(top, #545454 0%, #434343 50%, #333333 51%, #505050 100%); }\r\n\tnav ul li:first-child a { border-left: none; }\r\n\tnav ul li:last-child a { border-right: none; }\r\n<\/pre>\n<p>Let\u2019s take a look at the result once again.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img14-step9.jpg\" alt=\"Final Result\" width=\"600\" height=\"250\"><\/figure>\n<p>And we are done, please feel free to experiment with it.<\/p>\n<h2>Conclusion<\/h2>\n<p>We have learned many things about LESS language today, such as:<\/p>\n<ul>\n<li>Variables.<\/li>\n<li>Mixins<\/li>\n<li>Parametric Mixins<\/li>\n<li>Operations<\/li>\n<li>Guarded Mixins<\/li>\n<li>And Nested Rules<\/li>\n<\/ul>\n<p>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.<\/p>\n<ul class=\"download download-2c\">\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/demo\/index.html\">Demo<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/less-source.zip\">Download source<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>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&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3392,3395],"tags":[507,506,2016,1980],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>LESS CSS Tutorial: Designing A Slick Menu Navigation bar - Hongkiat<\/title>\n<meta name=\"description\" content=\"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,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"LESS CSS Tutorial: Designing A Slick Menu Navigation bar\" \/>\n<meta property=\"og:description\" content=\"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,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-04-10T13:01:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T16:45:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img2-apple-nav.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-css-tutorial-design-slick-menu-nav-bar\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-css-tutorial-design-slick-menu-nav-bar\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"LESS CSS Tutorial: Designing A Slick Menu Navigation bar\",\"datePublished\":\"2012-04-10T13:01:55+00:00\",\"dateModified\":\"2025-04-03T16:45:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-css-tutorial-design-slick-menu-nav-bar\\\/\"},\"wordCount\":1831,\"commentCount\":68,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-css-tutorial-design-slick-menu-nav-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/less-css-tutorial\\\/img2-apple-nav.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\",\"Less\"],\"articleSection\":[\"Coding\",\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-css-tutorial-design-slick-menu-nav-bar\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-css-tutorial-design-slick-menu-nav-bar\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-css-tutorial-design-slick-menu-nav-bar\\\/\",\"name\":\"LESS CSS Tutorial: Designing A Slick Menu Navigation bar - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-css-tutorial-design-slick-menu-nav-bar\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-css-tutorial-design-slick-menu-nav-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/less-css-tutorial\\\/img2-apple-nav.jpg\",\"datePublished\":\"2012-04-10T13:01:55+00:00\",\"dateModified\":\"2025-04-03T16:45:17+00:00\",\"description\":\"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,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-css-tutorial-design-slick-menu-nav-bar\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-css-tutorial-design-slick-menu-nav-bar\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-css-tutorial-design-slick-menu-nav-bar\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/less-css-tutorial\\\/img2-apple-nav.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/less-css-tutorial\\\/img2-apple-nav.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/less-css-tutorial-design-slick-menu-nav-bar\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"LESS CSS Tutorial: Designing A Slick Menu Navigation bar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"LESS CSS Tutorial: Designing A Slick Menu Navigation bar - Hongkiat","description":"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,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/","og_locale":"en_US","og_type":"article","og_title":"LESS CSS Tutorial: Designing A Slick Menu Navigation bar","og_description":"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,","og_url":"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-04-10T13:01:55+00:00","article_modified_time":"2025-04-03T16:45:17+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img2-apple-nav.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"LESS CSS Tutorial: Designing A Slick Menu Navigation bar","datePublished":"2012-04-10T13:01:55+00:00","dateModified":"2025-04-03T16:45:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/"},"wordCount":1831,"commentCount":68,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img2-apple-nav.jpg","keywords":["CSS","HTML","HTML5 \/ CSS3 Tutorials","Less"],"articleSection":["Coding","UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/","url":"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/","name":"LESS CSS Tutorial: Designing A Slick Menu Navigation bar - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img2-apple-nav.jpg","datePublished":"2012-04-10T13:01:55+00:00","dateModified":"2025-04-03T16:45:17+00:00","description":"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,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img2-apple-nav.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/less-css-tutorial\/img2-apple-nav.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/less-css-tutorial-design-slick-menu-nav-bar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"LESS CSS Tutorial: Designing A Slick Menu Navigation bar"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3t9","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/13339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=13339"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/13339\/revisions"}],"predecessor-version":[{"id":73516,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/13339\/revisions\/73516"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=13339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=13339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=13339"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=13339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}