Download to read offline
Uploaded byOomph, Inc.
NEDCamp Base Theme Presentation
This document outlines a presentation by John Cionci and Kathy Beck on using a base theme for frontend development to avoid code bloat and ensure team cohesiveness. It highlights the importance of file organization, documentation, and utilizing a toolkit for prototyping. The presentation also encourages contributions to the Drupal community by releasing code as open source.
More Related Content
Similar to NEDCamp Base Theme Presentation
NEDCamp Base Theme Presentation
- 1. CONSULTING | DESIGN| ENGINEERING
- 2. John Cionci Senior Front End Developer @johncionci Kathy Beck Front End Developer @kbeck303 INTRODUCTIONS
- 3. WHY? Why notuse Zen, Omega, Base, or another theme? ● Code bloat ● Code base understanding vs. themer’s intentions ● Team familiarity
- 4. OBSTACLES What aresome of the drawbacks or concerns? ● Resistance ● Time ● Investment
- 5. ONE TEAM ONETHEME Why we have decided to use a Base Theme as a company ● Company processes ● Team cohesiveness ● Codebase knowledge
- 6. ACCOUNTABILITY Don’t gorogue man! ● File organization and structure ● Documentation and comments ● Signatures
- 7. PROTOTYPING & WIREFRAMING No throw-away work ● HTML structure and layout ● An interactive sitemap ● A working responsive wireframe
- 8. TOOLKIT Every craftsman(or woman) has a set of tools they use, developers are the same. ● Frameworks ● Build Tools ● Preprocessors
- 9. RELEASE IT Opensource your code! ● Give back to the Drupal community ● Get feedback from other developers ● Show off your company’s skills
- 10.
- 11.
- 12. John Cionci Senior Front End Developer @johncionci @oomphinc Kathy Beck Front End Developer @kbeck303 http://oomphinc.com OOMPH DrupalPVD November 12th at 6:00pm at Founders' League 95 Chestnut Street, Providence RI
Editor's Notes
- #2 Hello everyone and thank you for coming to our discussion on “Owning Your Base Theme”. Lets get some of the businessing out of the way first. We are Oomph! Oomph is a full-service digital firm assisting premium brands and media companies with WordPress and Drupal strategy, design, development, & migration. We have two locations, one in Boston and also here in Providence. Boston - 66 Long Wharf, Boston, MA 02110 Providence - 460 Harris Ave, Providence RI 02909 I am John Cionci a frontend developer at Oomph and have been with the company for just over 5 years. In a moment I will turn this over to Kathy Beck, she is another one of our frontend developers that has recently come aboard. As frontend developers we get tasked with a variety of items when we are creating our themes. typography, asset sizes, load times, screen resolutions, browser inconsistencies we need to figure out how all these things are repeated, how long they take, whats the best approach ( for this project or all the projects ) and oh yeah, figure it out within x time frame and under x budget... What Kathy is going to walkthrough is what we decided to do in order to try to minimize and streamline these issues, at the same time how it benefits the company that you may work for, or own. Kathy...
- #3 John Hello everyone and thank you for coming to our discussion on “Owning Your Base Theme”. Lets get some of the businessing out of the way first. We are Oomph! Oomph is a full-service digital firm assisting premium brands and media companies with WordPress and Drupal strategy, design, development, & migration. We have two locations, one in Boston and also here in Providence. Boston - 66 Long Wharf, Boston, MA 02110 Providence - 460 Harris Ave, Providence RI 02909 I am John Cionci a frontend developer at Oomph and have been with the company for just over 5 years. In a moment I will turn this over to Kathy Beck, she is another one of our frontend developers that has recently come aboard. As frontend developers we get tasked with a variety of items when we are creating our themes. typography, asset sizes, load times, screen resolutions, browser inconsistencies we need to figure out how all these things are repeated, how long they take, whats the best approach ( for this project or all the projects ) and oh yeah, figure it out within x time frame and under x budget... What Kathy is going to walkthrough is what we decided to do in order to try to minimize and streamline these issues, at the same time how it benefits the company that you may work for, or own. Kathy... Kathy Thanks John Thank you all for making it out to Providence on this rainy day and have decided to learn about “Owning your Base Theme” John has been the driving force behind creating a Base Theme here at Oomph, so I’ll let him relax and I’ll do most of the talking until someone has a question, that John has an answer too. OK. -- On to “Owning your Base Theme”..
- #4 Why create something from scratch? Your theme will have exactly what you want in it - you get to choose your file structure, build-tools and frameworks Other themes have extra features - zen: zen-grids, omega: grunt, bower, ruby version manager, bundler If you build a theme from scratch “you know it like the back of your hand” - no questioning what something does or where code is When you use a Base Theme - Your code has the same starting point, your sites all have the same foundation.
- #5 We know there are internal company obstacles when creating a Base Theme, but we feel that having one is worth it in the long run You might hear “Why reinvent the wheel?” - A co-worker of ours says “If we didn’t reinvent the wheel, we’d still be rolling around on stone wheels” Devs are used to working in a certain theme PMs are afraid of not being able to add features or give the client what they want Designer don’t want to be boxed into a certain design layout Creating a Base Theme is usually non-billable - It takes time -- Planning, Building, Maintaining, and Educating Team You want your team to be invested in this endeavor - You want them to care about your Base Theme - keeping it clean and making it better
- #6 We want to work smarter not harder When your company has a process - you try to be more efficient through every phase of that process - a Base Theme was an obvious step for our front-end team When everyone is using the same code structure and build tools - your team will be seeing the same code structure over and over again. Their knowledge of that code will increase with each project And with having a Base Theme - it doesn’t take as long for team members to dig in to the code and find what they are looking for - function or css change
- #7 Holding your team accountable to sticking to your company’s process, it’s a part of your process for a reason Keep your CSS clean - if you’re using a preprocessor break your css files out into smaller files - variables, configuration, homepage, products - use mixins and placeholders whenever possible Providing clear documentation and comments is one of the kindest thing you can do for your team - when you are provided the summary of code, it makes it easier for you to find what you are looking for One way we are doing this at Oomph is by using “Signatures” within custom code - we add a comment above our code so our teammates know who to talk to in the future if changes are needed - saving time by not having to ask everyone if they worked on it Again we want to be working smarter, not harder
- #8 Your Base Theme takes you from start to finish Your client will “see” their site transform throughout the phases of your process - they see what they are getting from the very beginning When you have a Base Theme it’s like you’re starting at 20-30%, rather than starting at square one or at -3% with another Base Theme, having to strip code out. Your Base Theme should have basic html structure and responsive layout already in place - it can have basic repeatable drupal styles such as “.sidebar . block” - but remember less can be more, you want your Base Theme to be simple and flexible This allows you to replace your traditional sitemap built in illustrator, Balsalmiq, or Axure - with an interactive sitemap that your clients can click through and rearrange pages on the fly This Base Site can then become your responsive wireframe - showing your client how features function and how their content will flow at different screen sizes - allowing you to get feedback on functionality earlier in the process
- #9 When you create your Base Theme you’ll have to decide what tools you’ll be using At Oomph we’ve used Foundation and Bootstrap, but we’re thinking of making the switch over to Susy, because of less overhead and more customization - But you can use whatever framework that works for your company’s process - Bootstrap, 960grid, Foundation, or Susy You might also want to include a build-tool such as Gulp or Grunt - to help with creating sprites, doing font-unit conversions, adding browser prefixes, and compiling your css files - Again we want to work smarter not harder So using a preprocessors like Sass or Less - can allow you to create modular css that can be used on other sites There are a lot of tools out there, as a team you’ll need to figure out what works best for your process
- #10 The Drupal community has given a lot to us, it’s nice to give back when we can It doesn’t have to be on Drupal.org - you can have your Base Theme on GitHub or another code sharing community There are a lot of smart people out there - you can get feedback from people using your theme Having a Base Theme can show off your company’s skills - and gets your name out there And a developer who uses your Base Theme could become a potential employee - they would already know the base code to all your sites, giving them a heads start and saving you training and education time
- #11 Enabling Base Theme Show organization of files Show modular sass Show signature in custom code