際際滷

際際滷Share a Scribd company logo

Agile theming with kalatheme & panopoly

仆亟亠亶 弌舒亟仆亳从
仆亟亠亶 弌舒亟仆亳从

how create quick responsive design in drupal 7 with kalatheme twiter bootstrap and panels

1 of 39
Download to read offline
AGILE THEMING WITH KALATHEME & PANOPOLY Created by Andrey Stadnik / quazarweb.ru
Twitter Bootstrap 仗亠亳仄亠于舒 1. 亅从仂仆仂仄亳 于亠仄亠仆亳 2. 亳仆舒仄亳仆亠 仄舒从亠 3. 弌仂于亠仄亠仆仆亶 亟亳亰舒亶仆 4. 仂仂舒 于 亳仗仂仍亰仂于舒仆亳亳 5. 弌仂于仄亠亳仄仂 弍舒亰亠舒仄亳 6. Open足source project
Twitter Bootstrap 仂仆仂于仆亠 亳仆仄亠仆 1. 弌亳亠仄舒 亠仂从 2. 仂仄仍亠仆亳亠 3. 丕亳仍亳 舒亟舒仗亳于仆仂亳 4. 个仂仄 亳 从仂仄仗仂仆亠仆 5. Javascript
Mobile First /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }
亳仄亠 亠从亳 <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>
Twitter Bootstrap 仂仆仂于仆亠 亳仆仄亠仆 1. 弌亳亠仄舒 亠仂从 2. 仂仄仍亠仆亳亠 3. 丕亳仍亳 舒亟舒仗亳于仆仂亳 4. 个仂仄 亳 从仂仄仗仂仆亠仆 5. Javascript
仂仄仍亠仆亳亠 Twitter Bootstrap 1. H1 足H6 2. 仂亠仆仆亠 仍亠仄亠仆 <mark>, <del>, <blockquote>, <small>, <strong> 3. 弌亳仍亳亰舒亳 仗亳从仂于 4. 弌亳仍亳亰舒亳 舒弍仍亳 5. 亠 float' (.pull足left, .pull足right) Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
Twitter Bootstrap 仂仆仂于仆亠 亳仆仄亠仆 1. 弌亳亠仄舒 亠仂从 2. 仂仄仍亠仆亳亠 3. 丕亳仍亳 舒亟舒仗亳于仆仂亳 4. 个仂仄 亳 从仂仄仗仂仆亠仆 5. Javascript Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
亟舒仗亳于仆仂 Twitter Bootstrap Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
Twitter Bootstrap 仂仆仂于仆亠 亳仆仄亠仆 1. 弌亳亠仄舒 亠仂从 2. 仂仄仍亠仆亳亠 3. 丕亳仍亳 舒亟舒仗亳于仆仂亳 4. 个仂仄 亳 从仂仄仗仂仆亠仆 5. Javascript Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
个仂仄 亳 从仂仄仗仂仆亠仆 Twitter Bootstrap Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
个仂仄 亳 从仂仄仗仂仆亠仆 Twitter Bootstrap Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
Twitter Bootstrap 仂仆仂于仆亠 亳仆仄亠仆 1. 弌亳亠仄舒 亠仂从 2. 仂仄仍亠仆亳亠 3. 丕亳仍亳 舒亟舒仗亳于仆仂亳 4. 个仂仄 亳 从仂仄仗仂仆亠仆 5. Javascript Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
Javascript 于 Twitter Bootstrap 仂亟舒仍仆亠 仂从仆舒 足modal. js <button type="button" data-toggle="modal" data-target="#myModal">舒仗亳 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
Javascript 于 Twitter Bootstrap 仗舒亟舒ﾑ亠亠 仄亠仆 dropdown.js <li class="dropdown"> <a id="drop4" role="button" data-toggle="dropdown" href="#">仗舒亟舒ﾑ亠亠 <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="http://bootstrap-ru.ru" target </li> </ul> </li>
Javascript 于 Twitter Bootstrap 丐舒弍 tab.js <li class="active"><a href="#home" data-toggle="tab">仍舒于仆舒</a></li> Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
Javascript 于 Twitter Bootstrap 仗仍于舒ﾑ亳亠 仗仂亟从舒亰从亳 tooltip.js <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
Javascript 于 Twitter Bootstrap 仆仂仄亠 popover.js <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
Javascript 于 Twitter Bootstrap 舒亠仍亳 carousel.js <!-- Indicators --> <li data-target="#carousel-example-generic" data-slide-to="0" class="<li data-target="#carousel-example-generic" data-slide-to="1"></li>
Twitter Bootstrap 仆舒 LESS 亳 SASS http://getbootstrap.com/css/#less https://github.com/twbs/bootstrap足sass
Kalatheme
Kalatheme 亳亠仄仆亠 亠弍仂于舒仆亳 1. Libraries API 2.1+ 2. Panels 3.3+ 3. Views 3.x 4. Ctools 1.x+ 5. JQuery Update 2.x (with JQuery version set to 1.7+) 6. PHP 5.3+ 7. Panopoly Theme
Kalatheme 舒仆仂于从舒 丕舒仆仂于亳 于亠 仄仂亟仍亳 丕舒仆仂于亳 Kalatheme 亳 亟亠仍舒 仗仂 仄仂仍舒仆亳 弌亟亠仍舒 亠仄仂亶 舒亟仄亳仆 亳仆亠亠亶舒 仂亳亳 从亠 弌仂亰亟舒 仗仂亟亠仄
Agile theming with kalatheme & panopoly
仂仗仂仍亰仂于舒 DRUSH drush dl libraries, panels, views, jquery_update, panopoly_theme drush en libraries, panels, views, jquery_update, panopoly_theme drush kalatheme "My Awesome Theme" drush kalatheme "My Awesome Theme" --fonts drush kalatheme "My Awesome Theme" --custom=yeti drush kalatheme "My Awesome Theme" --fonts --custom=cerulean
舒仂亶从亳 仗仂亟亠仄 Kalatheme
舒仂亶从亳 仗仂亟亠仄 Kalatheme
个亳仍仂仂亳 Kalatheme 仗仂仍亰亶亠 仂亟亳仆 亠亞亳仂仆 亳 仗舒仆亠仍亳 仗仂仍亰亶亠 从舒从 仄仂亢仆仂 仄亠仆亠 舒弍仍仂仆仂于 仗仂仍亰亶亠 panelizer 亳 page manager 仗仂仍亰亶亠 Panopoly templates 亠 仆舒仍亳 仆亢仆亶 舒弍仍仂仆 亟亠仍舒亶亠 亠亞仂 舒仄亳 仗仂仍亰亶亠 仗舒仆亠仍 亠 亳仗仂仍亰亶亠 仄仂亟仍亳 block, dispaly suite, context 弍亠亰 仆舒亟仂弍仆仂亳
弌仂亰亟舒仆亳亠 舒弍仍仂仆舒
弌仂亰亟舒仆亳亠 舒弍仍仂仆舒
弌仂亰亟舒仆亳亠 舒弍仍仂仆舒
舒 仗舒从亳从舒 仂亰亟舒仆亳 仂舒 舒亳亠从舒 舒仆亳亠 亠亞仂 仆亳弍亟 仗仂仂亞仂 仗仂仍亰亶亠 弍舒仗 亠 亳亰仄亠仆磺亠 弍舒仗 Don't Hack Bootstrap 仗仂仍亰亶亠 仗仍舒亞亳仆 弌亳仍亳 亳 仗舒于仍亠仆仆亳亠 于亳亟亳仄仂 Kalatheme
仍舒亞亳仆 亳仍亳
仍舒亞亳仆 亳仍亳
仍舒亞亳仆 亳仍亳
仍舒亞亳仆 仗舒于仍亠仆亳亠 于亳亟亳仄仂
弌仗舒亳弍仂 亰舒 于仆亳仄舒仆亳亠!
仂仗仂? 弌舒亟仆亳从 仆亟亠亶 MAIL: enemis@mail.ru SKYPE: enemis足87 GITHUB: https://github.com/enemis Twitter: 于仂亰仄仂亢仆仂 于 弍亟亠仄

