Drupal Front End Development

INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司升级你的创造力

Drupal front end development

王景昇 (Jingsheng Wang)CEO @ INsReady

微博: @王景昇Twitter: @skyredwang

The above QR-Code was generated by qr.insready.com


Agenda:1. Presentation (1 hour):

1. Theming & jQuery2. Subtheming3. Omega subtheme & 960 grid4. Views & Panels5. CSS & jQuery6. Responsive Design

2. Workshop (1 hour):1. Create your own subtheme2. Add your own CSS & JS files


Theming & jQuery:1. Theme can change the look and feel of your

Drupal site.2. Logic must be separated as much as

possible from presentation. To accomplish this, modules do as much of the work on the data as possible, and hand that data off to the presentation layer. Modules then provide default implementations that provide the basic presentation and serve as a basis for themes that wish to provide an alternate presentation.

3. ---- http://drupal.org/node/933976

http://drupal.org/node/933976


Theming & jQuery:


A quick example: Bartik (The default Drupal 7 theme)

Demo: http://sandbox2.insready.com

Theming & jQuery:


66 ./templates/maintenance-page.tpl.php 124 ./templates/node.tpl.php 105 ./templates/comment.tpl.php 246 ./templates/page.tpl.php 51 ./templates/comment-wrapper.tpl.php 152 ./template.php 65 ./color/preview.html 200 ./color/preview.css 39 ./color/preview.js 132 ./color/color.inc 41 ./bartik.info 48 ./css/ie-rtl.css 22 ./css/layout-rtl.css 1650 ./css/style.css 271 ./css/style-rtl.css 46 ./css/print.css 18 ./css/ie6.css 63 ./css/ie.css 58 ./css/colors.css 67 ./css/maintenance-page.css 100 ./css/layout.css

The number of lines of codes in Bartik:

3671 total


It takes tremendous effort to develop and design a robust, beautiful (and responsive) Drupal theme.

Therefore, we use Sub-theme most of the time!

Theming & jQuery:


Subtheming:Sub-themes are just like any other theme, with one difference: They inherit the parent theme's resources.


Subtheming:1. Inheritance

1. All style sheets defined in the parent theme will be inherited, as long as you declare at least one stylesheet in your sub-theme's .info file. You must declare at least one stylesheet in your sub-theme for any of the parent theme's stylesheets to be inherited.

2. All JavaScripts defined in the parent theme will be inherited.3. Anything defined in the parent theme's template.php file will be inherited.

This includes theme function overrides, preprocess functions and anything else in that file. Each sub-theme should also have its own template.php file, where you can add additional functions or override functions from the parent theme.

4. Any .tpl.php files from the parent theme will be inherited. You can add template files with more specificity — for instance, node--blog.tpl.php building on an inherited node.tpl.php.

2. Overriding1. stylesheets[all][] = style.css2. scripts[] = script.js 3. theme function overrides & template overrides http://drupal.

org/node/173880#function-override



http://drupal.org/node/173880#function-override





Great Base Themes:1. Omega - Responsive HTML5 Base Theme2. Zen http://drupal.org/project/zen3. Fusion http://drupal.org/project/fusion


Omega subtheme & 960 grid

Demo Time!


Views & Panels

They are the magic to let you create complex data presentation without writing any code!

Demo Time!


CSS & jQuery1. Drupal 7.x ships with jQuery 1.4.x2. Drupal 8.x ships with jQuery 1.7.x3. Drupal 7 dropped IE6 support.4. Drupal 8 is considering to drop IE7 support.

Developer Tools:1. Chrome developer tool2. Firefox firebug3. IE9 developer tool4. CSS Lint http://csslint.net/ (Check errors, Compatibility, Performance,

Maintainability & Duplication, Accessibility and OOCSS)5. jQuery Docs: http://docs.jquery.com/Main_Page6. api.drupal.org7. Devel http://drupal.org/project/devel

your style is nothing more than an advice for browsers to display it in certain ways. It is by no means a law

http://csslint.net/

http://docs.jquery.com/Main_Page


Responsive Design & Examples:


Omega theme has Grid Responsive Settings.


Workshop Tasks:1. Create your own Omega subtheme 2. Add your own CSS & JS files3. Make the header background black4. Create a layout like New York Times,

using Panels5. Create a Views and display in a grid style6. Use jQuery to create an overlay and

display welcome message when user visits the site for the first time.


Thank You/ 谢谢！

王景昇 (Jingsheng Wang)CEO @ INsReady

微博: @王景昇Twitter: @skyredwang

SPECIAL THANKS to 陈刚 & 上海万达信息股份有限公司 for sponsoring this training!

Drupal Front End Development

Technology

Transcript of Drupal Front End Development