1 / 30

Ignition Styling Guide

Ignition Styling Guide. 1. The LESS Language. 2. The Ignition Starter Kit. 3. New Project Wizard. 4. Styling Rules. 1. The LESS Language. On the nature of wisdom and beauty. The LESS helps you to write CSS better . // 1. inline comments // 2. variables @ sidebar - bg : #5B83AD ;

tonya
Download Presentation

Ignition Styling Guide

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ignition Styling Guide 1. The LESS Language 2. The Ignition Starter Kit 3. New Project Wizard 4. Styling Rules

  2. 1. The LESS Language On the nature of wisdom and beauty

  3. The LESS helps you to write CSS better // 1. inline comments // 2. variables @sidebar-bg: #5B83AD; • // 3. something like functions - Mixins • .border-radius (@radius){ • border-radius: @radius; • -moz-border-radius: @radius; • -webkit-border-radius: @radius; • } • // 4. inheritance • .wrapper { • .side-bar { • background: @sidebar-bg; • .border-radius(14px); } } • // check the http://lesscss.org for more good news

  4. We use the LESS as a company standard for writing CSS files

  5. The LESS workflow Write a file.less (File in the LESS format) Compile less by a compiler (Local application) Have a file.css(Output file in CSS format) In advance we have a package called Ignition…

  6. 2. The Ignition Starter Kit The quiet and peaceful place

  7. The Ignitionhelps to start projects

  8. The Ignition is not a libraryit is just a initial set of files and the workflow…

  9. The Ignition workflow Copy the package into your project Modify the package the way you need to Check the Ignition Folder out from SVN Continue by your own workflow There is a New Project Wizard that helps you to keep the workflow…

  10. 3. New Project Wizard Hello … follow me … okay

  11. 1. Check out the Ignitionfrom SVN 10 1 2 3 4 5 6 7 8 9

  12. 2. Rename the main file rename-me.less and look inside 10 1 2 3 4 5 6 7 8 9

  13. 3. Organize imports by checking all the lines 10 1 2 3 4 5 6 7 8 9

  14. 4. Consider variables 10 1 2 3 4 5 6 7 8 9

  15. 5. Consider the grid system. You can use the current one or another else. 10 1 2 3 4 5 6 7 8 9

  16. 6. Chose external libraries and put it into the particular folder 10 1 2 3 4 5 6 7 8 9

  17. 7. Check all existing mixins and consider them on your project. 10 1 2 3 4 5 6 7 8 9

  18. 8. Remove unused files 10 1 2 3 4 5 6 7 8 9

  19. 9. Create a design files for your project 10 page.less page-index.less page-aboutus.less modal.less modal-login.less modal-register.less modal-register-step1.less modal-register-step2.less checkout.less checkout-1-details.less checkout-2-billing.less checkout-sidebar.less checkout-sidebar-summary.com 1 2 3 4 5 6 7 8 9

  20. 10. Compile your CSS file and put all the work into the SVN 10 1 2 3 4 5 6 7 8 9

  21. 4. Rules Let love rule

  22. Rule #1 Always usethisbundle LESS+ Ignition Package + New project wizard

  23. Rule #2 Use the right LESS format Check the demos on the lesscss.org

  24. Rule #3 Write LESS in the same order as the DOM is <h1>……</h1> <div class=“items”> <div class=“item”> <h2 class=“title”><el>12</el> ……</h2> <p>……</p> </div> </div> <div class=“footer”>….</div> h1 {} .items { .item { .title { el { } } p {} } } .footer {}

  25. Rule #4 Structure your code by files page.less page-index.less page-aboutus.less modal.less modal-login.less modal-register.less modal-register-step1.less modal-register-step2.less checkout.less checkout-1-details.less checkout-2-billing.less checkout-sidebar.less checkout-sidebar-summary.com (Never keep unused files in your project)

  26. Rule #5 Use smart identifiers 1. No duplicities 2. Smart names 3. Type + Instance WRONG: <div id=“modal-user-lg” class=“userlogin modal-user userform”> <div class=“user-login-modal-title”>… RIGHT: <div class=“modal modal-login”> <div class=“title”>…

  27. Rule #6 Always use closures Each file needs to be closed by an unique CSS block modal.less ….. starts with: .modal { . . . modal-register.less….. starts with: .modal-register { . . . modal-register-step1.less ….. starts with: .modal-register .step1 { . . .

  28. Rule #7 Use pixels (px) Why? Pixels are relative now We use bg-images and they are in pixels Our media-queries are also defined by pixels We should use just a single measurementvalues

  29. Thank You The Ignition is here for your look and feel

  30. Thank You The Ignition is here for your look and feel

More Related