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 & jQuery
2. Subtheming
3. Omega subtheme & 960 grid
4. Views & Panels
5. CSS & jQuery
6. Responsive Design
2. Workshop (1 hour):
1. Create your own subtheme
2. 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


Theming & jQuery:


Theming & jQuery:

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

Demo: http://sandbox2.insready.com


The number of lines of codes in Bartik:
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 3671 total
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


Theming & jQuery:

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

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


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. Overriding
1. stylesheets[all][] = style.css
2. scripts[] = script.js
3. theme function overrides & template overrides http://drupal.
org/node/173880#function-override


Great Base Themes:
1. Omega - Responsive HTML5 Base Theme
2. Zen http://drupal.org/project/zen
3. 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 & jQuery
1. Drupal 7.x ships with jQuery 1.4.x
2. Drupal 8.x ships with jQuery 1.7.x
3. Drupal 7 dropped IE6 support.
4. Drupal 8 is considering to drop IE7 support.

Developer Tools:
1. Chrome developer tool
2. Firefox firebug
3. IE9 developer tool
4. CSS Lint http://csslint.net/ (Check errors, Compatibility, Performance,
Maintainability & Duplication, Accessibility and OOCSS)
5. jQuery Docs: http://docs.jquery.com/Main_Page
6. api.drupal.org
7. 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


Responsive Design & Examples:


Omega theme has Grid Responsive Settings.


Workshop Tasks:
1. Create your own Omega subtheme
2. Add your own CSS & JS files
3. Make the header background black
4. Create a layout like New York Times,
using Panels
5. Create a Views and display in a grid style
6. Use jQuery to create an overlay and
display welcome message when user
visits the site for the first time.


Thank You/ 谢谢！

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

王景昇 (Jingsheng Wang)
CEO @ INsReady
微博: @王景昇
Twitter: @skyredwang

Drupal Front End Development

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Drupal Front End Development

Ähnlich wie Drupal Front End Development (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Drupal Front End Development