UI Kit’s are quite handy when it comes to design. They allow you to create beautiful and standardized interfaces pretty fast, with a lot of premade components that you can use and edit.
But when it comes to coding, they are not that common. Sure, you have some frameworks here and there, but complete HTML UI Kits are rare, and most times you may need to code that yourself. On the other hand, that’s a great opportunity to create a tool for yourself, a starter kit that will allow you to implement interfaces in no time.
So today we’ll see a few coding tips, and also implement 3 components in a way that they can be easily themed and placed anywhere in your site.
First things first
I know most of you just want to see it so here you can see the [link]LIVE DEMO[/link] and here you can Download the files so you can just play around with it.
Here is how it’ll look like:
The Road to El Dorado
A great trip starts with a good map. So unless you already have the layout you’ll need to find a UI Kit to implement. We’ve found a pretty good free UI Kit by Sergey Azovskiy. This will be our reference (tough we’ll modify it a little bit).
What to Implement
You could implement all those items but the truth is that probably you won’t need all of them. A few are pretty hard to code so it doesn’t worth the efforts of spending a lot of time in items that would be just sitting in your HD for a long time.
For these reasons we selected 3 items that will most certainly be used in your site:
- Main Navigation
- Button (Call to action)
- Pagination buttons
The good thing is that once created you could even turn them into shortcodes so you could use them in your pages (for buttons) or easily implement them in your theme (for pagination and menus).
The Starter HTML
You really don’t need to spend a lot of time in your “container” HTML, since it’s there just to showcase your items and also to help you testing them in a page. We’ll create a really simple structure based on the HTML5 boilerplate, this is the main HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html> <![endif]-->
<!--[if IE 7]> <html> <![endif]-->
<!--[if IE 8]> <html> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Designm.ag - HTML UI KIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/uikit.css">
</head>
<body>
<div id="content">
</div>
</body>
</html>
You don’t need to change a lot the default CSS, we’ve just added some CSS to position the main container, add that nice background image (from SubtlePatters.com) and position our content.
html, body {
background: #000 url(../img/tweed.png);
min-width: 100% ! important;
min-height: 100% ! important;
}
#content {
position: relative;
margin: 0 auto;
padding: 20px 30px;
max-width: 60em;
background: #ffffff;
box-shadow: 0 0 6px #fff;
}
#content h1 {
margin: 35px -30px 0;
padding: 15px 30px 20px;
border-top: 5px solid #eee;
}
.post {
background: #eee;
margin: 0 -30px;
padding: 20px 30px;
}
The Structure
Our goal here is to keep the updates as easy as possible, so you could modify items positioning, colors and tweak them without breaking anything. That’s why we’ll rely on some CSS3 properties so we can use no images and change pretty much everything we want in no time.
A simple way to concentrate all your color styles in a single call is adding a class in your main container. You could do that in your body tag also, but only if you are 100% sure that you’ll use the same “theme” for all items, otherwise you’ll need some ugly CSS rewriting that we are actually trying to avoid in the first place.
Here is a simple example of that class, modifying our main HTML a little bit
<div id="content" class="ui-orange">
Then all your color styles will actually reference to this class, not to the UI element itself.
#1 Main Navigation & Using tools for the heavy lifting
Now we’ll implement the main navigation. The HTML code for this area is a simple unordered list, as follows:
<ul id="main-menu" class="ui-main-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#" class="current">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
In the CSS area the magic starts, from now on all our edits will be in the uikit.css file. This is the basic code for the UL and LI:
.ui-main-menu {
padding: 0;
list-style-type: none;
overflow: hidden;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
}
.ui-main-menu li {
float: left;
}
Here you can notice that we are not declaring any colors. That’s because we’ll leave them to the bottom (or top if you want, whatever works better for you) of the file, like this:
/*****************/
/* Color Styles */
/*-- Orange */
.ui-orange .ui-main-menu {
border-color: #cfc8bc;
/* http://www.colorzilla.com/gradient-editor/ */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTFkOCIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U1ZTFkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(229,225,216,0.1) 0%, rgba(229,225,216,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,225,216,0.1)), color-stop(100%,rgba(229,225,216,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229,225,216,0.1) 0%,rgba(229,225,216,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229,225,216,0.1) 0%,rgba(229,225,216,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229,225,216,0.1) 0%,rgba(229,225,216,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(229,225,216,0.1) 0%,rgba(229,225,216,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ae5e1d8', endColorstr='#e5e1d8',GradientType=0 ); /* IE6-8 */
}
Now, this strange background color is actually generated using the CSS Gradient Generator from ColorZilla. You could punch your head against the wall and try to create your own CSS background, but using a tool for this is much easier and safer because they give you a lot of cross-browser code that is hard to remember while you’re coding.
Now we need to code the links, and here we’ll use a cool property that is underused: the CSS opacity. This is a really clean and easy way to implement hover effects without messing around with color codes, you just tell the CSS “Hey buddy, I think you should fade a little bit” and it’s done!
.ui-main-menu a {
display: block;
padding: 12px 22px 10px;
font-size: 14px;
line-height: 14px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
border-right: 1px solid transparent;
opacity: .75;
}
.ui-main-menu a:hover {
opacity: 1;
}
And then you just need some CSS to change the font color:
.ui-orange .ui-main-menu a {
color: #f45100;
border-right-color: #cfc8bc;
}
#2 Pagination & Don’t Repeat yourself
Here you’ll learn something simple and important: you’ve got to reuse your code. You can see that the main menu and pagination areas are really quite similar, so you could reuse a lot of code there. This is the basic HTML for that section:
<ul class="ui-pagination">
<li><a href="#">Previous Page</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#" class="current">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><span class="spacer">...</span></li>
<li><a href="#">12</a></li>
<li><a href="#">Next Page</a></li>
</ul>
Then the main properties can actually just be in the same declaration as you’ve added the main menu, like this:
.ui-main-menu, .ui-pagination {
padding: 0;
list-style-type: none;
overflow: hidden;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
}
.ui-main-menu li, .ui-pagination li {
float: left;
}
.ui-main-menu a, .ui-pagination a, .ui-pagination .spacer {
display: block;
padding: 12px 22px 10px;
font-size: 14px;
line-height: 14px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
border-right: 1px solid transparent;
opacity: .75;
}
.ui-main-menu a:hover, .ui-pagination a:hover {
opacity: 1;
}
/*****************/
/* Color Styles */
/*-- Orange */
.ui-orange .ui-main-menu, .ui-orange .ui-pagination {
border-color: #cfc8bc;
/* http://www.colorzilla.com/gradient-editor/ */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTFkOCIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U1ZTFkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(229,225,216,0.1) 0%, rgba(229,225,216,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,225,216,0.1)), color-stop(100%,rgba(229,225,216,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229,225,216,0.1) 0%,rgba(229,225,216,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229,225,216,0.1) 0%,rgba(229,225,216,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229,225,216,0.1) 0%,rgba(229,225,216,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(229,225,216,0.1) 0%,rgba(229,225,216,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ae5e1d8', endColorstr='#e5e1d8',GradientType=0 ); /* IE6-8 */
}
.ui-orange .ui-main-menu a, .ui-orange .ui-pagination a, .ui-pagination .spacer {
color: #f45100;
border-right-color: #cfc8bc;
}
And, of course you can create exceptions, like the current active item:
.ui-orange .ui-pagination .spacer {
color: #979797;
}
.ui-orange .ui-pagination .current {
text-shadow: 0 1px 0 #a1a40c;
color: #fff;
opacity: 1;
background: rgb(153,159,0); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk5OWYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkOGQ5MTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(153,159,0,1) 0%, rgba(216,217,22,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,159,0,1)), color-stop(100%,rgba(216,217,22,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(153,159,0,1) 0%,rgba(216,217,22,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(153,159,0,1) 0%,rgba(216,217,22,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(153,159,0,1) 0%,rgba(216,217,22,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(153,159,0,1) 0%,rgba(216,217,22,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999f00', endColorstr='#d8d916',GradientType=0 ); /* IE6-8 */
}
#3 Buttons & Taking it to the next level
Now things get more interesting. Here we’ll separate the background color from the CSS gradient. It all starts with the HTML, we’ll need one more tag to work on there, so we’ll add an extra span:
<a href="#"><span>Read More</span></a>
Now looking at the reference you’ll see that we have an orange gradient (from darker to lighter), so what we’ll do is, adding the background color in the main A tag and the gradient in the SPAN tag. So when you want to change the background color you can just change that in your A element. Here is an image explaining what will happen there:
Also we have an emboss effect there, but there’s no such a thing as a “emboss” CSS effect. We’ll actually use a darker shadow in the top, and a lighter “shadow” in the bottom that will work as a lightning effect, giving us the desired effect.
Here is the final code for all those effects:
.ui-button {
display: inline-block;
min-width: 130px;
color: #fff;
font-size: 14px;
line-height: 14px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-align: center;
border-radius: 15px;
border: 1px solid transparent;
overflow: hidden;
opacity: 1;
}
.ui-button span {
display: block;
padding: 10px;
/* http://www.colorzilla.com/gradient-editor/ */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.4) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.4) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); /* IE6-8 */
}
.ui-button:hover {
opacity: .9;
}
.ui-orange .ui-button {
text-shadow: 0 1px 0 #a22c00;
border-color: #d82d00;
background-color: #f97100;
box-shadow:
0 -1px 2px #aaa,
-2px -2px 4px #aaa,
2px -2px 4px #aaa,
0 2px 4px #fff,
-2px 2px 4px #fff,
-2px 2px 4px #fff,
0 2px 4px #fff,
-2px 2px 4px #fff,
-2px 2px 4px #fff,
0 1px 0 #FCAE6B inset
;
}
You can notice in the last bit that we’ve had to repeat the white shadow, that’s because it’s too soft at first, but you could certainly remove that if you want to.
Who would say that we can learn so many things with such a simple task as coding a button, huh?
What do you say?
So, what do you think about this? Would you implement a UI Kit in your site? What element do you find more useful to have as a premade component?
Source: http://designm.ag/resources/how-to-code-your-first-html-ui-kit/
No comments:
Post a Comment