Slide 1
Slide 1 text
Drupal sminkelés korszerű eszközökkel
avagy
mit tanultam az Aurora alapsminkből?
Slide 2
Slide 2 text
Drupal sminkelés korszerű eszközökkel
avagy
mit tanultam tanulok az Aurora alapsminkből?
Slide 3
Slide 3 text
Drupal sminkelés korszerű eszközökkel
avagy
mit tanultam tanulok az Aurora alapsminkből?
Slide 4
Slide 4 text
“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/
Slide 5
Slide 5 text
Aurora eszközök*
● Bundler
● Bower
● Magic
● Grunt
* Amikről ma szót ejtünk…
Slide 6
Slide 6 text
● Bundler
● Bower
● Magic
●
Slide 7
Slide 7 text
Bundler: ruby gem menedzsment
A szükséges gemek
● rendelkezésre állnak,
● megfelelő a verziójuk.
Telepítése:
$ gem install bundler
Slide 8
Slide 8 text
Gemfile
source 'https://rubygems.org'
gem 'compass-aurora', '~>3.0.0'
gem 'toolkit', '~>1.0.0'
gem 'singularitygs', '~>1.0.7'
…
Slide 9
Slide 9 text
Bundler használat
$ cd az_en_sminkem
$ bundle install
$ git add Gemfile Gemfile.lock
$ git commit -m "…"
$ bundle exec compass watch
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)
…
$ bundle show
Gems included by the bundle:
* addressable (2.3.5)
…
További infó: http://bundler.io
$ bundle show singularitygs
/ahova/telepult/singularitygs-1.0.8
Slide 10
Slide 10 text
● Bundler
● Bower
● Magic
● Grunt
A kép forrása: http://bower.io
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Bower használat
$ cd az_en_sminkem
($ compass install aurora/bower)
$ bower install
($ git …)
További infó: http://bower.io
● Függőségek beállítása: bower.json
● Konfigurálás: .bowerrc
Slide 13
Slide 13 text
● Bundler
● Bower
● Magic
● Grunt
A kép forrása: http://2shi.deviantart.com/art/Top-Hat-Icon-83041677
Slide 14
Slide 14 text
„Keep Frontend DRY; sprinkle it with…”
Slide 15
Slide 15 text
Forrás: https://drupal.org/project/magic
Slide 16
Slide 16 text
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 kijelzése
● A smink beállítások exportálhatóak
● Bármilyen sminkkel használható
További infó: https://drupal.org/project/magic
Slide 17
Slide 17 text
● Bundler
● Bower
● Magic
● Grunt
A kép forrása: http://gruntjs.com
Slide 18
Slide 18 text
Grunt: JS alapú feladat-automatizáló
$ cd az_en_sminkem
($ compass install aurora/grunt)
$ npm install
($ git …)
$ grunt
($ grunt [watch / build])
További infó: http://gruntjs.com/
● Függőségek beállítása: package.json
● Konfigurálás: Gruntfile.js
Telepítése: $ npm install -g grunt-cli
Slide 19
Slide 19 text
Grunt az Aurorában
$ grunt watch
$ grunt build
● Sass fordítás (bundle exec)
● JSHint
● LiveReload
● 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
Slide 20
Slide 20 text
Kérdés?
?
Slide 21
Slide 21 text
Köszönöm a figyelmet!
Hajas Tamás
Drupal tanácsadó
http://about.me/tamashajas