This app is developed to provide customers information related to companies, their operations, case studies and much more. It also includes a simple form to generate prospective leads on location.

Kit Digital in Action

App Screens

Until next time.

Stylus is an expressive, dynamic, robust CSS pre-processor from what i’ve seen, and it packs more power than Less & Sass.

Stylus comes equipped with all the features that Sass / Less provides. On top of that, it supports better Inheritance, top notch Error Reporting and provides flexibility when it come to your preference in writing code.

In this tutorial, we’ll take a look at how to install Stylus on Windows and compile the CSS using command line.

- Installation

To install Stylus , we require Nodejs. If you already have Nodejs installed on your system, you can skip the next step.

1- Installing NodeJS

Installing NodeJS on windows is very easy. Just download their installer and run it. After successful installation, a reboot might be required.

To check if it installed successfully, run the following in your Windows command line.

npm

If you see “Usage” output, you are in luck.

2- Installing Stylus

Once Nodejs is installed, we can install Stylus through NPM(node package manager). Here’s the command:

npm install stylus -g

You will see Package manager download files required to run Stylus. Copy them to appropriate places. Once installed, you can test by compiling a sample file like this:

//stylus files are save as .styl extension.

stylus -c sample.styl

You will see “compiled sample.css” or an error if there was some problem with compiling.

Amazing init? You got yourself a working Css Pre-processor.

Now, lets take a look at stylus language itself, we’ll start with

Code Writing Styles

Stylus allows you to write code in many ways, if you don’t like braces?

//stylus will still understand your code without braces.

a.button
  -webkit-border-radius: 5px
  -moz-border-radius: 5px
  border-radius: 5px

Instead, why not drop the colons and make it more simpler? See Below:

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

body
  font 12px Helvetica, Arial, sans-serif

a.button
  border-radius(5px)

pretty slick?

Variables

Stylus does not require you to use a ‘$’ like Sass or ‘@’ like Less does, but it does support the ‘$’ symbol like prepend. So, if you are coming from Sass, you won’t have difficulties with variables and if you are coming from Less, I’d say just don’t use any prepend. (recommended)

font-size = 14px

body
   font font-size Arial, sans-serif

output:

body {
   font: 14px Arial, sans-serif;
 }

Here’s another example using variable as Expression.

font-size = 14px
font = font-size "Lucida Grande", Arial

body
  font font sans-serif

output:

body {
  font: 14px "Lucida Grande", Arial sans-serif;
}

Interpolation

Interpolation is another great feature. It’s a way to use an expression, which becomes part of the identifier { … }

table
  for row in 1 2 3 4 5
    tr:nth-child({row})
      height: 10px * row

output:

table tr:nth-child(1) {
  height: 10px;
}
table tr:nth-child(2) {
  height: 20px;
}
table tr:nth-child(3) {
  height: 30px;
}
table tr:nth-child(4) {
  height: 40px;
}
table tr:nth-child(5) {
  height: 50px;
}

Operators

Stylus provides wide variety of math operator support like Less / Sass.

leftSpace = 10

a.Link
  margin: (24px/2)
  left: 5 * leftSpace
  padding: 4px - 2

output:

a.Link {
  margin:12px;
  left:50;
  padding:2px
}

Mixins

Mixins are much similar to functions, but used in a different way, i.e a statement rather than part of an expression.

border-radius(a)
  -webkit-border-radius a
  -moz-border-radius a
  border-radius a

input[type=input]
  border-radius(5px)

output:

input[type=input]{
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 border-radius:5px
}

Built-in Functions

Stylus provides a wide range of built-in functions. Here are some of them:

red(color) /*Return the red component of the given color, same for green and blue*/
dark(black) /*returns true if the color is dark otherwise false*/

lighten(color, 10%); /* returns a color 10% lighter than 'color' */
darken(color, 10%);  /* returns a color 10% darker than 'color' */

saturate(color, 10%);   /* returns a color 10% more saturated than 'color' */
desaturate(color, 10%); /* returns a color 10% less saturated than 'color' */

Conditional Statements

If you want to do something specific based on some condition or a value, you are in the right place.

Trust me, Stylus provides a very easy and generic syntax. I still remember that it took me 20 good mins to figure it out in Less.

Here’s how it works:

overload-padding = true

/*if overload-padding is true swap padding for margins*/
if overload-padding
  padding(y, x)
    margin y x

