Less Installation in Windows and how it works in PhpStorm.

Improving User experience with smooth technology

We consider Headstart LMS is reaching to be one of the best eLearning experiences out there in the industry. We are growing with many exciting state of the art features; yet we are dedicated and innovative to make sure the simplicity in UI make the user to have a smooth learning experience. We have studied and tried many methods and technologies to gain this. With the beginning of this article, we are going to share the out experiences throughout our exciting journey.

Less is a dynamic style sheet language that can be compiled into Cascading style sheet (CSS) and run on the client side or server side.  Less is written in JavaScript and need NodeJs engine to run it.

First install Nodejs

Node.js also provides a rich library of various JavaScript modules which simplifies the development of web applications using Node.js to a great extent.

  1. Download Nodejs – http://nodejs.org/download/
  2. Install it anywhere you want, by default: C:\Program Files\nodejs
  1. Set Environment Variables – Control Panel -> System -> Advanced system settings -> Environment Variables
  2. Select PATHand choose to edit it.
  • If the PATH variable isempty, change it to this:

C:\Users\{YOUR USERNAME HERE}\AppData\Roaming\npm;C:\Program Files\nodejs

  • If the PATH variable already contains

C:\Users\{YOUR USERNAME HERE}\AppData\Roaming\npm, append the following right after: ;C:\Program Files\nodejs

  • If the PATH variable contains information, but nothing regarding npm, append this to the end of the PATH:

C:\Users\{YOUR USERNAME HERE}\AppData\Roaming\npm;C:\Program Files\nodejs

  1. Re-start the command prompt and npm will now work

Install Less

Node.js comes with the Nodes Packaged Modules tool or  npm that can be used on the command line to install LESSC.

  1. Install Less on the server, is via npm,

C:\>npm install -g less

  1. Test that less is working

C:\>lessc

Use less in Phpstrom

  1. First open your Phpstorm Editor and find Settings option under Files option from Top Nav Bar. Then select plugin option from left menu bar. Now you will see the popup window with all installed plugin
  1. Click “Browse Repositories” Button then you find all plugin list of repositories. If you write “Less” in the right search box then may you see “Less Css Complier” plugin in left plugin list. Now select and installed it.

 1

2

This time close your popup window and find “Less Profile” option and create a profile for your existing project. That time you must fill properly following input, source less directory, less file name that only compile into css and output css directory that contains project css file.

This is main less file. Import other less file for compile a single css file for use existing project.

3

This is less variable, that compile to css.

4

This is a main compiled css file.

As you understand now Headastart LMS is a PHP based creation where we have used many integrations to gain better standards. We hope our experience with Less framework was a good starting point to gain your attention. Hope to  see you soon with another experience.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s