2014 promises to be an eventful year for the Joomla! CMS (pun intended). Of particular interest to us is the release of Joomla 3.3 (which we will cover in our next post), because of its various changes. However, what we’re focusing on in this post is not so much Joomla itself, but the people who are behind it, who code and develop for it, and the people who deploy (i.e. use) Joomla for the website(s) they build.
One of the strengths of Joomla as a CMS is that it has an active and vigorous community of both developers and users. All throughout the year, various meet-ups and conventions focused on Joomla get organised – not only for hardcore evangelists, but for ordinary Joomla folks as well. Yes, there are lots of Joomla! events going on all over the world! Here are a selection of those events:
Saturday 22nd and Sunday 23rd March 2014
Dutch Joomla! Days – Zeist, the Netherlands (The “Bootstrap on Joomla” giant, Joostrap, is taking part in this one)
Friday May 30th – Sunday June 1st 2014
J and Beyond – Konigstein, Germany (this is a HUGE event, try not to miss it!)
But if you’re in Asia instead, you can attend the Joomla User Group meeting:
Wednesday March 5th 2014
Joomla User Group Pune meeting- Maharashtra, India
Even Africa has a Joomla! Day; in Algeria, of all places. Best if you spoke French if you wanted to attend:
Thursday May 15th and Friday 16th May 2014
Joomla! Day Algeria –Sidi Abdellah, Algeria
And as for Americans, there are easily half a dozen meetings that have been set up to date. Sadly, Oceania and South America are under-represented for the time being – but the year is young, so who knows?
For more information on these and other events, visit the following sites:
https://www.facebook.com/joomla
In addition, consider attending conferences and events of the other open source CMSes around – WordPress has an official WordCamp in San Francisco every year, for instance – and Joomla people have been known to cross-pollinate at such conferences.
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.