body
  padding 5px 10px

output:

body{margin:5px 10px}

Inheritance

Stylus provides better Inheritance than Less and also Sass in some conditions. Here’s how it works:

red = #E33E1E
yellow = #E2E21E

.message
 padding: 10px
 font: 14px Helvetica
 border: 1px solid #eee

.warning
 @extends .message
 border-color: yellow
 background: yellow + 70%

.error
 @extends .message
 border-color: red
 background: red + 70%

.fatal
 @extends .error
 font-weight: bold
 color: red

output:

.message, .warning, .error, .fatal{ padding:10px; font:14px Helvetica; border:1px solid #eee}
.warning{ border-color:#e2e21e; background:#f6f6bc }
.error, .fatal{ border-color:#e33e1e; background:#f7c5bc }
.fatal{ font-weight:bold; color:#e33e1e}

Error Reporting

Error Reporting is where Stylus is far superior than less, and somehow better than Sass.

another example, where error is in the included file.

We have just barely scratched the surface… For more check out Stylus Documentation

That’s all for today, ciao.

01- Display Loading Graphic Until Page Fully Loaded

$(window).load(function() {
    // Animate loader off screen
    $("#loader").animate({
        top: -200
        }, 1500);
});
// where loader is <img src="download.png" id="loader">
//and first element to be loaded.

02- How to Bind a function to an event

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

03- Smooth scrolling to an anchor

$(document).ready(function() {
	$("myLink").click(function() {
		$("html, body").animate({
			scrollTop: $($(this).attr("href")).offset().top + "px"
		}, {
			duration: 450,
			easing: "easeOutBounce"
		});
		return false;
	});
});

04- How to Switch StyleSheets With jQuery

	$('link[media='screen']').attr('href', 'Alternative.css');

05- Add :nth-of-type to jQuery

$.expr[':']['nth-of-type'] = function(elem, i, match) {
    var parts = match[3].split("+");
    return (i + 1 - (parts[1] || 0)) % parseInt(parts[0], 10) === 0;
};

06- How to find out the index of an element in an unordered set

$(document).ready(function(){
 $("ul > li").click(function () {
     var index = $(this).prevAll().length;
 });
});

07- Disable right mouse click

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

08- How to refresh the src of an image with jQuery

$(document).ready(function(){
   $(imageobj).attr('src', $(imageobj)
           .attr('src') + '?' + Math.random() );
});

09- Automatically Discover Document Links And Apply Class

$(document).ready(function(){
   $('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
       $(this).addClass(C[1]);
   }
});
});

10- Better Broken Image Handling

//  images that a browser can't find fire off an "error" JavaScript event we can watch for.
$('img').error(function(){
        $(this).attr('src', 'missing.png');
});

// Or, hide them
$("img").error(function(){
        $(this).hide();
});

Hope this helps.

White Blue Web/UI Elements

Dark UI Kit (Part 1 of 2)

Blaubarry UI Kit

Sleek UI Elements

UI Bundle

iTunes Inspired UI Kit

Butterscotch UI Kit

Black UI Kit

Dark UI kit (Part 2 of 2)

Web UI Set

Futurico – Free User Interface Elements Pack

Cloudy UI kit

Modern UI Kit

Glossy 3D UI Kit

Moonify UI

Detailed UI Kit

Vertical Navigation Menu

Vector UI Kit

Code Light

Code Bold

Some cool usage.

Until Next Week, Ciao.

The Package includes 3 different skins(psd’s)

let us know if you liked it.

Here’s your inspirational dose for today.

TNK Pulsar.

Intel Fashion show | Intro loop.

MeeGo OS Promo. How MeeGo works with social network.

Intel Fashion show | Acer.

Megafon | Winter sports.

Music video for KORNEY`s “FLARES”.

Intel Fashion show | HP.

Eurovision`09 IDs sketches.

That’s it for today folks and do tell us which creative artists you like/follow for inspiration.

]]> http://bootstrap.pk/inspiration/featured-artist-danil-krivoruchko/feed/ 0 http://bootstrap.pk/inspiration/20-amazing-retro-html5-websites/ http://bootstrap.pk/inspiration/20-amazing-retro-html5-websites/#comments Sun, 26 Jun 2011 06:14:04 +0000 LabibJ http://bootstrap.pk/?p=2881 Hi
Last week we posted an showcased some Amazing HTML5 Websites for your inspiration.

