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
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...
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”..
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.
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
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
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
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
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
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
Enabling Base Theme
Show organization of files
Show modular sass
Show signature in custom code