300 likes | 427 Views
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 ;
E N D
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; • // 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
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…
2. The Ignition Starter Kit The quiet and peaceful place
The Ignition is not a libraryit is just a initial set of files and the workflow…
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…
3. New Project Wizard Hello … follow me … okay
1. Check out the Ignitionfrom SVN 10 1 2 3 4 5 6 7 8 9
2. Rename the main file rename-me.less and look inside 10 1 2 3 4 5 6 7 8 9
3. Organize imports by checking all the lines 10 1 2 3 4 5 6 7 8 9
4. Consider variables 10 1 2 3 4 5 6 7 8 9
5. Consider the grid system. You can use the current one or another else. 10 1 2 3 4 5 6 7 8 9
6. Chose external libraries and put it into the particular folder 10 1 2 3 4 5 6 7 8 9
7. Check all existing mixins and consider them on your project. 10 1 2 3 4 5 6 7 8 9
8. Remove unused files 10 1 2 3 4 5 6 7 8 9
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
10. Compile your CSS file and put all the work into the SVN 10 1 2 3 4 5 6 7 8 9
4. Rules Let love rule
Rule #1 Always usethisbundle LESS+ Ignition Package + New project wizard
Rule #2 Use the right LESS format Check the demos on the lesscss.org
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 {}
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)
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”>…
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 { . . .
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
Thank You The Ignition is here for your look and feel
Thank You The Ignition is here for your look and feel