In previous posts, we’v taken a look at LESS, the superset of Cascading Style Sheets (CSS) that makes it perform much more like a full-blown programming language, as well as the Twitter’s Bootstrap framework built on it, which provides web designers a standardized toolset for UI elements. This post will delve into Joomla 3’s support of Bootstrap, and the implications that this has on its support for LESS as a result.
Because Joomla 3 fully implements Bootstrap, and because Bootstrap is built using LESS, it is only reasonable to think that Joomla 3 fully supports and implements LESS as well. And in a sense, it does – you can edit the LESS files that Bootstrap is made from in Joomla and recompile them. However, there are some things you should know about how LESS works in Joomla:
Or more accurately, all the hard work’s already been done for you. Bootstrap’s source files have all been precompiled as CSS and JavaScript files, which you can simply include or import into your own template. What’s more, if you used or modified Joomla Core’s default Protostar template, Bootstrap's pretty much baked in right from the start as well. Mind you, it’s a ‘slightly modified’ version of Bootstrap, so you do have to do your due diligence and take appropriate steps when using Bootstrap in Joomla 3.
In addition, changing the various defaults in Bootstrap can be done simply by invoking the Bootstrap Customizer and replacing the necessary files in your installation with the ones generated by the Customizer. The use of LESS does not come into the picture at all. Knowing how LESS works and being able to modify Bootstrap’s source code is a bonus, but it is hardly necessary for you to get full use out of Joomla.
To be precise, it does not provide a LESS compiler that you can run at will and on any LESS file you want. What it does have is a way for you to adapt a PHP script (generatecss.php) to compile LESS changes for your own template. You can also use a LESS Compiler Joomla plugin to do so every time you make a change. However, if you are serious about playing around with LESS, then you may have to install your own LESS compiler (many paid-for themes and templates include compilers). Given that the whole point of LESS was so that you could write so much less CSS, though, Joomla Core’s decision not to include a standalone compiler (many of which are open-source) is strange.
Assuming that you really do want to delve into LESS to change the default ways in which Joomla’s implementation of Bootstrap behaves, should you really directly modify the Bootstrap LESS files and recompile, or should you maybe override the behaviors in a custom LESS file and call that in your template? In this particular case, using overrides is probably the better solution, as it means that whenever a new version of Bootstrap (or Joomla, for that matter) is released, you can drop it in without worrying that your previous customization are totally lost.
In a previous post, we took a look at how LESS can help you manage your CSS, by providing you with a powerful superset of features that makes CSS feel (and work) much more like a traditional object-oriented programming language. Given the power that the LESS pre-processor provides to CSS, it’s no surprise that a lot of web design frameworks are built using LESS. Examples of such frameworks include fusionCSS, the Gantry framework, and the biggest contender of them all, Twitter’s Bootstrap.
In and of itself, Bootstrap is already quite a powerful framework that allows anyone to design a Web interface that just plain works, first time round. Part of what makes Bootstrap so compelling for Web developers, however, is the fact that it is extremely flexible. You can build your website using the UI components that come as default with each Bootstrap installation, and then use CSS (and hence LESS) to override them – making your website look like Windows (of any kind), or OSX, or KDE, or GNOME… anything you can think of.
One of the ways in which LESS is used by Bootstrap is through the modification of the various default settings that Bootstrap encodes as LESS variables. For example, in plain CSS, every style defined can include colour settings – but each colour value is set individually of the others, so if you have a series of related elements using the same colour(s), and you want to change them, you have to laboriously find-and-replace the colour number(s). By using LESS, Bootstrap centralises all of these default colours in defined variables, so you only need to change the values in the variable declarations for the changes to be reflected elsewhere.
Nor are colour values the only things that LESS (and Bootstrap) can store and use in variables. Anything that CSS accepts as valid values, including font types, pixel sizes, and percentages can be placed in a variable. Using LESS’ support of nesting, you can even place a variable inside another variable. Without changing a single line of your HTML page, you can make it look entirely different simply by manipulating the default values stored in the Bootstrap-defined variables.
In addition to default variables, Bootstrap also makes full use of mixins, the LESS equivalents of functions and procedures. Mixins essentially allow you to create a style class and import all the properties of that class into another class. By using variables with mixins, you can create a function that allows you to modify the default parameters of the mixin.
Mixins in Bootstrap are used to create various UI elements simply by calling them, rather than having to define these elements from scratch. In addition, Bootstrap mixins also allow you to apply a number of transform effects to various elements quickly and easily.
LESS supports various mathematical operations, namespaces and other advanced functionality which Bootstrap takes full advantage of. As a result, if you want to really play around with Bootstrap, you need to understand how LESS works and how Bootstrap builds itself on it as well.
In the early days of the World Wide Web (WWW), browsers were served static HTML pages. Page design back then was simple; only a few font families were supported, HTML was more or less “RTF + hyperlinks”, and the ability to incorporate graphics into the Web page was considered as cutting-edge. A lot of people would like to skip over the time that followed shortly thereafter, when Web sites had garish backgrounds and browsers introduced the infamous (and thankfully non-standard) <blink>and <marquee> tags. Content that was important or emphasized were highlighted by these and other similar HTML tags to draw people’s attention to them.
Over time, of course, people began to realise that while formatting tags such as <i> or <b> and content tags such as <em> or <strong> were usually rendered identically by the browser, they were supposed to be entirely different, semantically speaking. Strongly emphasizing a particular bit of text did not necessarily mean making it bold; a similar effect might be obtained by highlighting the text instead, and in certain circumstances, perhaps more desirable.
Enter Cascading Style Sheets, or CSS. By completely decoupling the semantics of HTML tags from the way they were presented in the browser, CSS enables both Web designer and Web user to customize the way that HTML pages look and feel. Given the same HTML input, but two different stylesheets, a browser may well render the pages entirely different. With CSS, you can modify almost every single HTML tag to mean precisely what you want them to mean, while allowing your HTML content to be almost free of formatting directives. CSS also gives you the option to control – and if need be, change wholesale – the look and feel of your entire website using a single file.
Well and good, but CSS by itself can be quite verbose, even though it’s supposed to cut down on the verbosity of your HTML output. It can also be tedious to modify, if the changes are significant enough. In this regard, CSS is not very different from the C programming language (and in fact, HTML5 + CSS3 is apparently Turing-complete). And just as C has the C pre-processor that greatly enhances it, CSS has Leaner CSS (LESS) as one of its pre-processors.
LESS is a super set of CSS, so you don’t have to unlearn anything to use it. It provides a number of useful features and capabilities that make CSS much, much easier to deploy. It also goes a long way into making CSS a full-fledged programming language, with the inclusion of variables, functions and operations.
If you have ever found CSS to be useful but difficult to work with, LESS can make your life much easier. Check LESS out at http://lesscss.org for a more in-depth tutorial at what its feature set is, how you can use it, its GitHub site and a reference manual. Once you start using LESS, you will never go back to normal CSS – and that’s a good thing.
Churches. Associations. Guilds. Clubs. Unions. Sports teams. Squads, companies, battalions and regiments. Mankind was designed to be social creatures from the beginning, and the varied number of ways in which we group together – and form bonds – proves the adage that “it is not good for Man to be alone”.
In the past, the primary means by which people kept in touch, renewed their bonds and shared information (otherwise known as ‘gossiping’) was by congregating in various locations that facilitated these social activities in a welcoming and warm environment. The village pub or local church halls served as informal community centres; men met together in country clubs outside of the workplace while women had sewing circles; and children socialised on the playground or during camps. Today, social media serve very much the same purposes.
The earliest form of ‘social’ media on the Internet was the Usenet newsgroups. Using NNTP to transfer information from news server to news server, Usenet allowed the formation of specific groups dedicated to particular interests or themes with people responding to posts from all over the world – the forerunner of modern Web forums.
During the same timeframe, Bulletin Board Systems (BBSes) were also quite popular as local phenomena, where users were mostly from within the same area code as the operator of the BBS. People would dial up to the BBS, where they could do many things including file transfers, email and posting bulletins. There were a few large BBSes (CompuServe, AOL and Prodigy come to mind), but by and large, a BBS served as the local watering hole for geeks and nerds.
Yet another early form of Internet social media was Internet Relay Chat (IRC), which was the forerunner of Instant Messaging (IM) and live chat clients and services. IRC was a natural progression of Usenet; where Usenet’s architecture was more like that of email, IRC allowed users to interact in real-time.
While most of these Internet services are still available, today’s social media revolves around the World Wide Web. Highly complex Web applications are now run on top of HTTP instead of their own specific protocols, and can provide all of the functionality of their predecessors… and more. Social networking sites such as Facebook, LinkedIn, Google+ and the like offer such a rich feature set and user experience that more and more, people spend most of their time on them.
The power of such sites and services lies in user-generated content. Social media sites are useful because people share so much of their personal details and even their entire lives on them. They are useful to people searching for those whom they have lost touch with, and for people to keep in touch with others. They are useful to the advertisers, who can target their advertising more effectively. They are useful to businessmen seeking to expand their network of contacts. And they are useful to organisations who conduct data mining.
Different types of social media services provide different unique propositions. Twitter offers the convenience of quick updates as well as easily-digestible sound bites. LinkedIn started out as a corporate networking tool for the high-level decision maker. And the current champion of the whole industry, Facebook, offers everything – email, IM, news, picture storage, corporate website – for free.
At the times when we at Digital Peak where a one man show I didn't care about coding standards. I had my formatter in Eclipse and all was fine. As we are more developers nowadays we needed some rules the code formatting has to follow, otherwise it will be hard for others to read and maintain it. So we decided to adopt to the Joomla coding standards (which was a hard decision for me as I'm an advocate of the Java coding standard) for our Joomla extensions. I'm an Eclipse lover since the early days of Eclipse (was coding my own Eclipse plugins) so I faced the challenge to integrate the PHP codesniffer into the Eclipse IDE. To safe you time, I'm writing down here the steps to accomplish this task.
This should work on windows and linux.
We at Digital Peak had to adapt some sniffs, because we didn't need so strict rules like Joomla has, so we created our own fork. This means we are able to merge future changes of the Joomla code style and at the same time we can add/modify/remove our own rules. How you can fork a github repository could be found on the web and we do not cover it here again.
As a last step checkout the project somewhere into you file system or even better into your workspace as a repository in eGit.
git clone https://github.com/Digital-Peak/coding-standards.git Joomla
The code sniffer plugins are maintained by an external project and do not come built in with the PDT plugins. How you can install the plugins can be found here. Install the whole stack and restart Eclipse. Make sure PHP executable is installed too, on windows you have to download it manually and on ubuntu run
apt-get install php5
In the project properties (Project->Properties->PHP Tools->PHP CodeSniffer) add your code sniffer standard. After you click ok Eclipse asks you to build the project, click on yes.
I suggest that you enable print PHP output to console and set Tab width to 0 (otherwise the code sniffer will convert the tabs to spaces).
If you are using the coding standards from Joomla as reference you need to update the codesniffer version to at least version 1.4.4, otherwise it will fail (thanks to the PHP console output I figured it out).
If you are a lazy developer as I am you should know the key combination Ctrl+Sift+F. It formats the file according to a rule set from a formatter in your Eclipse preferences (Project->Properties->PHP->Code Style->Formatter). You can find a working formatter on our repository as the one in the Joomla project is broken on Eclipse Kepler. The install screen will then look like
