Introducing Bootswatch
Posted on November 3, 2012 by Sameera Thilakasiri
What’s Bootstrap Again?
Bootstrap is a popular web framework made by some talented people at Twitter. It allows even the most time-constrained and design-impaired to create nice-looking sites.
As more and more sites adopt Bootstrap though, a growing issue is the uniformity between them. You might already recognize the signature black bar and blue buttons. Here are a few examples, taken from Built with Bootstrap.
So how do I use Bootswatch?
First, head over to Bootswatch and pick a swatch. Download the bootswatch.min.css file associated with it.
In Bootstrap’s CSS directory, you’ll find a stylesheet in full (bootstrap.css) and minified (bootstrap.min.css) forms. Rename them or move them to a safe place. Then drop in the new CSS file and check that your HTML points to it. If you ever change your mind, simply drop in another swatch or switch back to the original.
What if I want to extend Bootswatch?
Bootswatch is an open source project, and you’re welcome to modify the swatches further or create your own. If you’re interested, fork or follow the GitHub repository.
Each raw swatch consists of two LESS files. One is variables.less, which is included by default in Bootstrap and allows you to customize these settings. The other is a new file called bootswatch.less that introduces more extensive changes.
First, add these two files to Bootstrap’s own LESS files. You’ll be overwriting the default variables.less.
Next, open up bootstrap.less and just before the line “Utility classes” at the end, add @import “bootswatch.less”;. This command includes bootswatch.less when compiling the LESS files to CSS, and placing it near the end overrides earlier styles with the same CSS selector specificity.
Now you can start customizing variables.less and bootswatch.less. You are also free to modify the other LESS files, which in some cases will be easier, but your swatch may become brittle to future changes in Bootstrap itself. When you’re ready to test your code, compile to CSS and enjoy!
Helpful resources
http://stylebootstrap.info/ Create unique web design with Twitter Bootstrap
http://getkickstrap.com/ ANY PLATFORM, ANY LANGUAGE, NO INSTALLATION.
A REVOLUTIONARY NEW WAY TO MAKE WEBSITES
Too many frameworks promise to make your life easy only to require you to install obscure dependencies. Kickstrap is ready out of the box. Just put Kickstrap on your server and begin making your website.
http://stackoverflow.com/questions/12745565/switching-between-twitter-bootstrap-themes
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: Bootswatch | Twitter-Bootstrap
The Closure Compiler reduces the size of your JavaScript files and makes them more efficient
Posted on October 29, 2012 by Sameera Thilakasiri
What is the Closure Compiler?
The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.
How can I use the Closure Compiler?
You can use the Closure Compiler as:
An open source Java application that you can run from the command line.
A simple web application.
A RESTful API.
To get started with the compiler, see “How do I start” to the right.
What are the benefits of using Closure Compiler?
Efficiency. The Closure Compiler reduces the size of your JavaScript files and makes them more efficient, helping your application to load faster and reducing your bandwidth needs.
Code checking. The Closure Compiler provides warnings for illegal JavaScript and warnings for potentially dangerous operations, helping you to produce JavaScript that is less buggy and easier to maintain.
You can try with http://closure-compiler.appspot.com/home
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: Closure Compiler | JavaScript | jQuery
window.orientation and the orientationchange event vs Modernizr.mq orientation
Posted on October 22, 2012 by Sameera Thilakasiri
Luckily on the latest smartphones you have some goodies available to you that you don’t have on the desktop (since desktop users aren’t in the habit of constantly turning their screens sideways!).
window.orientation: this property gives the current screen orientation: 0 in portrait mode, 90 when rotated left, -90 when rotated right (no special value when the screen is upside-down)
orientationchange event: this window event fires after every 90 degrees of rotation and, like other events, can be applied in various ways:
// DOM Level 0 (avoid)
window.onorientationchange = function(){};
// DOM Level 2
window.addEventListener('orientationchange', function(){}, false);
Orientation change using Modernizr
if(typeof Modernizr != "undefined" && Modernizr.mq('(orientation: portrait)')){
//alert('portrait');
}
else if(typeof Modernizr != "undefined" && Modernizr.mq('(orientation: landscape)')){
//alert('landscape');
}
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Debounced resize() jQuery plugin for smart resize
Posted on October 22, 2012 by Sameera Thilakasiri
If you’ve ever attached an event handler to the window’s resize event, you have probably noticed that while Firefox fires the event slow and sensibly, IE and Webkit go totally spastic.
- In IE, Safari, and Chrome many resize events fire as long as the user continues resizing the window.
- Opera uses as many resize events, but fires them all at the end of the resizing.
- Firefox fires one resize event at the end of the resizing.
Basically debouncing will fire your function after a threshold of time (e.g. 100ms) has elapsed since the last time it’s tried to fire. Throttling would withhold subsequent firings, but debouncing waits for the last one and runs that.
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
// usage:
$(window).smartresize(function(){
// code that takes it easy...
});
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: jQuery | jQuery Examples | jQuery Plugin | jQuery resize
Modernizr.load is a resource loader (CSS and JavaScript)
Posted on October 22, 2012 by Sameera Thilakasiri
Modernizr.load is a resource loader (CSS and JavaScript) that was made to specifically to work side-by-side with Modernizr. It’s optional in your build, but if you are loading polyfills(polyfills is downloadable code which provides facilities that are not built-in to a web browser.), There’s a good chance it can save you some bandwidth and boost performance a bit.
Modernizr.load syntax is generally very easy to understand, so we’ll start with a basic example:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
In this example, we decided that we should load a different script depending on whether geolocation is supported in the host browser or not. By doing this, you save users from having to download code that their browser does not need.
Modernizr at Responsive web design
Depending on the devise request the relevant files
Modernizr.load([ {
test: Modernizr.mq("only all"),
nope: 'testnope.js'// this is to check if media queries are supported at all
},
{
test: Modernizr.mq("only screen and (min-width: 960px) and (max-width:1440px)"),
yep: 'test3.js'
},
{
test: Modernizr.mq("only screen and (min-width: 768px) and (max-width: 959px)"),
yep: 'test2.js'
},
{
test: Modernizr.mq("only screen and (min-width:480px) and (max-width:767px)"),
yep: 'test1.js'
},
{
test: Modernizr.mq("only screen and (max-width:479px)"),//smallest screen
yep: 'test0.js'
}
]);
Modernizr touch detect and change the css file
Modernizr.load([{
test: Modernizr.touch,
yep: ["css/touch-controls.css", "js/touch-events.js"],
nope: ["css/no-touch-controls.css", "js/no-touch-events.js"]
}]);
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: Modernizr | Modernizr.load | Modernizr.mq | Modernizr.touch
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.