Chapter 7. Less with External Applications and Frameworks

After reading the previous chapters, you should have learned enough to build your own projects with Less. You will write better CSS and achieve more success at the same time. Now, you are definitely ready to learn the last step. In this chapter, you will learn how to use Less with the other well-known frameworks, applications, and tools. You will read about the web developer's tools that are built with Less or have integrated Less in their workflow. These projects can be used, customized, and extended with Less and will help you build better projects with Less.

In this chapter, we will cover the following topics:

• Cardinal CSS

• Ionic framework and Less

• Semantic UI

• Building grids with Less

• WordPress and Less

• Using Less with the Play framework, AngularJS, Meteor, and Rails

• Alternative compilers for compiling your Less code

Cardinal CSS

In the preceding chapter, you learned how to build frontends with Bootstrap. Also, Cardinal is also a CSS framework. It is mobile-first and modular; unlike Bootstrap, it is a pure CSS framework without any JavaScript plugins. Of course, Cardinal's CSS has been written with Less. It offers a flexible grid system and encapsulated styles for the common UI objects. You can read more about it and download Cardinal at http://cardinalcss.com/.

Although the framework works well, it lacks documentation. In the Less code itself, you will find useful comments. With all the knowledge that you gained by reading this book, you should be able to use these comments to build a frontend with Cardinal.

The HTML code for a grid can look like the following code block:

<div class="grid">
  <div class="grid-item one-whole md-one-half xl-one-fourth">1</div>
  <div class="grid-item one-whole md-one-half xl-one-fourth">2</div>
  <div class="grid-item one-whole md-one-half...

Using Semantic UI with Less

Semantic can be used to build the frontends too. Just like Bootstrap, it contains the CSS components and modules. Components have been split into elements, collections, and views. Modules require not only CSS, but also JavaScript.

Semantic's name already implies that it pays attention to the semantics of HTML 5. It is also tag-agnostic, which means that you can use any HTML tags with the UI elements.

In the following code, you will find an HTML example that shows how Semantic is intended to be used:

<main class="ui three column grid">
  <aside class="column">1</aside>
  <section class="column">2</section>
  <section class="column">3</section>
</main>

You can easily install npm in the Semantic UI by running the following command:

> npm install semantic-ui

The Semantic UI uses Gulp to build a code. The Gulp build chain not only builds your code, but also offers you watch tasks. The Semantic UI uses Less and offers you...

Deploying Ionic with Less

