 Welcome everyone, oh It's working cool. My name is Rasmus count and I'll be presenting a bulletproof approach to theming Can you hear me everyone go As I said, my name is Rasmus, I'm a front-end developer. I work at the the wonderful company of pipes in Copenhagen We're a Drupal company and we do design development and content strategy and all sort of Drupal related stuff Yeah, so Yeah, and some of our biggest clients. Well, we work mainly with large media sites getting avian media sites and organizations so well That was me enough about me How do we define ourselves as steamers? How many here defines themselves as steamers sure have Joven and how many here are developers Wow, I did not expect that. Okay, cool. So are there any designers present? Cool and do any of you consider yourself as both a developer designer and a themeer Quite a few actually that's quite good. So My goals for this talk is to give you a set of tools and a workflow that can help Help decrease the amount of time you need to get a functional theme up and running And There's not going to be any silver bullets. I'm not going to present in this magical function. Sadly I've looked everywhere in the API and it's nowhere to be found and I guess if I someday found it It would just be a basic implementation of die, but yeah anyway so But we have no sort magical function What we do have is a set of a set of tools and we have a proper foundation and it's if we make sure to have Have if we prepare well and and make sure that we have the right foundation We are going to be setting ourselves up for for success and and we'll be able to reach our goal faster Does anybody know this particular case or scenario And bad timing and the indifferent back-end developer with little to no interest in presentation of markup I Know I've met this developer out of my present company, of course all my colleagues are nice guys and they understand me But sometimes you'll you'll come across the situation you'll be thrown into a project at a particular unfortunate moment and There's little you can do about that. That's that's not something you can influence but what you can influence is is stuff like clean code foundation and design and You know this this situation would be or this scenario would be okay, too. If If you had the chance to to do at least Regular code reviews in cooperation with the back-end developer because you know More often than not this back-end developer. He has interest in presentation and markup He cares about the final site and the final product. He is supposed to deliver. We all do We are all building the same product and the same side and if any part of the site suffers or lacks It reflects badly on the entire team and so of course he he's interested in this But it doesn't have the time nor should he be focusing on these Certain issues And But you know the fact in the matter is we have modules like views and we have modules like panels all these modules are Presentational modules to the least some extent and and therefore it requires at least Sometimes that they are being configured by a back-end developer and if this back-end developer doesn't have the time to to dive in the presentation or markup the views are probably going to be configured Wrongly and you will have to as a theme or when you enter the project you will have to go in and redo a lot of these configurations so Sorry So how do we deal with these scenarios? First let me say these scenarios. There will never be ideal For these scenarios to be ideal a theme or should be involved from the beginning and mainly because Themers has to know how the designer and the front and the back-end developer requires and And I know the previous session web systems. They touched about this a lot as well And it's all about identifying the standard elements and what Drupal requires from the beginning So the basic as a question you should let your theme or ask and you should let them ask the back-end developer Is does the output match the intended design? and this simple question it helps clear a lot of misunderstanding and In the end it doesn't require a lot It's it requires maybe a regular meetings one meeting per week or every other or every other day It doesn't require a lot But it's a simple question and they can help clear a lot of these misunderstandings and as such you help avoid these constant views configurations and and changes to these And in the end we all know this how many here uses the module features Well and we all know that if If we export a view to these features it is it's nice and we help ensure some some matter of consistency among the development platforms and and and decide we deploy to But if you have to change Let's say just a basic field in a view have to remove a label you'll have to You'll have to recommit this feature file again, and you'll have to commit it and you'll have to revert the components on on the side itself And that takes a lot of time easy. You'll have 10 minutes go by by this and and it's not It's not the best of situations But what what we need to do and also what we can focus on as theme is It's communication and particularly the communication from us to our team members Is both the communication to the back end developer or the developer? You're supposed to be receiving code from and the designer you have a unique knowledge of how tuple works What people requires from as is as you know is out of the box And it's it's your job to share this information. So how do we improve communication? Well A lot can go wrong when we start these projects and Often we work on large sites triple is a it's a multi-site platform and as such The sites can grow very large and also the themes can grow very large and there can be a huge amount of modules And that also requires a huge amount of communication between team members and as such Every time you have to communicate with a team member there is a slight chance that something might go wrong doing this exchange And if we focus on these exchanges, we might have a chance to improve the overall communication So basically focus how focus on how you can make a difference from your point of view It's easy to pitch and moan about The situation we're in but ultimately it's our own Responsibility to make sure that we can communicate the requirements we work with also if Your project manager out there any project managers out there my boss is Okay, and a few others and that's great Ensure that's a really simple rule ensure consistent communication and regular meetings with output and code reviews between your back and developer and your and your theme So but as a lot of you are designers How many here knows about style guides knows what a style guide is Cool, a lot of you do I'm a style guide. Well, if you ask Wikipedia a style guide is basically a style guide or style manual is a set of standards for the writing and design of documents The implementation of a style guide provides uniformity in style and formatting of a document Simple and straightforward. So basically a style guide is a document describing a set of visual standards A style guide could be description of logo usage. It could be color schemes and how to use colors It could be typography it could be grids and so on and previously Styleguides that has mainly been used for brand guidelines. It has been used to ensure the proper use of a company's logo across different platforms and on different kind of media and But there is also a valid use for it in Drupal and as and for us as steamers and one of the best style guides I've come across During my little research Around the internet is the Skype brand style guide It's it's a great style guide. It's it shows Very well how to use their illustrations and and their logo and and generally how to communicate in all of their material And sadly, I don't have the link. I forgot to add it But I'll make sure to add the link on the slides when I upload them after the session And so one clear benefit of styleguides is that it ensures consistent usage of deliverables It ensures there's not insurance, but it helps clear the amount of misunderstanding that might appear between team members or also for for instance that if Let's say your website should be have a module added by an external developer. You will have a have a designer Or a theme or whatever and you will have a better chance of using what he he has in front of him So how could we use styleguides in a Drupal environment? well Print has this very huge advantage and print has a clearly defined visual canvas and it's an unfair advantage for some at least me And but you know in Drupal we have something similar something similar And the previous session again mentioned this And it's it's about the content framework that Drupal provides this content framework It's about the presentation of content and as such it provides a clear canvas Here to use so The typical workflow with with a style guide It depends on the website it depends on how large the website is And as I mentioned most of the website we work on at least in my experience are fairly large websites and fairly complex web websites So that's that justifies a certain amount of detail you put into this style guide Usually before I I start theming. I I sit down with a with a with a kickoff meeting With the external designer and often this is external designer But also we'll if we're lucky enough that we it's one of our in-house designers or if it must if it's myself They already know this stuff, but if it's an external designer I find it highly valuable to just sit down and just supply him or her With a list of common items like typography lists from elements and so on and when you're sitting in When you're already sitting down with this designer And I suggest you also pinpoint common design elements like content boxes panels lists and views together Because basically these are these are often common elements and they appear on a lot of different pages on the website And as such they could be they could benefit from being included in such a style guide So specifically what should be including is If you see yeah typography It's a grids and baseline And it's important that you get a proper grid and baseline defined because you can use it for for instance JavaScript overlays And it can help you build the website in your browser And it helps ensure the correct usage of grids and and so on Also lists which in our case is views most oftenly also form elements and Form elements it can be a complex thing We have different design patterns. We have out to complete and stuff like this but it's all elements that we are more likely than more likely than not to To to come across when we theme our websites at least at some point point in this size life cycle So we might as well add them as well But also there's button use of colored color navigation and links and here I'm also talking about tabs and stuff like that Images and the usage of images and text on me and teaser lists. It's also important that the webs that the The designer defined markings and white space different states. I can't tell you how many time I've received a design from a designer and There's a lot of links on the page and that's all very well But we still need the the hover states and the focus states and so on and that goes for the form elements as well, of course So that's a general thing Here you see an example of a typography page in a style guy This is from our own upcoming website Pies I say upcoming because we've been working on it for some time where we can't seem to find the right amount of time to finish it But it's coming I promise And as you see here The headlines are defined. We have defined a deck or a teaser field and Specifics submitted by and category tags and general body body styles Also another example, it's from the great belt website Basically, we build a website for a bridge It was actually more complex than you can imagine, but that's a different story and here we We we pinpointed a table Tables are a common thing in Drupal as well We might as well pinpoint that and include them in the style guide also paging Dropdown and different form elements also messages and you see the tabs and the field set There's just some examples, but they are all examples that could benefit from being included in such a style guide Also another clear benefit of this is that when When you make sure that you all you have all these elements receive all these elements from the designer You enable yourself to to build these sites in the browser or as you go along and you You decrease the amount of the need for specific page design from the designer and and basically we don't need Specific page design from the designer. We don't want that because it constricts us and it Well at least from my point of view it makes my job boring. I hate doing that But if we're supposed to be working like that that that requires a certain amount of information architecture or wireframes At PyTecU we use Information architecture quite extensively actually and a lot of the time we put into a site We we focus a lot on the information architecture And it's a process We have one guy who who mainly works on this and make sure that it gets done But it's a process that involves the entire team And he's sitting there by the way. He's He helps ensure That the entire team is is being included and heard and it's important It's important that you make sure every team member is heard because they have Each team member have a certain amount of knowledge and experience that it can bring to the To this information architecture or this wireframe and it is important that we include this I'm not going to be talking a lot about information architecture or wireframes because it's not my area of expertise But I I want to just briefly mention it because it's an important aspect of it as well And it doesn't have to be overly complex As you can see this is an oversimplified example of an of a wireframe But just so you get an idea of what I'm talking about here If you make a simple wireframe and supply it with a with a list of output code And with a list of output. I mean a list of the different fields in a page You'll be setting yourself up In a better way and make sure and ensure that you can put a lot of these pages together in the browser so Yeah, okay, and I missed a slide here if the product project wanted you should keep a list of intended output for each page And again if the is the site is fairly small that might not justify this approach, but For the larger sizes. I think this is a good idea Because it provides a point of reference for the back-end developer So again if he's ever in the position where he has to set up a view a configure a view You'll have a central place where you can look up what this view is supposed to look like of the output And it makes those meetings a lot easier And So the benefit of all this is the replacement of page design in Photoshop with the design of content systems in Drupal and I when I when This process it doesn't necessarily have to take a lot a lot of time And it also clears up a lot of times with the designer because he doesn't have to redesign each page again in Photoshop But when all this is done I tend to a Move on to theming and I usually try and build a boilerplate a standard theme for the for the entire website and It seems like a no-brainer, but often I am I'm I arrive in projects where The theme has already been partly built by the back-end developer and as such it's very It's very easy to just slide in there and start theming on top of this theme So it would look like but in reality you're setting yourself up for failure because there's a lot of Elements in this theme that you do you you don't know about it. There's simply a lot of Outcomes that you couldn't have foreseen so just connect yourself from that theme and make sure you theme a standard Drupal theme And by standard Drupal theme, I mean Drupal out of the box It's a fairly simple thing and might seem like common sense, but More often than not I come across sites where this hasn't been done And also it is a sort of it provides a sort of documentation You will always have as the theme as a point of reference for the future So remember create a style guide keep using and maintaining it and make sure the site has a strong well-defined information architecture and help maintain it If you're providing a client with a theme for Drupal you should make sure it works on even the most basic Drupal installation simple I know but also sorry when you When you use this standard theme Build the standard theme it makes it easier for you to build on top of the modular nature nature of Drupal Drupal is a modular architecture and as such it's easier to latch on top of it and exploit it and as by modular nature, I mean You know the modules it's sort of like an object-oriented approach, but a lot of a lot of sites builds specific modules for user stories and these user stories are Are basically you know, it could be a blog or whatever But it's still a specific use case and as such you could you might as well hide all your theme files and your template files as Etc in this module and it will have this clear benefit that when Someday down the line the client doesn't need this blog module anymore They can just turn it off and the code disappears and as such as such You don't have to scour through the entire theme to find old redundant code And that's a good thing. It's a simple thing but still worth remembering so code structure again, this is simple but I'm not going to you know do a marix sort tag and starts making you know a theming nightmare Maric had a nice session in at the design camp Berlin Where he went over a site he had received from I think India or some other country And basically I think it had some something around 500 templates for fields and views and whatnot and they were all in the same in the same folder basically in basically in the team folder and Yeah, it's a bit of a nightmare and it can't be avoided by by you know simple things divide templates into folders like views panels notes, etc It's a simple thing, but it helps maintain the overview of the entire theme And yes code structure Again, I touch about this brief briefly But if and I'd like to mention it again but if you if you move a lot of your themes CSS and Styling and you use the new naming convention from double seven and by new naming conventions Conventions, I mean something like system.base.css if you use them and and put them in your in your module You're going to be doing yourself a huge favor Also, it makes it easier to override the CSS at another point in time, which is a good thing So yeah Yes, I don't know if you ever felt the same way, but but sometimes Our job gets a bit it gets like a routine It feels like a job and most of us does this because it's supposed to feel like a hobby We love what we're doing and we love coding. We like designing and we like we like we like theming and But about a year ago and I Suddenly I felt tired about front-end design. I felt tired of cutting out images and putting them in my style sheets and everything was just sort of repetitious repetitious and I did it over and over again and it was just a routine and I started to start feeling like a job, but then I attended the conference called future web design in New York as a way of kick-starting myself And there I fell into talk with a lot of my like-minded individuals and then made me realize that Instead of being afraid to use things like CSS 3 and HTML 5 How many here uses CSS 3 and HTML 5 actively? That's a lot of you actually And I didn't at the time I was I was scared of using it. I was scared of what the client might might say might react to it But So I went to New York and I just in New York. I decided I should just go back and you start using it on a client project and This is the thing. I had to use it on a client project without asking for permission And it was a bit risky. I know but Such as life and and we went on with it. So we started implementing HTML 5 video Border radius and all these lovely new properties from CSS 3 and and and it was great It was funny and it gave us a new sense of flexible code And it was really it was really great Then the meeting came with with the client and and I dreaded this meeting with the client but what happened what had happened in the meantime was that iOS Android and General mobile usage of their sites It had sort We were talking about it was suddenly something about 10% and in the past. They have always been quite in They've always been reluctant to go this path and and start supporting all these new new properties But this new reality they were facing it required Some amount of use of CSS 3 and HTML 5 and at the current the current site couldn't They at with the current site they couldn't play HTML 5 video on an iPad for instance and We have just implemented HTML 5 video So we can just look at them and say but we already did that So basically we have already optimized their side for these new platforms and they were late it they loved this and And and as such because of this the conversation never touched upon things like progressive enhancement and all of these techniques you can use to To start using these new techniques The client just accepted it. It was just a fact of life. So I I Recommend that you just jump into it. I know it's a bit of a risk Just do it. Just start using it. Your life will be better for it There's some clear benefits of using CSS 3 and HTML 5 Specifically CSS 3 it's fast It keeps the code flexible and there's less need for cutting out graphics and Photoshop Cutting out graphics is repetitious. We hate doing it. At least I do And it also makes Makes the less this side less flexible Also, it leaves more room for prototyping and an iterative approach. That's it's not sensible to start prototyping and just Build a page as a test or small application in Drupal when you have to cut out or do the design first and cut out all the graphics and all that when you can just start using it in the browser, maybe have a A Small example of what it could look like and you could start as a steamer and start building it in the browser It keeps it more flexible And it has has an a more it makes iterations more More easy So adaption and needs of use And there's some amount of hurdles And there's a lot of new problems when you start using CSS 3 and HTML 5 one of these are vendor prefixes I don't if you've started using CSS 3 you have come across this problem it's a the extensive use of when the prefix is all over your style sheets and very easily your style sheets becomes very messy and and Generally, they they become Yeah, it becomes it becomes hard to gain a complete overview and and that's where CSS preprocessors come in Do any of you know CSS pre-sort processors? I know we've been touched upon it several times during the conference So, okay a few of you do I've mainly used less myself And and CSS preprocessors they are mainly an extension to CSS they help provide CSS with new capabilities like variables Mixings for instance Functions nesting and so on This is an example of a variable in less. Can you see this? Is this okay? Cool Basically, you just define your variable and you start using it Here's a color rule and you define you use your variable and it instantly inserts the color It's very neat, but also this is my favorite Mixings Which is basically, you know, it's like variables with classes You define your class and your parameters that you can pass by reference And as such you can start using it in your rules throughout the style sheets by you know Are the using the the class itself and adding that to to to the rule or the class itself with a new parameter So for instance, if you add it around the corners That's 10 pixels it will automatically Start using 10 pixels on all the corners And you can also do this for border ideas left and all that sort of thing and it's very neat and and it helps avoid clutter and you can and You can define your rules once and you can start using throughout your style sheets There is a small caveat though You have to include these less style sheets and on top of every style sheet in your dribble theme And but it's a small import rule and and it's no big deal really and there's also nested rules Which I never use it personally. I think the main reason for it or the main Justification for its existence is that it makes the the CSS more easily easily readable But I love CSS. I love the way CSS looks and and I love to use CSS so For me it doesn't make that much sense, but Maybe it does for you. I don't know There's also functions Again, I think this is a bit crazy I haven't I haven't personally had a real use case for it still but Some might have it. I don't know. I've actually come I'm actually considering doing a fork on on less and removing all these capabilities just so and Overseal is back in developer doesn't start using them in in their CSS files at some point It hasn't happened yet, but it's bound to at some time at some point And and is there a model for this? Yes Both SAS SAS I Haven't really used SAS, but it's it's very similar to less in in the way You use it and how you use variables and and it has the same capabilities It has the advantage of being included in the CSS framework called Compass and that's an advantage for some but I don't use that so it's it's irrelevant also Less has this neat little module and it's a great little module You just you turn it on and you add the extension dot less to all your CSS files And then it's just instantly compiles them and and it just works and it works with the CSS aggregation as well When you compromise your CSS files, which is a neat thing as well So, yeah final note Organizing your theme and and and your whole approach to this it goes a long way and And Really, but it what it all comes comes down to it just come and sense a lot of these these things but if you make sure you're prepared and And build your theme the proper way you're going to reach your goal faster. So and also The singular most important thing that you can do is take upon yourself to communicate the constraints and possibilities of Drupal It can be to the back and developer it can be to the designer or whatever but as such instead of just bitching and moaning as a wise guy what's called it you can take it upon yourself to communicate these these constraints and and also One of the main reasons a lot of deadlines tend to tend to When you don't meet deadlines, it's it can be for because of themers and developers who aren't involved in the project and As such I came across a great quote from the designer Andy Rutledge He says your designers should be running their own projects Do not place some non-designer in between them and their client You have a responsibility should shepherd your designers to our consummate professionalism to do otherwise is to cripple their professional development Perhaps permanently. I think this this rings true for themers as well developers Push them together and let them know they have this responsibility to communicate the constraints and the possibilities of Drupal because the project manager Justin has has this has this overview So but also push them towards the client because it will help gain a certain amount of responsibility and And it's my experience that you work that much harder if you know what's at stake. So Basically, that was it. Thank you It was a bit short and I was I've been told that the bus is leaving out from out front So you can go out there here at 4 p.m. Also to have any questions cool I have one sir Constraints. Well, it's fairly easy starting using HTML5. You can just change the duct type, but yeah soft constraints it's actually easier than then it sort of look like because you can you can go all the way in and start use all the HTML5 elements and all the semantics But it might not make sense for you And you can also just implement HTML5 videos and you can make it a graduate gradual thing And just do it as you go along But just by take and I'm not kidding just by changing the duct type you change a lot of things So there really were no constraints for us at least There are is the constraints about you know older browsers like i7 and i6 and images and specifically gradients We I love the use of CSS gradients, but you know, it's not really widely adapted yet so if if you have to Cut out these images and you have to implement images you can just do it in the end So we just we just cut out hold it all this Nonsense malarkey or whatever Britain you British guy people call it and stop focusing on it and and That action alone helped remove a lot of these constraints for us So Anyone else? You one more time Yeah, it's cash. It's cashed. Yeah And and no That's the great thing about it. It just works and and there is no drawbacks about it The only drawback about using less is that you have to include it on each of your CSS files and when I first started using this and I Couldn't understand why it didn't work. I thought I could just you know have this as a CSS file And it will automatically be included in my info file and it would just work magically, but it didn't so that's small constraint small include What Sorry Yeah, it's about the whole workflow. I define all my border radius and stuff like that I didn't find them in a single file and add them in for example a less folder in my CSS folder And I import them at the top of my CSS files where I'm supposed to be using border radius or the functions or whatever So you just you just define them at on the top and it just works so any other Okay, I did not know that so The the it's he said it's worth noting that less creates the file separately from yeah It creates less optimized file in a separate area from the other CSS files and yes, I hadn't really realized that so but yeah It's worth noting because it adds to the amount of CSS you have to download on each page Yeah So it was not so much a question as a recommendation. It's the lady She recommends that we use the less app instead of using the module because if we add a Wrong declared less declaration. It breaks the entire site And that's true really Personally for me that workflow didn't work for me, but I Know about the less app and it's a great app. You can also use it from the command line if I'm not mistaken. Yeah And that that's neat as well and that might fit the developer types in here a Bit better than using an app. I'd prefer the app, but but yeah Thank you anyone else So, thank you. That's it also Small little thing. I've been asked to give a little shout out to the front-end United Camp in Netherlands in 2012 from Jesper and he helps organize this thing And if you want you can get these neat little cards up here And they're free and you can take as much as you want and give them out and that's so so thank you