Drupal sminkelés korszerű eszközökkel

Drupal sminkelés korszerű eszközökkel avagy mit tanultam az Aurora alapsminkből?

Drupal sminkelés korszerű eszközökkel avagy mit tanultam tanulok az Aurora
alapsminkből?

“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/

Aurora eszközök* • Bundler • Bower • Magic • Grunt
* Amikről ma szót ejtünk…

• Bundler • Bower • Magic •

Bundler: ruby gem menedzsment A szükséges gemek • rendelkezésre állnak,
• megfelelő a verziójuk. Telepítése: $ gem install bundler

Gemﬁle source 'https://rubygems.org' gem 'compass-aurora', '~>3.0.0' gem 'toolkit', '~>1.0.0' gem
'singularitygs', '~>1.0.7' …

Bundler használat $ cd az_en_sminkem $ bundle install $ git
add Gemfile Gemfile.lock $ git commit -m "…" $ bundle exec compass watch Gemﬁle.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

• Bundler • Bower • Magic • Grunt A kép
forrása: http://bower.io

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

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 • Konﬁgurálás: .bowerrc

forrása: http://2shi.deviantart.com/art/Top-Hat-Icon-83041677

„Keep Frontend DRY; sprinkle it with…”

Forrás: https://drupal.org/project/magic

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

forrása: http://gruntjs.com

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 • Konﬁgurálás: Gruntﬁle.js Telepítése: $ npm install -g grunt-cli

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

Kérdés? ?

Köszönöm a ﬁgyelmet! Hajas Tamás Drupal tanácsadó http://about.me/tamashajas

Drupal sminkelés korszerű eszközökkel

Drupal sminkelés korszerű eszközökkel

Tamás Hajas

More Decks by Tamás Hajas

Other Decks in Technology

Featured

Transcript