"Awesome UI Kit"
Bootstrap 3.3.0 Snippet by bmoeller1

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
// Inspiration taken from Mike | Creative Mints
// - Dribbble.com page -> http://drbl.in/ghSU
Tried to keep it clean and documented. It's not absolutely perfect and I haven't tested it in many of the older browsers,
but I will try and tweak it when I see an issue or someone mentions it. Always love the work the designers over at Dribbble.com
put together. I wanted to attempt to mimic their photoshop work and provide some fun widgets for you Bootstrappers.
** Brian Moeller
-->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Docs at http://simpleweatherjs.com -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script>
<!-- Docs at http://www.chartjs.org -->
<script src="//www.chartjs.org/assets/Chart.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<!--
****** NAVIGATION WIDGET *******
-->
<div id="nav-widget" class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn text-uppercase"><i class="fa fa-map-marker fa-2x"></i> Check In<span class="badge">6</span></button>
</div>
<div class="btn-group">
<button type="button" class="btn text-uppercase"><i class="fa fa-bell fa-2x"></i> Events</button>
</div>
<div class="btn-group">
<button type="button" class="btn text-uppercase"><i class="fa fa-user fa-2x"></i> Account</button>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
// Inspiration taken from Mike | Creative Mints
// - Dribbble.com page -> http://drbl.in/ghSU
Tried to keep it clean and documented. It's not absolutely perfect and I haven't tested it in many of the older browsers,
but I will try and tweak it when I see an issue or someone mentions it. Always love the work the designers over at Dribbble.com
put together. I wanted to attempt to mimic their photoshop work and provide some fun widgets for you Bootstrappers.
- Brian Moeller
*/
@font-face {
font-family: 'weather';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
font-weight: normal;
font-style: normal;
}
html {
width: 100%;
height: 100%;
}
body {
padding: 45px 0;
font: 14px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #8F7F70;
background: #dec8bb; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RlYzhiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMxJSIgc3RvcC1jb2xvcj0iI2FjOGU3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iI2JkYTI4NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4NzZkNTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #dec8bb 0%, #ac8e74 31%, #bda285 66%, #876d52 100%); /* FF3.6+ */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function() {
// Docs at http://simpleweatherjs.com
$.simpleWeather({
location: 'New York, NY',
woeid: '',
unit: 'f',
success: function(weather) {
current = weather.temp+'° <i class="icon-'+weather.code+'"></i>';
hiTemp = 'Hi '+weather.high+'°';
wind = weather.wind.speed+' '+weather.units.speed;
$("#weather-widget #current").html(current);
$("#weather-widget #hiTemp").html(hiTemp);
$("#weather-widget #wind").html(wind);
},
error: function(error) {
$("#weather").html('<p>'+error+'</p>');
}
});
//Docs at http://www.chartjs.org
var pie_data = [
{
value: 300,
color:"#4DAF7C",
highlight: "#55BC75",
label: "Video"
},
{
value: 50,
color: "#EAC85D",
highlight: "#f9d463",
label: "Audio"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Full Calendar
Awesome Search Box
My Awesome Login Page
Awesome discount label

Questions / Comments:

great job !! you the man

Wahyu Adnyana () - 9 years ago - Reply 0

Thanks!

Brian Moeller () - 9 years ago - Reply 0

Awesome bos..

RIO BAHTIAR () - 9 years ago - Reply 0

hi, Great stuff! realy Awesome :)

i want to use the Doughnut chart, can i add tect in the center of it?

plus, can i do labels for each section?

jony () - 9 years ago - Reply 0

I don't know that you can add text into the center of the chart natively. You probably can do it through css after it has been created. Here is where you can find all the details/documentation on this chart and many others (http://www.chartjs.org/docs.... Yes you can do labels. They are on on my example. You need to hover over the chart section to see the details. If you are referring to a legend, I did not explore that, but it wouldn't be hard to generate one on your own.

Brian Moeller () - 9 years ago - Reply 0

Hi Brian,

i will look into it and try to work it out.

Thanks :)

jony () - 9 years ago - Reply 0

Great!

allaghi () - 10 years ago - Reply 0

Like a boss.

Bang () - 10 years ago - Reply 0

awesome work man.

Victor Alves () - 10 years ago - Reply 0

this is sex

nate () - 10 years ago - Reply 0

Fantastic work, thank you for sharing!

Morris () - 10 years ago - Reply 0

you can create a home page for wallpapers site ...?? with this example thumbnails ... i like this ..

zerg () - 10 years ago - Reply 0

I just looked at the image the designer had created and did my best to recreate it by hand. There were no programs that rendered it in HTML for me. There are tools like "Brackets" that will help with that cross over, but you still have to do the work :) I didn't use that. I just used plain old HTML and CSS to figure it out

Brian Moeller () - 10 years ago - Reply 0

Any Tools used for designing or core css , HTML?

Ishwar () - 10 years ago - Reply 0

Hi Ishwar.....I didn't use any specific tools for this work. Just used the Bootsnipp CSS and HTML editor for the snippet. Outside of Bootsnipp, I typically use Sublime Text 3 for coding. I recently saw a newer up and coming development environment called "Brackets" that is geared more towards front end designers. May want to take a look at that for CSS and HTML editing.

Brian Moeller () - 10 years ago - Reply 0

Hope you guys enjoy it!

Brian Moeller () - 10 years ago - Reply 0

Beautiful design <3

kidateBongo () - 8 years ago - Reply 0

nice job!, this will be really helpful to me thank you so much

nesticle8bit () - 8 years ago - Reply 0

Thanks for the reply :)

ishwar () - 10 years ago - Reply 0