This week, it’s 20 Amazing Retro HTML5 Websites.
As the next-gen fundamental markup language, HTML5 has already redefined the possibilities of ideas in web design & development. Below are some websites that have done exactly that with a little twist of Vintage & Retro design.

Enjoy.

Visual Republic

Paradox-Labs

Pointless Corp

Love, Detroit

Jewell And Ginnie

Rainypixels

Ryan Scherf

BountyBev

HD Live

Florida After Seven

Quality Laundry Professionals

Love For Japan

Marc Thomas

Peter Coles

Orlando Advertising

EduSoCal’11

Bronco

Activate

Dilly Deli

FRONTEND 2011

]]> http://bootstrap.pk/inspiration/20-amazing-retro-html5-websites/feed/ 1 http://bootstrap.pk/tutorials/css-based-three-state-buttons-better-ux/ http://bootstrap.pk/tutorials/css-based-three-state-buttons-better-ux/#comments Fri, 24 Jun 2011 17:03:19 +0000 Tamuir khan http://bootstrap.pk/?p=2852 Hello Folks, here i am with another small but very nifty technique for making Three states button, i was rigging the User Interface for a prototype that i was building, it required me to have push buttons that would be controlled through Javascript|jQuery later on.

My Image Sprites

So what i did was create a simple Html based Anchor Tags and by using one of the Image replacement techniques, i was able to achieve this effect, which i thought i would share with you guys as a small tutorial.

Here is my Html Markup

<body>
<div id="container">
  <h1>DEMO: CSS Based Three State Buttons - Better UX</h1>
  <div id="submitBtn"> <a class="submitApp" href="#" title="Submit my Application"></a> </div>
  <div id="attachImg"> <a class="attach" href="#" title="Submit my Application"></a> </div>
</div>
</body>

CSS Styles

* {
	margin:0px;
	padding:0px;
}
body {
	font-family: 'Nunito', serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	text-shadow: none;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0em;
	word-spacing: 0em;
	line-height: 1.2;
}
#container {
	margin: 0px auto;
	overflow:hidden;
	width: 800px;
}
h1 {
	padding: 50px 0;
	width: 550px;
}
#submitBtn {
	margin: 15px 0px;
}
a.submitApp {
	background:url(imgs/submitmyapp.png) no-repeat top;
	width: 194px;
	height: 42px;
	text-indent: 9999;
	display:block
}
a.submitApp:hover {
	background-position: 0 -52px;
}
a.submitApp:active {
	background-position: 0 -105px;
}
a.attach {
	background:url(imgs/attach.png) no-repeat top;
	width: 136px;
	height: 40px;
	text-indent: 9999px;
	display:block
}
a.attach:hover {
	background-position: 0 -42px;
}
a.attach:active {
	background-position: 0 -82px;
}

Here’s how it looks in the browser.

Until Next time.. Ciao!

]]> http://bootstrap.pk/tutorials/css-based-three-state-buttons-better-ux/feed/ 0 http://bootstrap.pk/inspiration/random-inspiration-01-creative-ads-reels/ http://bootstrap.pk/inspiration/random-inspiration-01-creative-ads-reels/#comments Fri, 24 Jun 2011 02:19:50 +0000 LabibJ http://bootstrap.pk/?p=2781 Hello there.
Today, I would like to start a continuous weekly thread of Random Inspiration.
In this series, I would keep posting creative inspiration, be it videos, art, web work, amazing chocolate designs, you get the idea.

It is very essential that each one of us have our own muse.
The idea of a muse, it’s gradually being retained only to a specific type of people, although it doesn’t actually matter whether a person relates to anything creative by life or profession, muse is what keeps him going.

So sit back with that morning cup of joe of yours and I hope you find new inspiration from these Creative Ads & Reels.

Unleash Your Fingers

Discover the art of finger Tutting, a new kind of dance performed by JayFunk, from LA.

Why? by Oliver Latta

Why? – a personal statement by Oliver Latta for a presentation in his studies…

Shift V2 by Mirari

Experimental short film by Mirari, a unit of directors, designers, and animators.

Lamborghini “Aventador”

weareflink interprets the Lamborghini Aventador in this morphing video.

Partitura 001 by Quayola

