Drupal Front End Development
-
Upload
insready -
Category
Technology
-
view
2.576 -
download
0
description
Transcript of 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
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
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
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
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
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Theming & jQuery:
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
A quick example: Bartik (The default Drupal 7 theme)
Demo: http://sandbox2.insready.com
Theming & jQuery:
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
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
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
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:
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Subtheming:Sub-themes are just like any other theme, with one difference: They inherit the parent theme's resources.
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
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
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Great Base Themes:1. Omega - Responsive HTML5 Base Theme2. Zen http://drupal.org/project/zen3. Fusion http://drupal.org/project/fusion
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Omega subtheme & 960 grid
Demo Time!
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Views & Panels
They are the magic to let you create complex data presentation without writing any code!
Demo Time!
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
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
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Responsive Design & Examples:
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Responsive Design & Examples:
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Omega theme has Grid Responsive Settings.
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
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.
INsReady Inc. Upgrade Your Creat'v'ty 引锐信息科技有限公司 升级你的创造力
Thank You/ 谢谢!
王景昇 (Jingsheng Wang)CEO @ INsReady
微博: @王景昇Twitter: @skyredwang
SPECIAL THANKS to 陈刚 & 上海万达信息股份有限公司 for sponsoring this training!