Do More with LESS
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Do More with LESS

on

  • 446 views

From a talk by @webthingee at BadCamp 2012

From a talk by @webthingee at BadCamp 2012

Statistics

Views

Total Views
446
Views on SlideShare
446
Embed Views
0

Actions

Likes
2
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Are you tired of writing.\ntext-indent: -9999px;\nremebering the hex number for the hover link;\nwriting overrides for the hover link in situations;\n\n
  • \n
  • \n
  • \n
  • \n
  • What does that mean for my Drupal theming?\ncreate re-usable css structures that speed up your time writing css.\ncreate variables, so that if you change a color, you change the variable once, and don't need to 'find and replace' for several minutes.\ncreate re-usable css that you can insert values into… i.e. never write several decelerations for rounded corners again.\n\n
  • \n
  • a less file is a PRE CSS file. Similar to the idea that when you create some drawing in Photoshop, that is then processed into a jpg, gif, png, etc...\n\nWrite your LESS in the format using the documentation and guide.\nUse a LESS compiler to generate the css file.\nUse the resulting CSS file where needed.\n\nWe will be using the LESS app, and CSS files to today’s introduction to LESS.\n
  • \n

Do More with LESS Presentation Transcript

  • 1. Do MORE WITH LESS for your CSS Sean Lange Frontend Developer, Lullabot sean.lange@lullabot.com
  • 2. Who are you?Drupal? FrontPage? Dreamweaver?Have you ever written HTMLAre you familiar with CSSProgrammers / DevelopersExperience with PreProcessorsFear Factor?
  • 3. Who am I?Sean LangeFrontEnd Developer with LullabotWebsite Perception Enhancement FacilitatorWeb Beautification Implementation SpecialistDrupal via FrontPage/DreamweaverFrontEnd --> Developer --> FrontEnd
  • 4. Why are we here?What is a CSS preprocessor?What is LESS and SASS?Is it valuable in Drupal?How do I preprocess my CSS?Why is CSS preprocessor important?!?
  • 5. What is CSS?Cascading Style Sheets - Responsible fordetermining presentation of HTML. Providesability to create terrific visual displays.Has evolved over the years with CSS2, CSS3,based in the needs of web browserpresentation.Long, repetitive, inconsistent
  • 6. what is pre-process?Typ Smthng --> TYPE SOMETHINGRules, Patterns, Syntax to produce some kindof desired output. (@imgpath == ‘“../../images/buttons/green-buttons/large-green.jpg)Provides opportunity for logical order andstructure to output results.Compiler
  • 7. what is LESS?Write CSS in a smarter more organizedmanner.Use functions, mixins, operations and more.Ability to reuse colors, styles and snippetseasily. Results in the ability to write more concisestyle information that is easy to read, track,and build upon. 
  • 8. what it is likeLESS is Shorthand for CSSLESS is Visual Structure for CSSLESS is Automation for repetitive styles forCSSLESS is Consistency for CSSit’s good for...
  • 9. break it downUltimately, thebrowser readsCSS, soultimately you #main-menu {…}have to end up #main-menu img {…}with a .css file #main-menu ul.menu {…}to render the #main-menu ul.menu li {…}page. so… #main-menu ul.menu a {…}for .css we justmake a long list,and try to keepit together.
  • 10. Is this REAL?A though withanother thoughts Jon Smith […]hat on…. Jon Smiths address […] Jon Smiths phone (h) […]If you were Jon Smiths phone (w) […]writing down Jon Smiths email […]someones contactinformation, youdnever write…
  • 11. less address cruft WE SEE....WE DON’T SEE... Jon SmithJon Smith […]   addressJon Smiths address […]   phoneJon Smiths phone (h) […] (h)Jon Smiths phone (w) […]   (m)Jon Smiths email […]   email
  • 12. keeping it together WE WANT TO SEE....WE DON’T WANTTO SEE... #main-menu {#main-menu {…} img {...}#main-menu img {…}   ul.menu {...#main-menu ul.menu {…}#main-menu ul.menu li {…}    li {...}#main-menu ul.menu span {…}    span {…}   } }
  • 13. is it for Drupal?LESS is Order and Structure for Drupal Theming(hierarchy of elements/classes/nesting)LESS is Rapid CSS Evolution for Drupal Theming(creating variables for swapping values and alterations of values)LESS is Fail, Fail, Pass for Drupal Theming (reusing successand changing simple values in functions)LESS is Consistency for Drupal Theming (padding/line-height/clearfixes/similarities within different views)
  • 14. how to doa file with a .less extension.use LESS app (or Codekit) and let it ‘watch’the file or directory.write some less in the .less filesave the .less file, the watcher (app) does it’sthing.RESULT... a .css file
  • 15. how to doa file with a .less extension.use LESS app (or Codekit) and let it ‘watch’the file or directory.write some less in the .less filesave the .less file, the watcher (app) does it’sthing.RESULT... a .css file
  • 16. toolJS & DOC: http://lesscss.orgAPP: http:/ /incident57.com/less/WriteCompileUse
  • 17. http://css-tricks.com/poll-results-popularity-of-css-preprocessors/