Online Startups, Web Development

LESS & Twitter Bootstrap Awesomeness

Read More

June 20, 2012 Posted in Online Startups, Web Development

There are several tools that we use in the New Development Team to streamline our front end development process and I would like to go over the two that are currently the most important in helping produce high quality and long lasting websites & web applications.

LESS

LESS turns boring old CSS into a dynamic language where you can nest tags underneath each other and write complicated rules that can be re-used throughout your CSS Stylesheets.  To compile LESS into regular CSS markup on the fly we use a PHP library called lessphp.  We have a small in-house Asset library that uses an .htaccess file to capture all links to CSS files within the HTML document.  It will run those CSS files through the lessphp library and cache the results for the next request of that file.  Caching on the server is an important step as it takes the strain off the end user of having to use JavaScript to compile the LESS files (slow) and therefore provides your end users with an optimised web browsing experience with optimal loading times and minimal downloads.

Why do we use LESS?

The biggest reason we use LESS is the natural organisation that comes with writing nested CSS tags.  As one of Sydney’s larger web development agencies, we often come across new clients who have mega CSS stylesheets with over 3000+ lines of code, absolutely no organisation and rules were just added in wherever the developer decided to put them.  This can be an absolute nightmare where updating a rule in one part of the file effects several seemingly unrelated places throughout a site. LESS creates a hierarchy of rules that can accurately apply styles to elements within a HTML document, which we know won’t affect other similarly classed elements in the site.  If you visit the LESS home page you will see many examples of this, as well as other very interesting stuff.

Twitter Bootstrap

Recently we have been starting off a number of projects with Twitter Bootstrap as their foundation.  This provides our developers with a great starting point to build web standards compliant websites which will work across every browser and mobile device.  The foundation provides a set of responsive CSS styles that take into account the width of the browser window and will change the actual layout of the site to fit the screen size of the device requesting access.  This makes it very easy to develop a website that will work on desktops and mobile devices without doing too much extra work.  Reducing these tasks that are the core of most sites means that we can reduce the costs to our clients and concentrate our time towards the functionality people really want.

Why do we use Twitter Bootstrap?

Twitter Bootstrap really shines for us when we are developing a custom in-house web application that does not need a public facing site.  We can focus all of our efforts on the server side of the application and just plug in the different elements that Twitter Bootstrap has already created.  This has saved us hours of tedious front end work and we always deliver a very sharp looking and responsive UI that our clients absolutely love.  Another great thing about Twitter Bootstrap is they have separated out all of the different style sections into LESS files and you can just include when required whilst discarding what is not needed (less downloads, faster sites, happier end users).

I highly recommend visiting the Twitter Bootstrap website and checking out everything it  has to offer. Another great website you can use to get customised Twitter Bootstrap themes is Bootswatch.

For insights, tips and news join our newsletter