Drupal sminkelés korszerű eszközökkel
-
Upload
hajas-tamas -
Category
Technology
-
view
341 -
download
0
description
Transcript of Drupal sminkelés korszerű eszközökkel
![Page 1: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/1.jpg)
Drupal sminkelés korszer eszközökkelűavagy
mit tanultam az Aurora alapsminkből?
![Page 2: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/2.jpg)
Drupal sminkelés korszer eszközökkelűavagy
mit tanultam tanulok az Aurora alapsminkből?
![Page 3: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/3.jpg)
Drupal sminkelés korszer eszközökkelűavagy
mit tanultam tanulok az Aurora alapsminkből?
![Page 4: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/4.jpg)
“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/
![Page 5: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/5.jpg)
Aurora eszközök*
● Bundler● Bower● Magic● Grunt
* Amikről ma szót ejtünk…
![Page 6: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/6.jpg)
● Bundler● Bower● Magic● Grunt
A kép forrása: http://bundler.io
![Page 7: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/7.jpg)
Bundler: ruby gem menedzsment
A szükséges gemek
● rendelkezésre állnak,
● megfelelő a verziójuk.
Telepítése:
$ gem install bundler
![Page 8: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/8.jpg)
Gemfile
source 'https://rubygems.org'
gem 'compass-aurora', '~>3.0.0'
gem 'toolkit', '~>1.0.0'
gem 'singularitygs', '~>1.0.7'
…
![Page 9: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/9.jpg)
Bundler használat$ cd az_en_sminkem
$ bundle install
$ git add Gemfile Gemfile.lock
$ git commit -m "…"
$ bundle exec compass watch
Gemfile.lockGEM 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
![Page 10: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/10.jpg)
● Bundler● Bower● Magic● Grunt
A kép forrása: http://bower.io
![Page 11: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/11.jpg)
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
![Page 12: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/12.jpg)
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
![Page 13: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/13.jpg)
● Bundler● Bower● Magic● Grunt
A kép forrása: http://2shi.deviantart.com/art/Top-Hat-Icon-83041677
![Page 14: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/14.jpg)
„Keep Frontend DRY; sprinkle it with…”
![Page 15: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/15.jpg)
Forrás: https://drupal.org/project/magic
![Page 16: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/16.jpg)
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
![Page 17: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/17.jpg)
● Bundler● Bower● Magic● Grunt
A kép forrása: http://gruntjs.com
![Page 18: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/18.jpg)
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
![Page 19: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/19.jpg)
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
![Page 20: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/20.jpg)
Kérdés??
![Page 21: Drupal sminkelés korszerű eszközökkel](https://reader033.fdocuments.in/reader033/viewer/2022060202/559b5bce1a28abd77f8b46af/html5/thumbnails/21.jpg)
Köszönöm a figyelmet!
Hajas TamásDrupal tanácsadó
http://about.me/tamashajas