How We Use LESS with Bootstrap
Scott MorrisSolutions Engineer
Having been with 4mation since inception in 2001 while completing a Computer Science degree at UTS, Scott has played a variety of roles within the business through its almost 20 years of growth.
As a Certified AWS Solutions Architect, Scott has a strong ability to bridge the gap between the technical and business/user world. Scott has a deep understanding of the service we provide our clients having spent years as a Developer, Business Analyst, Team Lead, and Head of Delivery.
His focus now is heading up 4mation’s Internal Operations to make our work and suite of digital tools as efficient and effective as possible.
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.
What is LESS?
LESS is a dynamic style sheet language that extends CSS and runs on both client side and server side, in Node.js.
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.
What is Bootstrap?
Bootstrap is one of the most popular, open-source front-end development framework. It relies on HTML, CSS and JS, helping to develop responsive, mobile-first websites and applications.
Recently we have been starting off a number of projects with 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 Bootstrap?
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 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 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 Bootstrap website and checking out everything it has to offer. Another great website you can use to get customised Bootstrap themes is Bootswatch.
About The Author
