These are the slides for the presentation I gave at DrupalCamp Chicago 2009. http://www.drupalcampchicago.org/sessions/new-adventures-drupal-theming
In this session I’ll present a roadmap to learning Drupal Theming. You won’t learn everything about Drupal theming, but you will learn that you don’t need to know everything in order to start building Drupal themes.
These are the slides for the presentation I gave at DrupalCamp Chicago 2009. http://www.drupalcampchicago.org/sessions/new-adventures-drupal-theming
In this session I’ll present a roadmap to learning Drupal Theming. You won’t learn everything about Drupal theming, but you will learn that you don’t need to know everything in order to start building Drupal themes.
Drupal's release cycle follows the familiar Gartner Hype Cycle. With the release of Drupal 8.1.0, Drupal is now following a pattern that should fix the worst parts of the hype cycle.
Drupal 8 rewrote all of its HTML templates using Twig. But Drupal only uses 30% of Twig's full power. In this session, we'll start with the basics and work our way through Twig's powerful feature set.
CSS-in-JS: unexpected lessons for Drupal component designJohn Albin Wilkins
A presentation for beginner's to Drupal 8 theming. Presented at Drupalcon Vienna on 2017-09-27. Goes through three important CSS-in-JS lessons that the JavaScript community has learned and how that can be applied to building a theme in Drupal 8.
Styleguide-Driven Development: The New Web DevelopmentJohn Albin Wilkins
The session was originally titled "Managing Complex Projects with Design Components”, but the training I took to become a certified ScrumMaster blew my mind.
Integrating agile development with web development is actually very simple. It's called Styleguide-Driven Development.
In this session, we will discuss the two requirements for Style Guide Driven Development: component-based design and automated style guides.
Our CSS sucks. We've been building sites for over a decade using crappy, ornamentation techniques and shoddy selectors. Our styles unintentional bleed across the site. Our stylesheets are fragile and unmaintainable and full of specificity landmines. Pandas wander alone in the wilderness.
But there's no need to drown ourselves in beer. New technologies like Web Components and new techniques like OOCSS, SMACSS and BEM show us that planning before building can make our projects maintainable, easier to debug, and smaller with reduced CSS file sizes.
This session will introduce the basic techniques for CSS layering and using design components, the heart of any front-end CSS project. We will also discuss CSS/Sass organization and tips to more easily implement these ideas.
SassConf: Managing Complex Projects with Design ComponentsJohn Albin Wilkins
Our CSS sucks. We've been building sites for over a decade using crappy, ornamentation techniques and shoddy selectors. Our styles unintentional bleed across the site. Our stylesheets are fragile and unmaintainable and full of specificity landminds. Pandas wander alone in the wilderness.
But there's no need to drown ourselves in beer. New techniques like OOCSS, SMACSS and BEM show us that planning before building can make our projects maintainable, easier to debug, and smaller with reduced CSS file sizes.
This workshop will introduce the basic techniques for CSS layering and using design components, the heart of any front-end CSS project. We will also discuss Sass organization and tips to more easily implement these ideas.
4. JohnAlbin
• Top 30 contributors to Drupal 7
Drupal7前30名貢獻者
• Co-author ofDrupal 7 Module Development
Drupal 7 Module Development 書的作者其中之⼀一
5. JohnAlbin
• Top 30 contributors to Drupal 7
Drupal7前30名貢獻者
• Co-author ofDrupal 7 Module Development
Drupal 7 Module Development 書的作者其中之⼀一
• Every time someone downloads Drupal 7
I make NT$1!
每次有人下載Drupal7,我會得到NT $1!
6. JohnAlbin
• Top 30 contributors to Drupal 7
Drupal7前30名貢獻者
• Co-author of Drupal 7 Module Development
Drupal 7 Module Development 書的作者其中之⼀一
• Every time someone downloads Drupal 7
I make NT$1! NT$0
每次有人下載Drupal7,我會得到NT $1! NT $0
NT $1
• I love Drupal! 我愛的Drupal!
7. I want to build a website
我想建立⼀一個網站
http://www.flickr.com/photos/74998608@N00/2540055580/
8. I want to build a website
我想建立⼀一個網站
• HTML
http://www.flickr.com/photos/74998608@N00/2540055580/
9. I want to build a website
我想建立⼀一個網站
• HTML
• CSS
http://www.flickr.com/photos/74998608@N00/2540055580/
10. I want to build a website
我想建立⼀一個網站
• HTML
• CSS
• Programming: 程式設計:
JavaScript, PHP, Ruby, Node.js
http://www.flickr.com/photos/74998608@N00/2540055580/
11. I want to build a website
我想建立⼀一個網站
• HTML
• CSS
• Programming: 程式設計:
JavaScript, PHP, Ruby, Node.js
• APIs: RSS, Facebook OAuth,
Weibo, Google +1 button
http://www.flickr.com/photos/74998608@N00/2540055580/
12. It can be a bit
overwhelming
它可以是⼀一個
有點勢不可擋
http://www.flickr.com/photos/30016568@N04/3219197135/
14. How can we make it easier?
我們怎樣才能使它變得更容易?
• Don’t make me learn all the technologies
不要叫我所有技術都要學
15. How can we make it easier?
我們怎樣才能使它變得更容易?
• Don’t make me learn all the technologies
不要叫我所有技術都要學
• Build my website for me
可以幫我建立我的網站
16. How can we make it easier?
我們怎樣才能使它變得更容易?
• Don’t make me learn all the technologies
不要叫我所有技術都要學
• Build my website for me
可以幫我建立我的網站
• Separate my content from my design and
website features
可以把我的內容從我的設計和網站功能分
開
19. Content Management System
內容管理系統
• Content
內容
• Design設計
implemented with a Templating System
運用模板系統來做
20. Content Management System
內容管理系統
• Content
內容
• Design 設計
implemented with a Templating System
運用模板系統來做
• Features特點
implemented with Plug-ins/Extensions/Modules
運用Plug-ins/Extensions/Modules來做
43. Big Ideas @ Berkeley
大想法 @ Berkeley
• Students make proposals to
change the world
學生提出可以改變世界的建議
44. Big Ideas @ Berkeley
大想法 @ Berkeley
• Students make proposals to
change the world
學生提出可以改變世界的建議
• Foundation evaluates and funds
the proposals
基金將這些建議給已評估和資
金
45. Big Ideas @ Berkeley
大想法 @ Berkeley
• Students make proposals to
change the world
學生提出可以改變世界的建議
• Foundation evaluates and funds
the proposals
基金將這些建議給已評估和資
金
• $267,000 in 2011
在2001年, 給了美金 $267,000
52. Be great at what you do…
and share it, so others can be
great at what they do
善於你做你要做的事
然後跟大家分享
讓別人也能做他們善於做的事
http://www.flickr.com/photos/68001867@N00/875360473/