Ionic (http://www.ionicframework.com) and Ratchet (http://goratchet.com) are frameworks for building the hybrid mobile apps. The hybrid mobile apps are kinds of mobile web pages that are run as a native app. As these apps are web pages, you can use HTML5, JavaScript, and CSS to develop them. Both Ratchet and Ionic focus on the native or hybrid apps, instead of mobile websites. In this section, we will only discuss Ionic. Ionic apps are built by using HTML5.

The officially released version of Ionic comes with Sass now. In this section, you will learn how to develop the Ionic apps using Less.

For Ionic, a Less plugin is available at https://github.com/bassjobsen/less-plugin-ionic. You can install this plugin by running the following command on your console:

> npm install less-plugin-ionic

You should use this plugin with the Less autoprefix plugin.

Now you can compile a customized version of the Ionic's CSS code as follows:

> lessc file.less --ionic --autoprefix...

Frameworks for building your grids with Less

In the preceding section, you learned how to use the Bootstrap and Semantic UI to build complete frontends. In practice, for many projects, a grid alone will be enough to start. You have seen that Semantic's grid can be compiled in a single component easily. Bootstrap's grid can be compiled as a single component by using the following code snippet:

// Core variables and mixins
@import "variables.less";
@import "mixins.less";
// Reset
@import "normalize.less";
@import "grid.less";

Alternatively, you can use another grid system. In the Making your grid responsive section in Chapter 5, Integrate Less in Your Own Projects, you can read about the Zen grid, the Flexible box grid, and the flexible.gs system. In the next sections, the Semantic grid and the Skeleton framework system will be discussed briefly.

A list of the grid systems built using Less can be found at http://lesscss.org/usage/#frameworks-using-less-grid-systems.

The Semantic Grid System

The...

WordPress and Less

Nowadays, WordPress is not only used for weblogs, but it can also be used as a content management system for building a website.

The WordPress system, written in PHP, has been split into the core system, plugins, and themes. The plugins add additional functionalities to the system, and the themes handle the look and feel of a website built with WordPress. They work independently of each other and are also independent of the theme. The theme does not depend on plugins. WordPress themes define the global CSS for a website, but every plugin can also add its own CSS code.

The WordPress theme developers can use Less to compile the CSS code of the themes and the plugins.

Using the Sage theme by Roots with Less

Sage is a WordPress starter theme. You can use it to build your own theme. The theme is based on HTML5 Boilerplate (http://html5boilerplate.com/) and Bootstrap. Visit the Sage theme website at https://roots.io/sage/. Sage can also be completely built using Gulp.

Tip

More information...

Using Less with the Play framework

The Play framework helps you in building lightweight and scalable web applications by using Java or Scala. It will be interesting to learn how to integrate Less with the workflow of the Play framework. The differences between Java and Scala are beyond the scope of this book, but you can read more about this at http://www.toptal.com/scala/why-should-i-learn-scala. Also, the discussion of the installation process of the Play framework has not been handled in detail in this book. You can install the Play framework from https://www.playframework.com/. To learn more about the Play framework, you can also read, Learning Play! Framework 2, Andy Petrella, Packt Publishing.

Tip

To read Petrella's book, visit https://www.packtpub.com/web-development/learning-play-framework-2.

To run the Play framework, you need JDK 6 or later. The easiest way to install the Play framework is by using the Typesafe activator tool. After installing the activator tool, you can run the...

AngularJS and Less

AngularJS is a structural framework for dynamic web apps. It extends the HTML syntax, and this enables you to create dynamic web views. Of course, you can use AngularJS with Less. You can read more about AngularJS at https://angularjs.org/.

The HTML code shown here will give you an example of what repeating the HTML elements with AngularJS will look like:

<!doctype html>
<html ng-app>
  <head>
    <title>My Angular App</title>
  </head>
  <body ng-app>

    <ul>
      <li ng-repeat="item in [1,2,3]">{{ item }}</li>
    </ul>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
  </body>
</html>

The preceding HTML code can also be found in the angular.html file from the downloads section of this chapter. This code should make your page look like the following screenshot:

Repeating the HTML elements with AngularJS

The ngBoilerplate system

The ngBoilerplate...

Meteor and Less

Meteor is a complete open-source platform for building web and mobile apps in pure JavaScript. Meteor focuses on fast development. You can publish your apps for free on Meteor's servers.

Meteor is available for Linux and OS X. You can also install it on Windows.

Installing Meteor is as simple as running the following command on your console:

> curl https://install.meteor.com | /bin/sh

You should install the Less package for compiling the CSS code of the app with Less. You can install the Less package by running the command shown here:

> meteor add less

Note that the Less package compiles every file with the .less extension into CSS. For each file with the .less extension, a separate CSS file is created. When you use the partial Less files that should only be imported (with the @import directive) and not compiled into the CSS code itself, you should give these partials the .import.less extension.

When using the CSS frameworks or libraries with many partials, renaming the...

Ruby on rails and Less

Ruby on Rails, or Rails, for short is a web application development framework written in the Ruby language. Although installing Rails is not that difficult, it is beyond the scope of this book.

Those who want to start developing with Ruby on Rails can read the Getting Started with Rails guide, which can be found at http://guides.rubyonrails.org/getting_started.html.

In this section, you can read how to integrate Less into a Ruby on Rails app.

After installing the tools and components required for starting with Rails, you can launch a new application by running the following command on your console:

> rails new blog

Now, you should integrate Less with Rails. You can use less-rails (https://github.com/metaskills/less-rails) to bring Less to Rails. Open the Gemfile file, comment on the sass-rails gem, and add the less-rails gem, as shown here:

#gem 'sass-rails', '~> 5.0'
gem 'less-rails' # Less
gem 'therubyracer' # Ruby

Then, create a controller called welcome with an...

Alternative compilers for compiling your Less code

With the growing popularity of Less, the Less compiler has also been ported to other languages. These ports can be used to compile Less with native language calls. Keep in mind that these ports will usually lag behind the official JavaScript implementation, so you may find that they don't have the recent Less features. You may also realize that these compilers are not able to compile the native JavaScript expressions within backticks, as mentioned in Chapter 3, Nested Rules, Operations, and Built-in Functions.

The Less.php compiler

This PHP port of the official Less processor can be downloaded from http://lessphp.gpeasy.com/. You have already seen an example of its usage: the WP Less to the CSS plugin has been built with it. Less.php also implements caching for faster compilation.

Although Less.php offers the possibility of creating CSS dynamically, you should still precompile the CSS for production in most cases. WordPress is also written...

Summary

In this chapter, you learned how to use Less with Cardinal, Semantic UI, and Ionic. You were also introduced to the other grids and the frameworks built using Less. You have seen how to use Less with WordPress, Play, Meteor, AngularJS, Ruby on Rails, and you saw how to use the alternative compilers for your project.

This is the last chapter of this book. In this book, you learned how to use Less for your projects. You saw how variables, mixins, and built-in functions can help you in reusing your code. With Less, you can nest the style rules that make your code more intuitive and readable. After reading this book, you know that you don't have to write all the code yourself, when you can use the prebuilt mixins written by others. Finally, you obtained the information on how to start projects from scratch with Less. You also learned about integrating Less with WordPress, Bootstrap, and other tools. Now, you are really ready to start developing Less. Congratulations! You have enabled...