More Related Content

Agile theming with kalatheme & panopoly

  • 1. AGILE THEMING WITH KALATHEME & PANOPOLY Created by Andrey Stadnik / quazarweb.ru
  • 2. Twitter Bootstrap 仗亠亳仄亠于舒 1. 亅从仂仆仂仄亳 于亠仄亠仆亳 2. 亳仆舒仄亳仆亠 仄舒从亠 3. 弌仂于亠仄亠仆仆亶 亟亳亰舒亶仆 4. 仂仂舒 于 亳仗仂仍亰仂于舒仆亳亳 5. 弌仂于仄亠亳仄仂 弍舒亰亠舒仄亳 6. Open足source project
  • 3. Twitter Bootstrap 仂仆仂于仆亠 亳仆仄亠仆 1. 弌亳亠仄舒 亠仂从 2. 仂仄仍亠仆亳亠 3. 丕亳仍亳 舒亟舒仗亳于仆仂亳 4. 个仂仄 亳 从仂仄仗仂仆亠仆 5. Javascript
  • 4. Mobile First /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }
  • 5. 亳仄亠 亠从亳 <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>
  • 6. Twitter Bootstrap 仂仆仂于仆亠 亳仆仄亠仆 1. 弌亳亠仄舒 亠仂从 2. 仂仄仍亠仆亳亠 3. 丕亳仍亳 舒亟舒仗亳于仆仂亳 4. 个仂仄 亳 从仂仄仗仂仆亠仆 5. Javascript
  • 7. 仂仄仍亠仆亳亠 Twitter Bootstrap 1. H1 足H6 2. 仂亠仆仆亠 仍亠仄亠仆 <mark>, <del>, <blockquote>, <small>, <strong> 3. 弌亳仍亳亰舒亳 仗亳从仂于 4. 弌亳仍亳亰舒亳 舒弍仍亳 5. 亠 float' (.pull足left, .pull足right) Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
  • 8. Twitter Bootstrap 仂仆仂于仆亠 亳仆仄亠仆 1. 弌亳亠仄舒 亠仂从 2. 仂仄仍亠仆亳亠 3. 丕亳仍亳 舒亟舒仗亳于仆仂亳 4. 个仂仄 亳 从仂仄仗仂仆亠仆 5. Javascript Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
  • 9. 亟舒仗亳于仆仂 Twitter Bootstrap Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
  • 10. Twitter Bootstrap 仂仆仂于仆亠 亳仆仄亠仆 1. 弌亳亠仄舒 亠仂从 2. 仂仄仍亠仆亳亠 3. 丕亳仍亳 舒亟舒仗亳于仆仂亳 4. 个仂仄 亳 从仂仄仗仂仆亠仆 5. Javascript Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
  • 11. 个仂仄 亳 从仂仄仗仂仆亠仆 Twitter Bootstrap Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
  • 12. 个仂仄 亳 从仂仄仗仂仆亠仆 Twitter Bootstrap Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
  • 13. Twitter Bootstrap 仂仆仂于仆亠 亳仆仄亠仆 1. 弌亳亠仄舒 亠仂从 2. 仂仄仍亠仆亳亠 3. 丕亳仍亳 舒亟舒仗亳于仆仂亳 4. 个仂仄 亳 从仂仄仗仂仆亠仆 5. Javascript Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
  • 14. Javascript 于 Twitter Bootstrap 仂亟舒仍仆亠 仂从仆舒 足modal. js <button type="button" data-toggle="modal" data-target="#myModal">舒仗亳 Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
  • 15. Javascript 于 Twitter Bootstrap 仗舒亟舒ﾑ亠亠 仄亠仆 dropdown.js <li class="dropdown"> <a id="drop4" role="button" data-toggle="dropdown" href="#">仗舒亟舒ﾑ亠亠 <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="http://bootstrap-ru.ru" target </li> </ul> </li>
  • 16. Javascript 于 Twitter Bootstrap 丐舒弍 tab.js <li class="active"><a href="#home" data-toggle="tab">仍舒于仆舒</a></li> Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
  • 17. Javascript 于 Twitter Bootstrap 仗仍于舒ﾑ亳亠 仗仂亟从舒亰从亳 tooltip.js <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
  • 18. Javascript 于 Twitter Bootstrap 仆仂仄亠 popover.js <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
  • 19. Javascript 于 Twitter Bootstrap 舒亠仍亳 carousel.js <!-- Indicators --> <li data-target="#carousel-example-generic" data-slide-to="0" class="<li data-target="#carousel-example-generic" data-slide-to="1"></li>
  • 20. Twitter Bootstrap 仆舒 LESS 亳 SASS http://getbootstrap.com/css/#less https://github.com/twbs/bootstrap足sass
  • 22. Kalatheme 亳亠仄仆亠 亠弍仂于舒仆亳 1. Libraries API 2.1+ 2. Panels 3.3+ 3. Views 3.x 4. Ctools 1.x+ 5. JQuery Update 2.x (with JQuery version set to 1.7+) 6. PHP 5.3+ 7. Panopoly Theme
  • 23. Kalatheme 舒仆仂于从舒 丕舒仆仂于亳 于亠 仄仂亟仍亳 丕舒仆仂于亳 Kalatheme 亳 亟亠仍舒 仗仂 仄仂仍舒仆亳 弌亟亠仍舒 亠仄仂亶 舒亟仄亳仆 亳仆亠亠亶舒 仂亳亳 从亠 弌仂亰亟舒 仗仂亟亠仄
  • 25.
  • 26. 仂仗仂仍亰仂于舒 DRUSH drush dl libraries, panels, views, jquery_update, panopoly_theme drush en libraries, panels, views, jquery_update, panopoly_theme drush kalatheme "My Awesome Theme" drush kalatheme "My Awesome Theme" --fonts drush kalatheme "My Awesome Theme" --custom=yeti drush kalatheme "My Awesome Theme" --fonts --custom=cerulean
  • 29. 个亳仍仂仂亳 Kalatheme 仗仂仍亰亶亠 仂亟亳仆 亠亞亳仂仆 亳 仗舒仆亠仍亳 仗仂仍亰亶亠 从舒从 仄仂亢仆仂 仄亠仆亠 舒弍仍仂仆仂于 仗仂仍亰亶亠 panelizer 亳 page manager 仗仂仍亰亶亠 Panopoly templates 亠 仆舒仍亳 仆亢仆亶 舒弍仍仂仆 亟亠仍舒亶亠 亠亞仂 舒仄亳 仗仂仍亰亶亠 仗舒仆亠仍 亠 亳仗仂仍亰亶亠 仄仂亟仍亳 block, dispaly suite, context 弍亠亰 仆舒亟仂弍仆仂亳
  • 33. 舒 仗舒从亳从舒 仂亰亟舒仆亳 仂舒 舒亳亠从舒 舒仆亳亠 亠亞仂 仆亳弍亟 仗仂仂亞仂 仗仂仍亰亶亠 弍舒仗 亠 亳亰仄亠仆磺亠 弍舒仗 Don't Hack Bootstrap 仗仂仍亰亶亠 仗仍舒亞亳仆 弌亳仍亳 亳 仗舒于仍亠仆仆亳亠 于亳亟亳仄仂 Kalatheme
  • 39. 仂仗仂? 弌舒亟仆亳从 仆亟亠亶 MAIL: enemis@mail.ru SKYPE: enemis足87 GITHUB: https://github.com/enemis Twitter: 于仂亰仄仂亢仆仂 于 弍亟亠仄