SlideShare a Scribd company logo
WordPress Theme
Framework And Responsive
Theme
Who Am I?
 Damien Oh
 WordPress Developer
 A Blogger and Editor at Make Tech
  Easier (http://maketecheasier.com) -
  an online tech tutorial site
What Is a Theme
Framework?
 A starter kit that enables the
  user/developer to quickly create a
  theme
 In WP, a theme framework can exist in
  different form:
    ◦ Drop-in code (useful for hardcore
      developers)
    ◦ Parent theme (useful for users with a little
      coding knowledge)
    ◦ Complete theme with plenty of
      customisation option (useful for end-
Advantages of Using a Theme
Framework
 Shorten the theme development time.
 Can focus solely on the design.
 Update of the theme does not break
  the site.
 Can create a beautiful theme without
  any coding knowledge.

Recommended for you

Web Standards and Accessibility
Web Standards and AccessibilityWeb Standards and Accessibility
Web Standards and Accessibility

This document introduces web standards and accessibility. It discusses how Jeffrey Zeldman and the Web Standards Project advocated for standards to make websites more accessible, compatible across browsers and devices, and sustainable over time. The document explains key standards like XHTML, CSS, and DOM that separate website structure, style and behavior. It also outlines why standards help with accessibility, device independence, performance and more. Finally, it provides an overview of different types of disabilities that standards aim to support, such as visual, motor and cognitive impairments.

webstandardsaccessibility
Making Your Own CSS Framework
Making Your Own CSS FrameworkMaking Your Own CSS Framework
Making Your Own CSS Framework

The document discusses making your own CSS framework to manage multiple websites with limited resources. It recommends starting with a CSS reset, basic structural elements, and columns for layout. Future-proof the framework to match HTML5. Keep colors, images, and styling out of the framework. Build reusable widgets and allow for design freedom and individuality across sites. The initial version may be too constricting without flexibility. Add optional "flare" like boxes and slideshows once the basics are established. The framework should be easily upgradable and accessible across managed sites.

Building a Moodle theme with bootstrap
Building a Moodle theme with bootstrapBuilding a Moodle theme with bootstrap
Building a Moodle theme with bootstrap

This document summarizes the history and development of the Bootstrap theme for Moodle. It discusses how the theme was originally developed during a Moodle conference by several developers. The Bootstrap theme was later adopted into the Moodle core as the "bootstrapbase" theme in version 2.5. The theme allows other themes like "Clean" to be built upon it. It provides templates and styles based on the Twitter Bootstrap framework to help developers create interfaces without design skills. Future development of the Bootstrap theme for Moodle includes improved styling for editors, accordion layouts, course progress indicators, and search functionality.

bootstrapmoodledevelopment
Disadvantages of Theme
Framework
 Learning curve.
 Some theme frameworks come with
  fixed functionalities, thus limiting your
  choices
 Some theme framework are resource-
  intensive and add unnecessary
  burden to your server.
 Most of the good one are not free.
  Some of the free one don’t provide
  support or good documentation
What Is Responsive Design?
   One design for all devices and screen
    size.
Technical How-to (Brief)
 A combination of CSS 3 @media
  query and javascript.
 Examples:
    ◦ @media screen and (max-
      width:480px) {css code}
    ◦ @media screen and (min-width:
      600px) and (max-width: 900px)
      {css code}
    ◦ @media only screen and (min-
      width: 1149px) {css code}
More Examples
 @media only screen and (min-
  device-pixel-ratio: 2){css code}
 @media screen and (device-
  aspect-ratio: 1280/720) {css
  code}
 @media screen and (orientation:
  portrait){css code}

   Responsive Web Design by Ethan
    Marcotte
    (http://www.abookapart.com/products/respo
    nsive-web-design)

Recommended for you

Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN

DNN is an excellent platform for a responsive website, but its important to know the ''Do's'' and ''Don'ts'' when designing responsively. This presentation will cover all things responsive: from wireframes and mockups, to media queries and javascript snippets. Get valuable tips on how to create a responsive site following modern web standards, while harnessing the power of the DNN framework. Learn how to design and plan your site, develop layouts with a fluid grid, and test to ensure your site looks great on tons of devices!

web designdotnetnukeresponsive web design
CMS 101 Drupal
CMS 101 DrupalCMS 101 Drupal
CMS 101 Drupal

CMS 101: DUY Website in Minutes Using Drupal - by Jerry Ferguson. Session from Desert Code Camp 2007 in Phoenix, AZ

Bootstrap 3.1.1
Bootstrap 3.1.1Bootstrap 3.1.1
Bootstrap 3.1.1

Bootstrap is a popular front-end framework for faster and easier web development. It uses HTML, CSS, and JavaScript for responsive design that works across browsers and devices. Key features include its grid system, pre-built components, and mobile-first approach. The document outlines Bootstrap's overview, benefits, getting started instructions, grid system, CSS/JavaScript features, layouts, media queries, sample structures, and customization options.

bootstrap 3.1.1
Advantages of Responsive
Design
 One theme to rule them all.
 Consistent layout.
 Best suited for SEO purpose.
  Recommended by Google
  (https://developers.google.com/webmasters
  /smartphone-sites/details)
Disadvantages of Responsive
Design
 It is complicated.
 Requires plenty of time to develop.
 May be more resource intensive on a
  mobile device.
 May not be suitable for all users.
Responsive + Theme
Framework
 Combining responsive design into
  theme framework.
 Enable users/developers to create
  responsive WP theme effortlessly.
Responsive Theme Framework
For WordPress (User)
 Gantry Framework (http://www.gantry-
  framework.org/)
 PressWork
  (http://wordpress.org/extend/themes/pressw
  ork)
 Catalyst (Premium theme -
  USD$127, http://catalysttheme.com)
 Ultimatum (Premium theme – USD$65
  - $170, http://ultimatumtheme.com/)

Recommended for you

Wordpress Underscores & foundation5
Wordpress Underscores & foundation5Wordpress Underscores & foundation5
Wordpress Underscores & foundation5

Underscores is a starter theme that can help build the next great WordPress theme without needing PHP or programming knowledge. Foundation 5 is a front-end framework that uses a mobile-first and responsive grid approach. It has new features like fast click, off canvas, GPU acceleration and interchange. Foundation 5 emphasizes building interfaces for mobile screens first before larger displays using a bottom-up approach.

foundationwebresponsive
CSS For Coders
CSS For CodersCSS For Coders
CSS For Coders

This document provides an introduction to CSS (Cascading Style Sheets) for web developers. It discusses CSS terminology like selectors using id and class attributes. It also covers how to select and style groups of elements and descendants. The document gives examples of using CSS for colors, backgrounds, typography, layout using the box model, and print styles. It emphasizes clean separation of code and content and providing hooks for designers to easily style pages.

WordPress Theme Development Basics
WordPress Theme Development BasicsWordPress Theme Development Basics
WordPress Theme Development Basics

Learn the basics of building WordPress themes. This presentation is appropriate for people who are somewhat familiar with PHP and databases. To Learn More, check out http://techliminal.com

wordpressdatabaseephp
Responsive Theme Framework
For WordPress (Developer)
   Bones (http://themble.com/bones/)
   Skeleton
    (http://themes.simplethemes.com/skeleto
    n/)
   Roots (http://www.rootstheme.com/)
   Reverie (http://themefortress.com/reverie/)
   Foundation
    (https://github.com/drewsymo/Foundation)
   Genesis (http://www.studiopress.com) -
    USD$59.95
Useful Tools
   FireSizer (Firefox Addon -
    https://addons.mozilla.org/en-
    us/firefox/addon/firesizer/)
   Windows Resizer (Chrome Addon -
    https://chrome.google.com/webstore/detail/win
    dow-
    resizer/kkelicaakdanhinjdeammmilcgefonfh)
   User Agent Switcher (Firefox -
    https://addons.mozilla.org/en-
    US/firefox/addon/user-agent-switcher/, Chrome
    -
    https://chrome.google.com/webstore/detail/user
    -agent-switcher-for-
    c/djflhoibgkdhkhhcedjiklpkjnoahfmg)
Useful Resources
 Media Queries - http://mediaqueri.es/
 Responsinator - http://responsinator.com/
   Modernizr - http://modernizr.com/
Questions?

Recommended for you

What Is WordPress and Why Is Everyone Talking About It?
What Is WordPress and Why Is Everyone Talking About It?What Is WordPress and Why Is Everyone Talking About It?
What Is WordPress and Why Is Everyone Talking About It?

This workshop is perfect if you are a beginner or still on the fence. We'll look at the major issues you should consider before diving into the WordPress waters.

wordpresswebsitesdiyer
How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014

Not everyone can afford to have a custom designed theme for their WordPress website. Often we have to resort to the themes that are available for free or cheap. But how do we avoid having the website look the same as everyone else’s who used the same theme? I will show you how to take the most common WordPress.org themes and turn them into the unique look you want. Google Chrome or Firefox recommended. No coding knowledge is required, but you will learn some basic CSS.

csswordpresswordcamp
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers Perspective

Display Suite is a Drupal module that allows users to take full control over how content is displayed using a drag and drop interface without having to work with template files. It provides predefined layouts and allows users to create custom layouts and view modes. Display Suite also features code fields to add custom variables and styles to control field formatting. The module is actively maintained and widely used with thousands of active sites.

drupalthemedisplay suite
The End

More Related Content

What's hot

How to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public ReleaseHow to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public Release
David Yeiser
 
Responsive WordPress workflow
Responsive WordPress workflowResponsive WordPress workflow
Responsive WordPress workflow
James Bundey
 
Adobe Source 2016 - Styleguides and AEM
Adobe Source 2016 - Styleguides and AEMAdobe Source 2016 - Styleguides and AEM
Adobe Source 2016 - Styleguides and AEM
Michael Leroy
 
Web Standards and Accessibility
Web Standards and AccessibilityWeb Standards and Accessibility
Web Standards and Accessibility
Karl Dawson
 
Making Your Own CSS Framework
Making Your Own CSS FrameworkMaking Your Own CSS Framework
Making Your Own CSS Framework
Dan Sagisser
 
Building a Moodle theme with bootstrap
Building a Moodle theme with bootstrapBuilding a Moodle theme with bootstrap
Building a Moodle theme with bootstrap
Bas Brands
 
Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN
gravityworksdd
 
CMS 101 Drupal
CMS 101 DrupalCMS 101 Drupal
CMS 101 Drupal
ggfergu
 
Bootstrap 3.1.1
Bootstrap 3.1.1Bootstrap 3.1.1
Bootstrap 3.1.1
Prasad Parab
 
Wordpress Underscores & foundation5
Wordpress Underscores & foundation5Wordpress Underscores & foundation5
Wordpress Underscores & foundation5
Aum Watcharapol
 
CSS For Coders
CSS For CodersCSS For Coders
CSS For Coders
ggfergu
 
WordPress Theme Development Basics
WordPress Theme Development BasicsWordPress Theme Development Basics
WordPress Theme Development Basics
Tech Liminal
 
What Is WordPress and Why Is Everyone Talking About It?
What Is WordPress and Why Is Everyone Talking About It?What Is WordPress and Why Is Everyone Talking About It?
What Is WordPress and Why Is Everyone Talking About It?
BobWP.com
 
How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014
James Strang
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers Perspective
Mediacurrent
 
How to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - SacramentoHow to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - Sacramento
Suzette Franck
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Suzanne Dergacheva
 
What Is WordPress and Why Is Everyone Talking About It
What Is WordPress and Why Is Everyone Talking About ItWhat Is WordPress and Why Is Everyone Talking About It
What Is WordPress and Why Is Everyone Talking About It
BobWP.com
 
Intro to WordPress Plugins
Intro to WordPress PluginsIntro to WordPress Plugins
Intro to WordPress Plugins
zamoose
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Sean Wolfe
 

What's hot (20)

How to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public ReleaseHow to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public Release
 
Responsive WordPress workflow
Responsive WordPress workflowResponsive WordPress workflow
Responsive WordPress workflow
 
Adobe Source 2016 - Styleguides and AEM
Adobe Source 2016 - Styleguides and AEMAdobe Source 2016 - Styleguides and AEM
Adobe Source 2016 - Styleguides and AEM
 
Web Standards and Accessibility
Web Standards and AccessibilityWeb Standards and Accessibility
Web Standards and Accessibility
 
Making Your Own CSS Framework
Making Your Own CSS FrameworkMaking Your Own CSS Framework
Making Your Own CSS Framework
 
Building a Moodle theme with bootstrap
Building a Moodle theme with bootstrapBuilding a Moodle theme with bootstrap
Building a Moodle theme with bootstrap
 
Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN
 
CMS 101 Drupal
CMS 101 DrupalCMS 101 Drupal
CMS 101 Drupal
 
Bootstrap 3.1.1
Bootstrap 3.1.1Bootstrap 3.1.1
Bootstrap 3.1.1
 
Wordpress Underscores & foundation5
Wordpress Underscores & foundation5Wordpress Underscores & foundation5
Wordpress Underscores & foundation5
 
CSS For Coders
CSS For CodersCSS For Coders
CSS For Coders
 
WordPress Theme Development Basics
WordPress Theme Development BasicsWordPress Theme Development Basics
WordPress Theme Development Basics
 
What Is WordPress and Why Is Everyone Talking About It?
What Is WordPress and Why Is Everyone Talking About It?What Is WordPress and Why Is Everyone Talking About It?
What Is WordPress and Why Is Everyone Talking About It?
 
How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers Perspective
 
How to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - SacramentoHow to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - Sacramento
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
 
What Is WordPress and Why Is Everyone Talking About It
What Is WordPress and Why Is Everyone Talking About ItWhat Is WordPress and Why Is Everyone Talking About It
What Is WordPress and Why Is Everyone Talking About It
 
Intro to WordPress Plugins
Intro to WordPress PluginsIntro to WordPress Plugins
Intro to WordPress Plugins
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 

Viewers also liked

Bootstrap Responsive Framework
Bootstrap Responsive FrameworkBootstrap Responsive Framework
Bootstrap Responsive Framework
Steve Noone
 
WordPress for mobile
WordPress for mobileWordPress for mobile
WordPress for mobile
rachel_mccollin
 
Sink or Swim? Supporting the Transition to New Manager | Webinar 08.11.15
Sink or Swim? Supporting the Transition to New Manager | Webinar 08.11.15Sink or Swim? Supporting the Transition to New Manager | Webinar 08.11.15
Sink or Swim? Supporting the Transition to New Manager | Webinar 08.11.15
BizLibrary
 
[INFOGRAPHIC] 2015 State of Social Business
[INFOGRAPHIC] 2015 State of Social Business[INFOGRAPHIC] 2015 State of Social Business
[INFOGRAPHIC] 2015 State of Social Business
Altimeter, a Prophet Company
 
Must Have Apps for Windows 10
Must Have Apps for Windows 10Must Have Apps for Windows 10
Must Have Apps for Windows 10
Wiley
 
10 Commandments of Virtual Teams
10 Commandments of Virtual Teams10 Commandments of Virtual Teams
10 Commandments of Virtual Teams
PGi
 
12 Brand Logos With Hidden and Interesting Messages
12 Brand Logos With Hidden and Interesting Messages12 Brand Logos With Hidden and Interesting Messages
12 Brand Logos With Hidden and Interesting Messages
Pawan Kumar
 
My personal Growth Hacking Challenge
My personal Growth Hacking ChallengeMy personal Growth Hacking Challenge
My personal Growth Hacking Challenge
HENDRIKLENNARZ.COM
 
Rethinking Website Design: Creating a Peak-Performing Website with Less Risk ...
Rethinking Website Design: Creating a Peak-Performing Website with Less Risk ...Rethinking Website Design: Creating a Peak-Performing Website with Less Risk ...
Rethinking Website Design: Creating a Peak-Performing Website with Less Risk ...
HubSpot
 

Viewers also liked (9)

Bootstrap Responsive Framework
Bootstrap Responsive FrameworkBootstrap Responsive Framework
Bootstrap Responsive Framework
 
WordPress for mobile
WordPress for mobileWordPress for mobile
WordPress for mobile
 
Sink or Swim? Supporting the Transition to New Manager | Webinar 08.11.15
Sink or Swim? Supporting the Transition to New Manager | Webinar 08.11.15Sink or Swim? Supporting the Transition to New Manager | Webinar 08.11.15
Sink or Swim? Supporting the Transition to New Manager | Webinar 08.11.15
 
[INFOGRAPHIC] 2015 State of Social Business
[INFOGRAPHIC] 2015 State of Social Business[INFOGRAPHIC] 2015 State of Social Business
[INFOGRAPHIC] 2015 State of Social Business
 
Must Have Apps for Windows 10
Must Have Apps for Windows 10Must Have Apps for Windows 10
Must Have Apps for Windows 10
 
10 Commandments of Virtual Teams
10 Commandments of Virtual Teams10 Commandments of Virtual Teams
10 Commandments of Virtual Teams
 
12 Brand Logos With Hidden and Interesting Messages
12 Brand Logos With Hidden and Interesting Messages12 Brand Logos With Hidden and Interesting Messages
12 Brand Logos With Hidden and Interesting Messages
 
My personal Growth Hacking Challenge
My personal Growth Hacking ChallengeMy personal Growth Hacking Challenge
My personal Growth Hacking Challenge
 
Rethinking Website Design: Creating a Peak-Performing Website with Less Risk ...
Rethinking Website Design: Creating a Peak-Performing Website with Less Risk ...Rethinking Website Design: Creating a Peak-Performing Website with Less Risk ...
Rethinking Website Design: Creating a Peak-Performing Website with Less Risk ...
 

Similar to Wp responsive-theme-framework

Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13
Frédéric Harper
 
Just dev it presenation modified word press 101
Just dev it presenation   modified word press 101Just dev it presenation   modified word press 101
Just dev it presenation modified word press 101
roguevoice
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Nathan Smith
 
2011 05 word-press-not-just-for-blogging-anymore
2011 05 word-press-not-just-for-blogging-anymore2011 05 word-press-not-just-for-blogging-anymore
2011 05 word-press-not-just-for-blogging-anymore
Rudy Duke
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
James Panton
 
Rwd wp-8-14-2012
Rwd wp-8-14-2012Rwd wp-8-14-2012
Rwd wp-8-14-2012
Thomas Carney
 
Smwcon spring2011 tutorial applied semantic mediawiki
Smwcon spring2011 tutorial applied semantic mediawikiSmwcon spring2011 tutorial applied semantic mediawiki
Smwcon spring2011 tutorial applied semantic mediawiki
Jesse Wang
 
Beginner's Guide to WordPress For Noncoders
Beginner's Guide to WordPress For NoncodersBeginner's Guide to WordPress For Noncoders
Beginner's Guide to WordPress For Noncoders
Bethany Siegler
 
Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08
Jamie Oastler
 
Show Me The Cache!
Show Me The Cache!Show Me The Cache!
Show Me The Cache!
Andy Melichar
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
Jj Jurgens
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
Mediacurrent
 
Word press in 60 minutes
Word press in 60 minutesWord press in 60 minutes
Word press in 60 minutes
Michelle Castillo
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
Gareth Saunders
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
Evan Mullins
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Mario Hernandez
 
Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3
Zohar Arad
 
Wordpress as a CMS
Wordpress as a CMSWordpress as a CMS
Wordpress as a CMS
Michael Hammel
 
Progressive enhancement
Progressive enhancementProgressive enhancement
Progressive enhancement
Zohar Arad
 

Similar to Wp responsive-theme-framework (20)

Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13
 
Just dev it presenation modified word press 101
Just dev it presenation   modified word press 101Just dev it presenation   modified word press 101
Just dev it presenation modified word press 101
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
2011 05 word-press-not-just-for-blogging-anymore
2011 05 word-press-not-just-for-blogging-anymore2011 05 word-press-not-just-for-blogging-anymore
2011 05 word-press-not-just-for-blogging-anymore
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
Rwd wp-8-14-2012
Rwd wp-8-14-2012Rwd wp-8-14-2012
Rwd wp-8-14-2012
 
Smwcon spring2011 tutorial applied semantic mediawiki
Smwcon spring2011 tutorial applied semantic mediawikiSmwcon spring2011 tutorial applied semantic mediawiki
Smwcon spring2011 tutorial applied semantic mediawiki
 
Beginner's Guide to WordPress For Noncoders
Beginner's Guide to WordPress For NoncodersBeginner's Guide to WordPress For Noncoders
Beginner's Guide to WordPress For Noncoders
 
Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08
 
Show Me The Cache!
Show Me The Cache!Show Me The Cache!
Show Me The Cache!
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
 
Word press in 60 minutes
Word press in 60 minutesWord press in 60 minutes
Word press in 60 minutes
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3
 
Wordpress as a CMS
Wordpress as a CMSWordpress as a CMS
Wordpress as a CMS
 
Progressive enhancement
Progressive enhancementProgressive enhancement
Progressive enhancement
 

Recently uploaded

Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 

Recently uploaded (20)

Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 

Wp responsive-theme-framework

  • 1. WordPress Theme Framework And Responsive Theme
  • 2. Who Am I?  Damien Oh  WordPress Developer  A Blogger and Editor at Make Tech Easier (http://maketecheasier.com) - an online tech tutorial site
  • 3. What Is a Theme Framework?  A starter kit that enables the user/developer to quickly create a theme  In WP, a theme framework can exist in different form: ◦ Drop-in code (useful for hardcore developers) ◦ Parent theme (useful for users with a little coding knowledge) ◦ Complete theme with plenty of customisation option (useful for end-
  • 4. Advantages of Using a Theme Framework  Shorten the theme development time.  Can focus solely on the design.  Update of the theme does not break the site.  Can create a beautiful theme without any coding knowledge.
  • 5. Disadvantages of Theme Framework  Learning curve.  Some theme frameworks come with fixed functionalities, thus limiting your choices  Some theme framework are resource- intensive and add unnecessary burden to your server.  Most of the good one are not free. Some of the free one don’t provide support or good documentation
  • 6. What Is Responsive Design?  One design for all devices and screen size.
  • 7. Technical How-to (Brief)  A combination of CSS 3 @media query and javascript.  Examples: ◦ @media screen and (max- width:480px) {css code} ◦ @media screen and (min-width: 600px) and (max-width: 900px) {css code} ◦ @media only screen and (min- width: 1149px) {css code}
  • 8. More Examples  @media only screen and (min- device-pixel-ratio: 2){css code}  @media screen and (device- aspect-ratio: 1280/720) {css code}  @media screen and (orientation: portrait){css code}  Responsive Web Design by Ethan Marcotte (http://www.abookapart.com/products/respo nsive-web-design)
  • 9. Advantages of Responsive Design  One theme to rule them all.  Consistent layout.  Best suited for SEO purpose. Recommended by Google (https://developers.google.com/webmasters /smartphone-sites/details)
  • 10. Disadvantages of Responsive Design  It is complicated.  Requires plenty of time to develop.  May be more resource intensive on a mobile device.  May not be suitable for all users.
  • 11. Responsive + Theme Framework  Combining responsive design into theme framework.  Enable users/developers to create responsive WP theme effortlessly.
  • 12. Responsive Theme Framework For WordPress (User)  Gantry Framework (http://www.gantry- framework.org/)  PressWork (http://wordpress.org/extend/themes/pressw ork)  Catalyst (Premium theme - USD$127, http://catalysttheme.com)  Ultimatum (Premium theme – USD$65 - $170, http://ultimatumtheme.com/)
  • 13. Responsive Theme Framework For WordPress (Developer)  Bones (http://themble.com/bones/)  Skeleton (http://themes.simplethemes.com/skeleto n/)  Roots (http://www.rootstheme.com/)  Reverie (http://themefortress.com/reverie/)  Foundation (https://github.com/drewsymo/Foundation)  Genesis (http://www.studiopress.com) - USD$59.95
  • 14. Useful Tools  FireSizer (Firefox Addon - https://addons.mozilla.org/en- us/firefox/addon/firesizer/)  Windows Resizer (Chrome Addon - https://chrome.google.com/webstore/detail/win dow- resizer/kkelicaakdanhinjdeammmilcgefonfh)  User Agent Switcher (Firefox - https://addons.mozilla.org/en- US/firefox/addon/user-agent-switcher/, Chrome - https://chrome.google.com/webstore/detail/user -agent-switcher-for- c/djflhoibgkdhkhhcedjiklpkjnoahfmg)
  • 15. Useful Resources  Media Queries - http://mediaqueri.es/  Responsinator - http://responsinator.com/  Modernizr - http://modernizr.com/

Editor's Notes

  1. Explain the differences between a free theme and a theme framework and why is it beneficial to both end users and developers