 We'll ask the session of congratulations. Hopefully we'll end this on a high note. So my name is John Ferris, and this is Garrett Dawson. We're front-end developers. I've been doing design web development for quite a while. I've been working with Pixel Pattons based in Denver, Colorado. I also have an office in Rochester, New York. Yeah, like Garrett said, we're doing work with all across the world. A lot of journalism, education, sites, and health organizations. What we're going to talk to you today about is custom tailored themes. Not necessarily a custom theme for a specific project, though my favorite project has one of those, but more about the tools that you use to start a project with. So in Drupal, there's Drupal sites coming in all different shapes and sizes, as do the teams that build those sites. So your team might be, I don't know, a dozen people. You might have the designer, information architect, content strategist, sysadmin, back-end developer, front-end developer. Or you might just be one person sitting in a basement doing the work at 10 people. But to say to this presentation, we'll call you a team. So what we hope to do today is just encourage you to evaluate your team, the site you build, the way you work, and then tailor a custom deeming process to that that will hopefully improve your efficiency as you work. So it's kind of important, I think, to first define our problem domain as front-end developers. So typically, as a front-end developer, things like complex systems like Drupal have a process function in front of a developer in Drupal because it's often the team where we try to insert the most influence. So teamers, we go out and hang out with each other and kind of discuss different approaches to CSS and Java scripts. And something that comes up just will ask you. They'll answer that question quite a few different times. Your answer to that question should be based upon a lot of different factors. A base theme in Drupal's got to make a lot of assumptions about your process and your workflow. So basically, the base theme that you use tailored to your process, like what's your starting point. We think that you probably know yourself better than any other super awesome, this great place for affecting CSS and JavaScript in the most complete way. It's probably like the kind of questions you want to ask yourself. We've listed a few here, but one would be what type of projects you're building. Are you working in the journalism sites? Is it like a learning platform? Do you go to commerce sites or the retail? Does your company focus on just real estate sites? Or are you working on one site and just iterating on that one site over an hour? Reach out to a lot of other front end developers and have some discussions with them about how they choose to create their theme stack or their front end tooling. That's exemplary examples, the exemplary examples that you get. So, talk a little bit about Stanford University. Has anyone heard of Open Framework? We had a chance to talk with, so Stanford University has a team within Stanford IT services called Stanford Web Services. And Stanford Web Services provides services kind of at a discounted rate to different departments, Stanford-related organizations. But as one of their services they have, called Stanford Sites. Stanford Sites is basically, you can kind of think of it I guess as sort of a Drupal garden specific for Stanford. Basically, it gives a free site to any students or faculty or departments that's a Drupal site. So basically, Stanford Web Services is seven staff members but they're managing over 900 sites right now. I'll maintain on the same code base. So that itself presents a lot of challenges, a lot of issues dealing with security, people can spend up a free site but they can't add any custom code to it. So to handle that on the theme end, they built what's called Open Framework. Open Framework is a series, a set of themes in which people can build their sites. So Open Framework itself is a base theme kind of the bottom layer base theme. It's based on Twitter Bootstrap. It basically provides just some of the basic functionality that one would need to work within the Stanford Sites. A lot of layout features, which is kind of the big selling point of that. And on top of that they have another base theme called Stanford Framework. And essentially what that's doing is just adding the Stanford branding on top of Open Framework. On top of that they have additional themes to choose from. I think they have three right now. And those just add some additional kind of customizations to the theme itself or to the Stanford Framework. So it's still branded Stanford. It follows their strict branding guidelines but it's adjusted to get people a little bit of variety. So we're not just like plugging this Open Framework or anything. We're really talking about someone had a really specific need. They know their issues and their problems, their challenges, better than anybody. And rather than rely on a system for their needs, a number of sites successfully with this code base. So another company where we had an opportunity to speak with front-end developer is CalMooner. These guys are doing that. So basically, Anakali is a distribution that's based all around panels. It adds some layouts and a lot of that baked-in functionality that if you were gonna build sites or distributions with panels, it's got a lot of that set up. So CalMooner has kind of chosen that as their, so they built, on top of Anakali, there's actually a hard dependency on it. You can't install a CalMooner CalMooner. And they've catered that specifically to one of the really interesting things that they're doing. So one of their challenges or their focus is that traditionally been a more back-end focus, Chuck. And I believe they're working to add in more design resources into their team. So for back-end developers that wanna focus on the actual functionality, they've also chosen to use Twitter Bootstrap, which turns out to work great for them because they don't need to concern themselves with CSS for the most part. Decided, and this is, I think, something that all of these organizations do all these front-end developers or just droolers do. They decide how they wanna work. They standardize it around it and they really empower themselves to continue. So, yeah, check out CalTeam. I think it's pretty interesting and inspiring how they just, yeah, so, if you're not familiar with Examiner, it's a big-ass Drupal site. It's huge. They have, yeah, they go over 12 million nodes, and they're adding 7,000 to crowd-sourced, crowd-sourced is the right, user-driven news site. So, with a site that size, you can imagine that. And so, when I was there, which was a little over a year ago, we're front-end developers working on a single site. I'm not saying anything wrong, but it's no longer correct in general. So, yeah, they have a very specific workflow and, like, very strict code quality standards and code review process. On the theme side of that, a stack of themes, and the base one is a, Al Steppen, it's called Pure, and Pure is basically, we like to call it a utility theme. Like, it doesn't add any CSS or templates or any kind of overrides. Basically, utility theme is one that just and extends basic Drupal functionality. So, what Pure is doing is it helps facilitate that code organization by automatically include directories in your template.php file. So, you can spread out your template.php file. I don't think anyone does a lot of custom development within that, but you should probably know on a large site, that file is huge. So, what this allows is and to break out their .e files into separate folders. And the way that is organized is, you have basically a module or a custom module that's written for a certain feature, functionality, whatever. Then in the theme, there's a subfolder that's specific to that module that holds all the CSS, all the alter hooks, all the pre-process functions that are specific to that module. And that comes in really handy when you have those big sites and you're on a two week release cycle. You know, say, coded something like an alert for a special event that's going on. Once that alert is done and it sends out that module and disable it, then the femur can go in and just close down that and basically un-include that folder or that CSS gets pulled out. So, it's just a way of keeping up, basically keeping your CSS, your code clean. And if you want to know more about that, I mean, I'll step out of stuff and he's right there. He's done some pretty cool stuff with it and it'll blow your mind. Yeah, so they, again, like this is an instance where this front-end approach had to address really specific needs. They, you know, really tailored their systems so that they could solve it in the most efficient, and that's something that, you know, we thought that it's just, again, like we're trying to, as front-end developers, I assume like a lot of us in this room are front-end developers, we just want to exert as much influence on that code basically to do exactly what was the thing. The example of this is, this company called Coderigma, they have like a really interesting team that has like really strong design sense. We had the opportunity to speak with some guys over there as well, and this is, you know, again, we're like relying on what they told us and hopefully we'll make it. They told us that they have this approach where they like prototyping with HTML and CSS, you know, like so many people do, but a lot of us in Drupal don't do that often because then we're getting tons of effort within Drupal. So what they've chosen to do is use a panel-heavy approach, pretty much do away with the theme lighter altogether, at least in the sense that they're not using templates that really control their markup. They're taking like an additive approach to their, I don't know if this idea of like the depth of the theme. Yeah, so I don't know if you haven't seen this talk, it was given at Drupal Camp London this year, and I believe at the front-end United, but there's a link to the session video on YouTube. It's a very interesting approach. Essentially what they're doing is kind of facilitating traditional front-end developer that can code the HTML and CSS by hand, not necessarily having to worry about the way Drupal does it. And then as we pointed out earlier, the concept of the theme is front-end developer that needs to know all this other junk about Drupal just to make that stuff work. So this approach kind of eliminates that by allowing the front-end developer to focus on the CSS, focus on the HTML, and then they can use a site builder, you know, leveraging tools like panels, and Splace Weeks, panels everywhere, basically to craft that markup that's already been written on that CSS. And through the UI. Yeah, and they've really like a lot of these people, they just empower themselves to mess with that stuff the way that they would, is that that's the kind of thing. So one of the things that we can talk about today, probably the sort of set of systems that we use, internal team that works in a particular way, and we as a front-end team have, we're using SAS that we standardized around SAS, we built a theme that really leverages SAS and sort of gives us a good starting point. So we have sorts of clients that were always, you know, like we mentioned right at the beginning, we have a certain sort of project that we're typically doing, and we created this custom kickoff form, which I think is, why don't you just like roll that into your own sort of thing. So our theme stack works like this. We start out with this utility theme called center, which, yeah, so center is basically, again it does some template overrides, but it's facilitating the use of pre-process functions to add classes to various things. So there's certain things that templates and functions within Drupal Core, where you just can't get at a certain class without overriding things. So this basically, it's a little bit further starting point for us than just using start. We've also built in some various, you know, custom-like field theme functions and custom templates that we can then use theme book suggestions to add those to our projects. So that center, it's basically what it does. It strips out some CSS as well. And then on top of that, we have Carlos, one more, the starter theme, I guess, the prototype. My prototype isn't, I know, we don't wanna worry about having to update prototype once a site's launched. Like it's meant to be, you install it, give you a starting point, and it gets a lot like something like that. You know, we did publish it to d.o. so that you guys, someone else finds it useful, but I mean, really, we're like scratching our own edge. It came out of like self-evaluation. You know, we use display sweep to control our problem sets, and we have to adapt to that problem set. So we know, like, some themes in control, they do take into account like total workloads. I think, I've never really used some mega, but I think that's how mega works. You know, it's meant to be used a lot, but that's not typically the case. So there's like assumptions made, and made it to the wrong assumptions. So we know we use display sweep, we know that we use V-Mode. So that kind of like said ways to, if you're interested in empowering yourself to have more control, and exert more influence over your front end, you really need to evaluate yourself, your team. So get your measurements. You know, and when we say that, that's just like all these companies, all these front end developers, they expect to try to create something that's really easy to work with via the UI. Examiner is trying to create something that everything's like super isolated and like just transportable. Yeah, so basically when we say get your measurements, take a look at your team, you know, what are your strengths? Try to capitalize on those. What do you do like for us? We wanna write JavaScript, CSS, we wanna write CSS the way we want to. So, CERN enables us to, you know, get that power over classes and put classes where we want. You know, think about who's gonna be maintaining the site after you launch it. Support is one of our offerings and we end up maintaining the sites more often than not that we launch. And so we have that benefit of, you know, we know SaaS. We don't have to worry about who's maintaining it later if they can get in at its SaaS or install a region. Stanford has, you know, the people maintaining their sites are those site builders. You know, it's a graduate student who doesn't necessarily have or need to have, they've built it so that in case there's a student that does, they can just start with open framework and add CSS via, again, they can't have custom code so they use CSS and Jacker module, which, you know, a lot of us would probably frown on that in a normal situation, but that fills their goals as a team or the goals of your projects or your skill sets. You know, take the time to do that and then just start, you know, mostly start but I know raw stuff is getting, making this agnostic, start building and so that's what we do with prototype because we projects ourselves, so we, every time we kick it off, maybe we want to adjust them. I think that some of us maybe have this sense that if we're great decisions, but that's not always the case, like they're just, you know, they're front-of-developers too, so I think that let's just like dispel that know what we want and we should empower ourselves to do it. So the way we kind of handle those continuous improvement ideas is, you know, as we're working with the project, we're kicking off a site, we're getting in there and start hacking away on it and do much styles out of the box. Let's go back and strip that out. Doing the same thing that I just did on the last project. Let's add that in. So a lot of times we'll just put my cop over to the directory and, you know, do some commits and push that up and that's it. Other times we'll actually, you know, if you're in the middle of a project, you don't have time to switch work spaces so just log in to Google.org, you know, write a quick issue and then that way when we're starting the next project and we're kind of starting at that very base again, we'll take a little bit of time, put out some of those issues, you know, we don't always get to all of them, but just continually on your base and tune it, you know, if your workload's changing a bit, then adjust it to that. And what's to be gained from, you know, spending the time to actually, like, roll this theme? You become more efficient with that theme because you're super comfortable with it. Know where things are getting generated. You just go in there and so, yeah, to conclude, nobody knows you like you, so, you know, take stock of your situation and take stock of your skill set and basically get out there and start building stuff and reuse it. Frankenstein, something together. We're just really, we're talking about it like a custom front-end tool kit, so you really like something that you just wanna slam that in and in fact, the thing that's what a lot of people do, they end up sort of like giving yourself, positioning yourself to be as efficient as... Do you guys have responses to build a new center theme? So, part of what we have, a lot of responsiveness is, has a lot to do with layout and purposely not started with too much, too many layout assumptions. As far as SAS goes and we automatically include like where's... Is there a theme that you are getting that basic information from or is this something that you built out over time? Can you repeat that question? Yeah, I mean, is there a theme that you started from and then you kind of moved beyond or are you just kind of using it for these two games to build up the proper responses? I mean, this responsive design is just, you know, the only, so if I remember correctly, the only actual media queries and breakpoints that we have when we're starting prototype and scratch is just basic sidebar first and sidebar last. That positions those off to the side and then that's it because every design is different and that's something that if we assume too much with that and prototype, it's something we're gonna have to strip out and override ends up creating more work. So the idea is just to put those tools in their place so we can just get in and use them over ready. Great, so you've got your nested divs and there's a million classes on stuff and you know, with all this logic, or CSS and stuff like that, and finding we wanna bring in all our classes and so on and so forth. What is the line where you do a lot of processing stuff? How much of do you want me to change or leave a lot of rules like that? How much do we change? Yeah, are you changing this new module? We can't really think. Yeah, that was the point that we didn't really touch upon fully when we were talking about center of prototype, but we know that we use this certain module kit to, and so we can anticipate that with our base and create team function override that we know. I think one that we have just right at the top of our template file is something that would be necessarily a good thing to abstract out, or I guess I wanted to get to expect that from contrib because then there's such assumptions being made about modules, which we do that because we can make that decision. I would say that as far as find something when we deal with what's there, it really comes down to as possible, but there's some things that we do try to get to your disk type totally. It sounds like some of the people we spoke with, that's definitely what they're trying, as strictly, you think it's less presentationally, more just like because it's an awesome system and it offers us so many things, but sometimes we feel like a little... We've tried several different techniques for putting together the front end, and one thing we found, like with Omega, for example, we were using it for a while, but we found just it would include all sorts of extra CSS and JavaScript, and same with other methods, and so what we're doing these days is we're going with a custom theme and we're literally stripping out everything as far as CSS and JavaScript and Drupal, and only including the stuff we want, and we get a huge performance boost, but what my question is, have you guys considered doing that approach, and if so, why not? Have you not implemented that in your solution? That's definitely a dream for us, like as far as the CSS goes, we are stripping out most of core CSS. We leave some of the stuff in there, and we've copied over system.css and converted it to SAS and stripped out the stuff that we don't need, and then we usually use something like 7 as an admin theme, or a lot of that CSS is really needed, and so it'll get included when it needs to. As far as JavaScript goes, that's definitely something we want to do. It's something that Garrett's been working on. We're not there yet as far as including it. That's a little harder to do, because JavaScript has a lot of fun as far as like. I think that also comes down to the resources for someone to manage all those JavaScript dependencies on every side. If you look at that dev of a theme or video there. Thank you. You said you are doing that? Yes, and part of it is basically like we, the only JavaScript we're including is the contextual links, so that like I've got it blocks on the page, and we've basically decided anywhere we're gonna use Ajax is gonna be custom. It's not gonna be the triple size. Come on, and maybe it's a pipe dream. We haven't totally used it and a lot of our, it's pretty new for us, and so we're still kind of learning, but we've just found that it's been a lot easier. We don't have some weird CSS specifically in there that stuff. We're doing it to fix some of the other CSS that's been included somewhere else. So we're not sure that it was doing something in certain ways, but we found a cleaner solution in that way, but I'm not sure if it's the best for it, but that's kind of what we're at right now, so, cool. Thank you. I'm about to sound really ignorant because I am a public section, I don't know. I started building a triple size from scratch by downloading the Acquia bundle. This is kind of like sets you up with the fundamentals and it seemed really great and awesome and then the people I was working for wanted to use this blog press theme. It presented like a bunch of limitations and stuff. So I was wondering about the Upsility theme that you guys were talking about. Did you do that through downloading the Acquia bundle and then just adding modules and customizing it? Yeah, that's all custom. All custom. Yeah, the peer theme is, if you look at Examiner, I was there for three months before I ever saw a triple admin in the face. Everything they do is in code. There's no written by scratch. And that's, again, comes down to what are your resources and who's on your team and got a whole team of developers that can focus and maintain that code. Cool, thank you. I just want to say that I've just been on Zen for many years and then I just started to adopt this theme and then I just said, you know, let's just go ahead and do this. I'm tired of writing tabs and I'm tired of adding pagination and all that kind of stuff. This is really inefficient, but you can clean all the CSS only to overwrite it and then something sneaks through, like, gonna be the graphics on the on-a-word list and all that kind of stuff. So I recently did this and I'm so much happier for it because I know now it's giving me a new level of understanding of the theme. I know exactly where everything is and it's a lot simpler than it sounds. So I definitely copy over and start playing with it. One of the first things I did was un-set a ton of the core CSS files until it's sort of hurting like system.css. I hadn't set that. And to hear you say, oh, well, copy it over, keep what you need, where did this ask? Like, there's, of course, like when you're creating a base theme from scratch, there's definitely a tone. So how this affects the contribute space? I guess that's my question. Some of your, some of the people you talked to who looked like, had posted code Andrew Guleta where it faces. I'm wondering, is it really, like, what is the reason for contributing it back? Yeah, like, is it really practicable for other people? Like, if everyone's creating base themes for their specific needs, it creates, like, an exchange of helpers to be talking to, sharing with each other, not re-useful code, but re-useable ideas. Re-useful code, and, I mean, that's where I can, like, especially popular ones, started because they weren't happy with what was already out there. Create this specific year process. There's probably others out there that have a very similar process and can use it. That's another good reason for, like we talked about pure, you know, came out of a specific need. So, in most cases, somebody has a single base theme and then a custom theme for that project. But you can, like we saw, with Stanford, they actually have specific, as modular as modules. Those have been sandbox projects that we've been told about. So, figured actually, like I said, we've been working on, you know, internally and iterating on it. Sandbox project isn't as successful, but to answer your question, yes, there will be releases. We just haven't set that up yet. If you can, let us know, we'll start a session, if you'd like to do things. It's basically the, you can just go to our session page, there'll be a link.