Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Drupal sminkelés korszerű eszközökkel

652 views

Published on

Dolgozzunk a front end fejlesztői feleadatokon még hatékonyabban, kényelmesebben, s ezáltal még több örömmel! A Drupal Hétvége 2013 konferencián egy modult és három olyan fejelsztői eszközt mutattam be, amik ebben segítenek.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Drupal sminkelés korszerű eszközökkel

  1. 1. Drupal sminkelés korszerű eszközökkel avagy mit tanultam az Aurora alapsminkből?
  2. 2. Drupal sminkelés korszerű eszközökkel avagy mit tanultam tanulok az Aurora alapsminkből?
  3. 3. Drupal sminkelés korszerű eszközökkel avagy mit tanultam tanulok az Aurora alapsminkből?
  4. 4. “Aurora is an HTML5, Sass and Compass powered minimalist base theme. It is optimized for both responsive and mobile first web design. Built to encourage best modern front end practices…” Forrás: http://snugug.github.io/Aurora/
  5. 5. Aurora eszközök* ● Bundler ● Bower ● Magic ● Grunt * Amikről ma szót ejtünk…
  6. 6. ● Bundler ● Bower ● Magic ● Grunt A kép forrása: http://bundler.io
  7. 7. Bundler: ruby gem menedzsment A szükséges gemek ● rendelkezésre állnak, ● megfelelő a verziójuk. Telepítése: $ gem install bundler
  8. 8. Gemfile source 'https://rubygems.org' gem 'compass-aurora', '~>3.0.0' gem 'toolkit', '~>1.0.0' gem 'singularitygs', '~>1.0.7' …
  9. 9. Bundler használat $ cd az_en_sminkem $ bundle install $ git add Gemfile Gemfile.lock $ git commit -m "…" $ bundle exec compass watch $ bundle show Gems included by the bundle:  * addressable (2.3.5)   … $ bundle show singularitygs /ahova/telepult/singularitygs-1.0.8 További infó: http://bundler.io Gemfile.lock GEM remote: https://rubygems.org/ specs: addressable (2.3.5) breakpoint (2.0.7) compass (>= 0.12.1) sass (>= 3.2.0) chunky_png (1.2.9) Color-schemer (0.2.7) compass (~> 0.12) … PLATFORMS ruby DEPENDENCIES breakpoint (~> 2.0.2) compass-aurora (~> 3.0.0) compass-normalize (~> 1.4.3) …
  10. 10. ● Bundler ● Bower ● Magic ● Grunt A kép forrása: http://bower.io
  11. 11. Bower: webes csomagkezelő Bower != Bundler A szükséges eszközök ● rendelkezésre állnak, ● megfelelő a verziójuk. Telepítése: $ npm install -g bower
  12. 12. Bower használat ● ● Függőségek beállítása: bower.json Konfigurálás: .bowerrc $ cd az_en_sminkem ($ compass install aurora/bower) $ bower install ($ git …) További infó: http://bower.io
  13. 13. ● Bundler ● Bower ● Magic ● Grunt A kép forrása: http://2shi.deviantart.com/art/Top-Hat-Icon-83041677
  14. 14. „Keep Frontend DRY; sprinkle it with…”
  15. 15. Forrás: https://drupal.org/project/magic
  16. 16. Magic modul ● Sminkenként beállítható: – Jobb CSS aggregálás – Választott CSS és JS fájlok letiltása – Drupal 8 JS kezelés backportja – JS a footer-ben – Viewport szélesség és <html class=”…”> kijelzése ● A smink beállítások exportálhatóak ● Bármilyen sminkkel használható További infó: https://drupal.org/project/magic
  17. 17. ● Bundler ● Bower ● Magic ● Grunt A kép forrása: http://gruntjs.com
  18. 18. Grunt: JS alapú feladat-automatizáló Telepítése: $ npm install -g grunt-cli ● ● Függőségek beállítása: package.json Konfigurálás: Gruntfile.js $ cd az_en_sminkem ($ compass install aurora/grunt) $ npm install ($ git …) $ grunt ($ grunt [watch / build]) További infó: http://gruntjs.com/
  19. 19. Grunt az Aurorában $ grunt watch ● Sass fordítás (bundle exec) ● JSHint ● LiveReload $ grunt build ● Sass fordítás, CSS minimalizálás (bundle exec) ● Kép optimalizálása (OptiPNG, jpegtran) ● Kép hivatkozások átirányítása (image-url) ● JSHint
  20. 20. ? Kérdés?
  21. 21. Köszönöm a figyelmet! Hajas Tamás Drupal tanácsadó http://about.me/tamashajas

×