Realtime sound visualisation made with custom software “Partitura” Sound by Telefon Tel Aviv.

Visual Identity for Voyage Group

creating a fantastic world +++ director’s cut by yasuhiro kobari.

Offf 2011 Year Zero

Some more amazing work by Onur Senturk, Enjoy!

Woodkid – Iron

Everything in slow motion looks better, and this video proves it…. the ending is epic!

Metamaterial

Metamaterials are artificial materials engineered to have properties that may not be found in nature.

Moullinex – Catalina

Music video for Catalina, a track off the Chocolat EP – Done with Kinect + Processing + Cinema 4D + After Effects.

Solar by Ben Reubold

Konkreet Performer

Konkreet Performer is a music control and performance instrument for the iPad. Its unique and intuitive multi-touch interface reconnects the musician’s
 actions directly with the music.

Onesize Reel

Onesize latest reel. All work directed, designed and created by Onesize. Music and sound design by Jeff Dodson

Black Ocean Ident

Brighton, UK based media agency Future Deluxe released nice but short motion identity made for one of their client.

Linus Lundin – Showreel 2010

A collection of Linus Lundi’s latest work including commercial and self initiated projects.

GTLK by Andrey Muratov

Concept: Components of the space. Between existence and “No!”. Alive – аbsorbs.

Silent Transitions

Silent Transitions is a personal project inspired by two verses from Scripture – 2 Samuel 22vs20 and Psalm 46vs10.

Shot with Canon 7D at 60 fps and slowed down to 1% using twixtor, Sigma 30mm f1.4 for the initial scenes and Tokina 11-16mm f2.8 for the jump sequences.

Warm Signal by silja

A short abstract movie dealing with nature and maritime creatures, metamorphosis and transformation – it connects art and science. Strong emphasis on sound, related to the idea of visual music. The Style is soft but clean, focusing on black & white.

VIVA Channel Rebrand 2011

Core by selfburning

Experimental short film Design and animation Selfburning, Sound design Alexey Devyanin.

Surface Detail

A myriad of details in an evolving fractal landscape.

2011 Reel: Chris Kelly

Motion designer Chris Kelly launches a new reel!

The Limousines – Very Busy People

Music video for The Limousines – Very Busy People.

T4 Idents by Double G Studios

“Inspired by our love of robots, double g studios won a competitive pitch to direct and animate 20 energetic idents for Channel 4′s T4. The personality of each robot was enhanced through costume design, choreography and their relationship with the new 3d logos.”

Make It Better

Great mix of typography and motion graphics.

Bloc 2011

David Terranova. Music: Krupp by Kritical Audio

Existence by Pierre Grimm

music by niveau zero in_sect, shot by gkaster

The Chase Film

To build excitement around the 2nd Generation Intel® Core™ i5 processor, Intel is launching an action-adventure video titled “The Chase.” The spot demonstrates the performance capabilities of the new processors by creating an action-movie style chase sequence that takes place through a wide variety of program windows on a computer desktop.

Entering the Stronghold by Matthias Muller

A stunning audio visual animation by Matthias Müller for the title song by Denny Schneidemesser!

Modern Times – Points to Future Times

Made with no money, just a little time and a lot of passion. – Amazing!

Kurz Und Schon Opener

Opening sequence for the shortfilm competition “kurzundschön” (Short & Nice) – Website

BMX Super Slow-Mo

Second and final slow motion test shot with a canon 7D and Edited with Twixtor in After Effects.

Meet Buck

Buck is an ordinary guy. Well…if you except the “deer head” thing. And today, Buck is gonna spend this cool Sunday afternoon with his girlfriend who’s so happy to see him (she’s pretty much always happy). But when Buck find out that her father is not the sympathic and tolerant guy he excpected, the Sunday afternoon turns really bad.

Cat Footwear by Paul Clements

Director / Compositor : Paul Clements Created for Cat / Fold7

Beta Excellent

Cool short intro for Beta Excellent University program, design & direction by Soulbase.

Showreel 2010 by AixSponza

Showreel by AixSponza, a Studio from Germany.

REEL: Upper First 2010

The new reel from Upper First is out, and its dope!

Refraction by Jesse Zanzinger

What do you get when you mix Oil and water? Refraction.

]]> http://bootstrap.pk/inspiration/random-inspiration-01-creative-ads-reels/feed/ 0