Beginners Guide to LESS CSS Preprocessor

What is LESS?

Less is a CSS Preprocessor. http://lesscss.org/

Installing and Compiling

  1. Install Node.js https://nodejs.org/en/
  2. using npm ( Node Package Manager ) install LESS globally ( -g )
    1. $ npm install -g less
  3. Compile LESS

lessc style.less > style.css
  • lessc is used as the command for compiling

Error

'lessc' is not recognized as an internal or external command, operable program or batch file.


Solution for this Error

Compiling LESS

node C:\Folder\Name\node_modules\less\bin\lessc style.less > style.css

Note : \Folder\Name should be the folder in which the node_modules have been installed.

Beginners Guide to SASS CSS Preprocessor

What is SASS?

SASS is a CSS Preprocessor. http://sass-lang.com/

Installing and compiling

  1. Install Ruby https://rubyinstaller.org/
    • More Info : http://sass-lang.com/install
  2. Open Terminal or Command Prompt
gem install sass

Note : gems is a package manager for Ruby.

3. Check if sass got installed

sass -v

4. on a dedicated "test" folder , create two folders "scss" and "css"

C:\test

C:\test\scss

C:\test\css

5. In the Terminal or Command Prompt

C:\test>

Compile SASS

--watch command

--watch command is used to constantly monitor style.scss file for any changes and compile it as soon any change happens.

C:\test> sass --watch scss:css

sass --watch scss:css

--watch dedicated file

To watch dedicated file style.scss and style.css

sass --watch style.scss:style.css

style.scss is the main file

style.css is the complied file

Minify SASS

sass --watch scss:css --style compressed

Top Website Design Research

Top Website Design Research Points

  • Use F-Shaped Pattern
  • Use Z-Shaped Pattern
  • Don't let people more than 3 click to find their answer
  • Too many options ensure NONE will be chosen
  • Visitors read long widths of text faster, but prefer shorter widths
  • Your headlines draw even more eyes than images!
  • Image captions are the most consistently read in-post content
  • People follow the “line of sight” of other people
  • Don’t Make Users Wait: Speed Up Your Website
  • Make Your Content Easily Readable
  • Don’t Worry About "The Fold" and Vertical Scrolling
  • Place Important Content on the Left of a Web Page
  • Small Details Make a Huge Difference
  • Don’t Rely on Search as a Crutch to Bad Navigation
  • Your Home Page Isn’t As Important as You Think
  • Golden Ration in Web Design
    • Considering 900px total width page
      • Content area + Side bar
      • 900px / 1.62 = 555.55px = content area
      • Side bar = 345px
    • Considering for a rectangle block with 300px width
      • What is the height?
      • 300px/1.62 = 185px height
  • Mathematics and Design - Golden ration +The Rule of Thirds + Grid Systems

Source

Other Resources

Image Source : Pexels