Recommandé
Contenu connexe
Similaire à Do More with LESS
Similaire à Do More with LESS (20)
Dernier
Dernier (20)
Do More with LESS
- 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 HTML Are you familiar with CSS Programmers / Developers Experience with PreProcessors Fear Factor?
- 3. Who am I? Sean Lange FrontEnd Developer with Lullabot Website Perception Enhancement Facilitator Web Beautification Implementation Specialist Drupal via FrontPage/Dreamweaver FrontEnd --> 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 for determining presentation of HTML. Provides ability to create terrific visual displays. Has evolved over the years with CSS2, CSS3, based in the needs of web browser presentation. Long, repetitive, inconsistent
- 6. what is pre-process? Typ Smthng --> TYPE SOMETHING Rules, Patterns, Syntax to produce some kind of desired output. (@imgpath == ‘“../../images/buttons/ green-buttons/large-green.jpg) Provides opportunity for logical order and structure to output results. Compiler
- 7. what is LESS? Write CSS in a smarter more organized manner. Use functions, mixins, operations and more. Ability to reuse colors, styles and snippets easily. Results in the ability to write more concise style information that is easy to read, track, and build upon.
- 8. what it is like LESS is Shorthand for CSS LESS is Visual Structure for CSS LESS is Automation for repetitive styles for CSS LESS is Consistency for CSS it’s good for...
- 9. break it down Ultimately, the browser reads CSS, so ultimately 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 just make a long list, and try to keep it 'together'.
- 10. Is this REAL? A though with another thought's Jon Smith […] hat on…. Jon Smith's address […] Jon Smith's phone (h) […] If you were Jon Smith's phone (w) […] writing down Jon Smith's email […] someone's contact information, you'd never write…
- 11. less address cruft WE SEE.... WE DON’T SEE... Jon Smith Jon Smith […] address Jon Smith's address […] phone Jon Smith's phone (h) […] (h) Jon Smith's phone (w) […] (m) Jon Smith's email […] email
- 12. keeping it together WE WANT TO SEE.... WE DON’T WANT TO 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 success and changing simple values in functions) LESS is Consistency for Drupal Theming (padding/line- height/clearfixes/similarities within different views)
- 14. how to do a file with a .less extension. use LESS app (or Codekit) and let it ‘watch’ the file or directory. write some less in the .less file save the .less file, the watcher (app) does it’s thing. RESULT... a .css file
- 15. how to do a file with a .less extension. use LESS app (or Codekit) and let it ‘watch’ the file or directory. write some less in the .less file save the .less file, the watcher (app) does it’s thing. RESULT... a .css file
- 16. tool JS & DOC: http:// lesscss.org APP: http:/ / incident57.com/less/ Write Compile Use
Notes de l'éditeur
- \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