 you can actually see, there you go. I have power like this and love it. All right, so I'm being recorded. I'll try and keep the custom to the minimum, but I do speak Canadian, so here are some friends it's being, but I'm gonna start with a little bit of context on who I am, who's at my session, for good reason, but to find out later, there are ninjas, unicorns, and firemen in this presentation. And the slides are up on this history, a general sort of information that I want you to get this, is that I've been around for a very long time. What active in the community for the most part over the years are less than $5,000. And so what I've done is basically taken my large-scale government experience, small businesses into getting on the web, based on all of those websites, I would say basically got really bored of building really tiny websites and I've entertained myself in other ways. Because I won't make you a parent, you can make your base thoughts. To write workbooks, write down the magical code now, or at the end of this six websites that we've built so far, it's about $40 a month for this program, registration is not, I build you a website and give you the complete, and again, these are the criteria which models to turn us to the reality of the space that I work in as of today. These are also the very last slide of the presentation that I want to answer in questions, so that will all come back. This is associated plugins that I do as for businesses and not for profit organizations that I think are doing really slight builders who are a lot of what I'm talking about. How many people are in the absolute beginner session and they're getting millions of paid people? But two people is because of the way Drupal treats me, the logical file, higher neighborhood with all of the editing that you need to do on all of the template files and then realizing that the module, the template that you've got doesn't actually add very quickly. Presentation is not about the following things. This is where confusion can sometimes set in because people think, okay, so I'm gonna go back because I wanna learn. Some people say it's not about all of these kinds of things. And if you want this level of information, these are the advanced themes. Also go backwards in time and listen to me. I've already taken the last one, but go to study Smith's writing on your editing section. And by this issue of dotnet editing stand here, so this one has an article by Steve Fisher and another one by Jen Simmons that are Drupal-specific. Great language in general, but this issue specifically is this. So you can't have a lot with that school and paper. I'm gonna change so you take me picture now, you good? Meaning is not about the best practice, it's about how to actually take a look at your theme once it's a Drupal website, to figure out how to change that one thing over in the corner without having to set your entire website on fire. Basically, four things that we're going to go through, two in a very weird way. Then we're going to look at, should I happen to have any time we will do three out of four of my demos never worked, but let's try it. Well, yeah, I won't tell you why we're not gonna do this work, let's see it. So that's basically what we're gonna cover. Again, this is not what you're expecting, I won't be insulted, but I like getting you the good session review, so you know, just push off if you're not gonna get me a good session review because you want some kind of things that I won't be talking about. There we go, the crime. In my experience, working with Drupal Markup can be a bit of a crime in the sense of this is the point that you're working with. I'm trying to decipher exactly what happened and who did what and why all of this nonsense is appearing on your page or thinking about how these things came together. And I've taken it a couple of times saying I won't be shot in public, but I do really like to be able to touch the code. So if you happen to be able to read some of the line numbers, give you a lot of clues about what kind of page you're looking at and therefore which modules may be responsible. So without even having to use how this Drupal page is being constructed, if you actually want to manipulate the dot thing, dot there. But it's looking at the rendered page, not going into the code base, ended up getting stitched together to make a rendered page. So it's, for some people, it's a really different way of looking at a code base to look at the output and get the clue to the output instead of repping through go to slideshare.net, slash mj, 30, at least you're welcome to write it. So it's a really hard time identifying, pick out one little select that gets output from Drupal and Drupal's modules. So let's leave this little pop-up window at the bottom of your screen, but don't leave it some production, let's see if it does that for you. She's published it, you go through it, you take a look, is this visually what I want to accomplish or do I need to change my selector? So for example, cutting level two on a teaser is actually inside a link, so if you want to change, which you can then click apply whatever kinds of properties you want, so if you're also going to add font style and then grab the selector from the far right, on that item, again, apply a style and see how that looks in your website. So I think it's a really neat little tool to add a little bit of style to it on your scene without having to make guesses because it will visually show you. We're not going to do the risky-like though, we'll come back to the risky-like though, this fire bike, fire fox. You may happen to be using Chrome, you may happen to use the internet web developers tool about this lot of other tools. My biggest tool that I use though is fire bike, that this tool solves for me is that when you are trying to figure out which CSS styles are actually having as being in there, of course it's going to work, but what's actually being applied? Fire bike helps to show you, literally, because there's lines crossed through the stuff that isn't being applied so sometimes it just doesn't show up that you use the wrong selector. So it's quite, excuse me, fire bike shows you what styles are being applied on a rendered page. Page elements, in this case, the middle arrow is the thing that page elements that I'm looking at. Blue is the, inside the CSS box model that's the content, it's the inner shape. So it's going to show you as a highlight. I like sweeter, which sort of walks that style into what it is that you're currently manipulating. Now across the bottom, a highlighted, I'm sure it's not legible, but highlighted in perhaps orange, is the actual HTML for that specific line of a rendered web page. And on the right hand side are all of the applied styles which, through the tasking, get applied to that, like this, but had a student recently who, I have showed them how to make news articles and she had renamed what I've used, relied on the main news or articles or whatever happened to me, and her selectors had not been updated to reflect the content type. So by using fire bikes, she was able to see that her styles were simply not appearing at all even though they were in her casket in style shape. So this was able to show her that there was something else happening, again, in terms of the project, preventing her from styling Drupal. This one's a basic web design thing, but people tend to think that once you get to Drupal, you have to leave all of your kit at the door. Bring all of your kit in, because a lot of it's going to be incredibly useful. This is a left wrist, we've not done it to suspect. People don't necessarily recognize right off the back though, is that you can actually edit, what doesn't say, it doesn't walk in underneath those changes unless we can publish them and save them. You can actually manipulate your HTML and CSS, and you can see the full CSS file by clicking the right hand column gives you a blue link with that specific toolbar. With this, kind of forensic, what other tools do you use? Yeah, Google Chrome has left it over, toolbar kit, extension, yeah. Fire query, is that right? Your selector allows you to select your tool, you have it being applied, is that right? For one that does the live update whenever you change your CSS files, what does it do? I'm just saying it again, because then it gets your part up all the way. It'd be kind of weird if I came over to the site, speaking to the client, it's, yep, JavaScript, uncomressed, compressed, all that kind of stuff. The truth that really tracks a little bit people caring about the size of downloads again is that I would say that a certified community that I live in is still on dial-up, but I'm like, so when you're on dial-up, and people are like, we're not on dial-up, we're on mobile. So it's a great tool kit, and certainly the stuff that I use, this is the stuff that I use on a daily basis when I'm working with site building for Drupal, my daily intro boxes, that kind of stuff, but as you can see this entire suite of tools, don't check your tool kit at the door. Like I said, bring it in with you. So now we get on to the actual forensic part where we're digging into Drupal itself from a rendered webpage, where people have never, ever heard of it. Sweet, you know what I'm saying. All right, so, my frustration with, is that it's so powerful that if you're very interested in Drupal, it's very difficult to tell what you're actually supposed to do with the intro, which is why I like working with the Swever and Firebug on sort of like tiny little apps that just dance around the edge, and then develop themers like, no, I'm cool, I know how to open a template file, I know how to mess with stuff, I'm just dangerous enough that I could use it. It's similar to Swever in that it's essentially a UI on top of a page that you're going to enable. So down in the bottom right-hand corner, once Femur is installed, Femur Info has a little checkbox that you're going to toggle on and off down in the bottom left-hand corner. Then, just like Swever, you're going to click on things. It gives you sort of boxed wire frames. One of the tricky things about Femur is you sometimes can't physically click on the elements that you want to know more about. So something to be aware of, make sure you're actually clicking on the things that you want to change. And then on the right-hand side, you'll have a window top-up, much like the overlay in your perspective, pops up on top of the screen, and gives you more information about the template file, or files that are relevant to your, it will give you, it can actually be a problem. It will give you test functions, so you'll actually go to Slide Share and we put it, what it says, get it when it's done. Now, the reason why, oh, two, so then once you've got that thing, which you're not really sure, great, so I need to edit jplayer.tpl.php, plug whatever it is in, whatever the thing is that Femur has told you to make sure, plug it into Google, and it will tell you what that file of api.drupal.org, although new api.drupal web builders can get a little bit overwhelmed by it, but it's got some really great documentation as well as comments enabled, much like the php.desk.desk. So either way, identify the thing within Drupal that you're going to need to manipulate, and then go look it up on the internet, and you can go find the file and start hacking it as well, with just some really great information on the web. So the good part of this one is that if I just get back for a couple seconds, the very last line of that pop-up window should tell me all of the relevant variables. What you can't see in that screenshot is it says loading bars, loading bars, loading bars, and it doesn't actually ever complete the loading on my laptop. I'm not sure if that's specific to my laptop or if it's a bug with the current instance of Femur, so I'm not unsure, but there will be no risky live demo of Femur. I'm working, I'm very happy to demo it on some of this computer, and the people on your laptop are gonna accept. So those of you who work with computers, we know when you develop and develop Femur. So, making it easier, generally the way programmers approach Drupal is to go and download all the template files and touch them all. It's like, I don't know if you have the power out over here with the guy who looks the same and then touches the door handles and you can claim the power. That's the way that we commonly approach seeing people when the nibble is, this is where you get a feed or website-exploring problem. If you select this and you think about your content and then think about what you actually need to mean, you can save a lot of times. This means that as long as they're telling you then let's get past it. This means setting up a really good data model. If you need to isolate specific fields when you are looking at the rendered webpage or your design, assume that you can move fields around the page. We'll try and just shove it all into one big body field and then work some kind of crazy JavaScript to be able to eliminate or show whatever happens to be specific classes or divs or whatever inside the body field. Submarine things out as much as possible. Think about how the content will be used. Think about how the site design and the triple content type, so the triple modules, whatever it will be, stick together to again. Don't go around and lick all the template files. Rather, think about the content and therefore which of the template files might you need to manipulate if CSS isn't the slide. This is not the land of semantic markup. This is triple seven land. Physically, what I found is that in North American audiences, they like their big SUVs, they like their big Hulk and dibs and classes, all the information they possibly want. And when I speak to European audiences, I'm not sure how we get from text to phones, but y'all like phones for your fans. It is. Now, there is the occasional European who likes the North American style and likes Versa, so I like to explain this so that people can realize that they're not alone, they're just born into the wrong side of the world, the wrong country. If you care about your markup, remember the slide, Great Beat, the beginning that I've become a lazy, hard time developer? I no longer care desperately about my markup, although I was originally part of the, what standards, project. I think you can still find my bio on the Wall Street site. If you care desperately, you need to start with a better base. Again, you don't need to go and lick all of the template files. Morton has already done that for you. If you know Morton, you'll understand what that slide means. He's coming on Thursday and he'll be out of college. So, you need to start with a better base theme, which means something as clean as mother's hip. It means something like semantic, if you're using in triple six, semantic C-H or semantic H-N-L-5 toolkit. There's lots of other modules where people have done most of the work for you to clean up all of the, well, all, to clean up most of the most common, better than seven, than it was in six, you will get a lot better again in eight. Again, you don't need to lick all of the template files yourself. All right, finally, seeming tools, not finals is actually the midway point. When you go through them, quite quickly because it goes like this, use a sketchbook, use wireframes, use a data model, use a grid framework. All right, but don't just use any grid framework. Use one that doesn't have 16 columns. But if you don't understand why that's relevant, you need to read the books that Mark Bolton hasn't actually written yet or finished writing yet. You need to hop on Twitter and tell Mark Bolton that if he doesn't finish his book, you're going to use exclusively 16 column grid from now until 30, so he better finishes his book. But at least one of the advantages of using a grid system if you're a non-designer like me is that a lot of you can very quickly snap into place the columns that you need for your website. The other great thing about using the CSS grid framework specifically is that all of the cross browser nonsense has already been dealt with for you. If you happen to be working on very large websites you have to optimize for various things. You may not want to work with weather-generating. It's great for really, really quick websites that will generally work in most browser. If you use a mega, it's not that it's a bad baseline. It's simply that I have three in my toolkit that I currently use. 960 is this. I need to spit out a website that's not some columns. I use 960. Even if I need to set up a website where the end fusion is great with its former and future and because that concept allows you from the UI to apply... So look so your website is pulling and you have CSS selector to be able to predict what a block might look like in the future. And you can create a skin or a group of styles that a user can point and click and apply to anything from the UI. It's like Sweever, except a little bit more optimized. I would say that's the first baseline that I worked with and you never forget your first. So fair for baseline. How many people have never worked with a baseline? That's okay, it's okay. It's okay, it's okay. So I would say that out of those students who has the best documentation if you've never looked at a baseline before. However, if you want to try and make three columns of equal width, then may not be the starting place for you unless you have a lot of experience dealing with content-first and slowly big margin website design. In that case, I would actually say start with 960 because 960 allows you to very quickly snap into position at your full website. And I'll show you a 960 at the site shortly. And then finally, fusion, that's if you are at the point where you're a site builder or a site see-mer, but you're going to hand it off to someone else and you want them to be able to apply styles when they're touching code. So if I'm building a site for myself, I tend not to use fusion. If I'm building a site and passing it on to someone, I want me to say it to my friends. I'm not gonna touch on this at all. I said there were panels in my session description to lure you all in, but I'm not actually gonna talk about panels. Let the crying connect. So there's essentially three competing for Drupal layer modules. This is Elsobeco, Context, Display Seat, and Panels. And they all do approximately the same thing from a configuration see-mer and layout point of view. But in seemingly different ways, you would not guess from looking at the UIs, just sort of casually, that they would in any way be connected in terms of their output functionality. I would say trial three of them, because I like them, I think he's a nice guy who gave me free technical support. But I started using panels, he's a fairly early adopter, fairly early adopter, displays me having to assist in spaces, I don't think it existed at the time. And again, I tend to stick with the toolkit once I've got it. Just to simply finish those three, check them all out, check out the community, see which one you find best and their flexibility, no plug-ins, don't use their markups for each sake. It's not ever meant to, actually. But those are the three that look back. In terms of the toolkit, find a tech senator that doesn't make you want to punch someone in the face. There will be other people who can get it again. I think there's hot tech snakes, Komodo, if you're using a full suite, Eclipse, Shutterz, Leatherwings, Koda. Again, I think they really, it doesn't matter. I say this with love and affection, but it's not an appropriate tech senator. Although it's only because it makes you want to punch someone in the face. So, now I'm going to go through the actual theme of building. screenshot, please don't read any of these down, because again, the slides are already up there, but more importantly, if I skip the next one, more importantly, because you can just grab the theme itself from Drupal.org. So that URL, soft object, soft domicile. So, the basic steps that I go through in building a theme, can you get your whole team, if you're working with an external designer, ask them to work with a grid, which relates to the CSX grid framework that you're going to be using, it's amazing. How much faster life goes when they adjust everything by the four pixels. Apply your data structure, again, make sure that your actual content model, that you're inputting data in, matches the design that you want to get back in again. Use wireframes to prove what you're talking about. Wireframes are not just an action step, it needs to charge clients one. Build the site, ignoring the theme, build it out in barter. Convert your wireframe to a grid layout, build up the HTML fragments in relative to build up to its T files, which is basically just page for the minimum viable theme to see in a second. Apply the theme to your site, and then start digging in and taking a look at what do you actually need to manipulate. Again, this is a beginner's session. This is not the economist's game, a $2.4 million to build a website. This is like when you're working at the beginner level of the new term. We're gonna be looking at, it's described in the book that I got plenty in at the end of September. The theme is online to read, go and grab it, take a look at it. Here we go. This is what it looks like with the rendered webpage. This 960 is the base theme. I think it did make a little wireframe to show myself where the dibs were going to be, but what column width they had applied to them. Some of us can wireframe our heads. Some of us use sketchbooks. This is Balsamic, which is great if you can use this column itself. You know that there's absolutely no way to properly design websites. You can use the description, the screenshot, the version of core, the engine. It's kind of silly because we still don't include engines, but you can do the pages that way if you want. It's identified as the base theme is 960. It has exactly one style sheet, and it's got a little bit better thing at the bottom to turn off the 960 wireframe itself. And by explicitly setting the features, logo, name, and product, save, icon, or fabricon, I've turned off all of the other ones. That's it for the info file. Again, you can download this stuff. My favorite thing to reason why keep telling you not to copy is because in Chicago someone started copying this file and it doesn't actually show the entire line of code. It's not gonna be bad. So in the page.tplf.ht file, copy it from the 960 base theme, dump it into your theme folder, and start mucking about with it, but ultimately you're going to be adding those four regions. You're going to add half of your design and think about how do I want to place content in on the rightmost side in that third column, boxes four and five are blocks which are dumped in and then content sits above. So you can play around with what's a region versus what's a thing that gets dumped into a region. Our images which have been extra documents, I no longer talk about slicing Photoshop files. I now think about the PSD file and the website as two independent living documents. Because Photoshop doesn't squish and expand and do things mostly because I used to have Photoshop. But if I did use Photoshop, it's a static picture. And so I think about how can I transition this static picture into a fluid web design. The way I do that is I lift elements out such as these images so I extract the images and then place them into my theme folder and hard-coded it. So look at your Photoshop file and think about not slicing, dicing, and table layout if it's important. How can I get that same effect in my web page? In case that you don't like page speed, I can get the action. Now we start the forensic treatment. Now we start actually identifying placing content into the site. I'm looking at, I want that end to be ground, I want to want the links to line up, however they, now I start experiencing the site and applying relevant cascading file sheets, selectors, properties, all that. You'll have to double check on the actual team. But I think the entire strategy for this theme is less than 200 lines. So circle seven, 960, plus maybe about 20 lines of changes in H that should go to that HP and less than 200 lines and that's what we end up with. It looks nothing like carpet. But it took very little work because I approached it from a point of view instead of running around and looking all the template files. And that's what I mean when I can say that this, now it's a very simple site, but it's one that can be built in very little amount of time because I'm thinking about how the content will be experienced. Does this grow with me? Does this go two years from now when I've added three times as much content and twice as many blocks while the rest of it should grow with me? No. But it's that sort of iterative approach. So here we go. The summary of what we've gone through so far. Client-based build tasks, being iterate all the buzzwords that you can fit in. Use them. Don't just sort of wave your hands and say, ah, we made some wireframes. Look at your wireframes, think about your content models, think about how you're constructing the site, look at the design, think about how the content's going in and out and then start cherry picking and cascading select orders so the CSS selectors that will help you manipulate the files, so help you manipulate the rendered design in a useful way. If it isn't going to be enough, then start digging in with developing and taking a look at what are the template files that actually need to manipulate to fix this layer. Use relevant triple modules to break up content. So for example, if I want the same block to appear in two different regions or the same block to appear in the same region on a single page, I know that I use class for that. You may use something else, but I personally use those. So again, think of it developing a tool kit to accomplish what you need to do to break up the content and re-display it on the site in a way that can be easily. I use fever to teach people how to isolate selectors for cascading instruction files. You may find it useful as well. I personally aspire by to diagnose and fix CSS problems. I use develop here info to isolate if I actually need to dig in for template files. And then optimally, make sure that you correlate the amount of time that you're spending on your theme to the budget that you've been given. There's absolutely no sense promising to build something that is exceptionally difficult for the built site if you've been given, you know, half the day to build out the theme or something. Whatever your numbers happen to be, maybe it's for you that six months is a short period of time. But look at how much time or how much budget or what your timeline is allocated, and then go ahead and apply an appropriate amount of energy and touch the fewest number of files. You'll have other people do it. So ultimately, for all the time that I've spent with Drupal, I have learned to tie and come back in with a layer of styles over time. To me, this is also then participating in the Drupal community to make sure that the markup is something I want to receive. You're all at DrupalCon, which implies that you're ready to, you know, on beginner sessions, you're ready to or perhaps dancing around the edges of being part of the community, take part in that community, make sure that what you are receiving is something useful so that you don't have to spend as much time to be able to style and give you all the codes on it very well. Advanced steaming, if you're like, oh, how does it get that? Advanced steaming workshop is 24, I have no idea what day today is, it's since 23. Yes, okay, so tomorrow is the advanced steaming workshop. There's two box, back-to-back, department development folks, with themers, which will be, with a place, all levels of experience, welcome. And then I did have as well the other sessions for advanced steaming, you should be able to just take a peek of your, it says, what do you think, go and click on the survey, I was gonna say, and then the Drupal Association gives you a free IPOC, but it's completely alive, you don't get anything for free when you fill out the session, it just makes you look either really good or really bad. So that's the text that you can show up in the slide that you're gonna find provided. In the bottom left, there are a bunch of discount codes and the bottom right is the summary of all of the, and box. And I think I have four minutes, the existing team will get you 98% of the way there, you said you've done something that's a little bit off, right? So, I really would, I really would create a derivative theme, because sometimes, and I don't mean it in a negative or positive way, but sometimes, seamers will come back because their clients have asked for new developments and all of a sudden, that theme is now a response to seam, and works for mobile. You're gonna have to apply all of your hacks, now it's the new version of the seam. So I would always say, even if, I mean, you get weird levels of inheritance if you're going multiple levels down, but I would say as much as you can, don't touch the original code and just be your little sliver, like today is designed as a base theme and I'm hoping that by the end of the year they'll have their responses theme out. The less that I've touched within the Starter Kit in terms of making my own complimentary CSS files instead of editing their directing, the more I can just copy in an inversion. So, what's the idea of the meaning? The Della style theme was less than 2,000. That's because I asked Betty to use 960 of all of the resource files, so the Photoshop template that she was using was already set up to use exactly with 960. Some of the ones which take me longer are rarely spent more than a week and that's because I'm not a very strong wavy, so I'll go and grab someone else's library in most cases, but the one, if you pull up the link, dev4.webinables.net, the first word of every title is different color and that took me a few iterations to get right for the JavaScript because my selectors weren't always the best at all to change based on what style of page I was able to handle in Jericho, but I'm pretty sure that was still under a week of time with custom JavaScript and especially with all the sliders that I mean at whatever it is you're working with. So, now, on sites for clients, much anymore than mostly doing sort of, this is my world because I'm setting up a site for training that I'm going to give to some handsome bald, which most people work with clients because that's how they get paid, of course it's going to take longer because you'll have that back and forth with wire friends, you'll have the back and forth with the design, you'll have the back and forth, so that's for me, that's just straight, straight time approach. There's a question, he doesn't want to use a 16-year system. I actually prefer working with 12 because it limits my options. I'm not entirely sure why he thinks 16, but I have a feeling it's for the same reason that it gives too much flexibility and results in too cluttered design, you're trying to accomplish too much at the same time, but you'll have to check with him because he's a professional designer, I'm just a lazy front-end coder. Yeah, he is against pre-defined grid frameworks for published site re-designed Drupal.org. I think he's in print, anyone correct me on that one? Blueprint, so I know that he uses existing frameworks, but he's using them for rapid prototyping, and then when he actually refined some designs, then he'll use something that is related to the app, I'm trying to get vertical with him, he's trying, I'll just say some words that I've heard him say now. Like, how long to finish his book? And I'm gonna make him listen to this after I'm just too sad with this. Okay, yeah. What I'm gonna do is affect over design that I know I can build quickly in Drupal. So what are the reasons why more likely to suspect some things out? Is I need to make sure that the latest version of whatever my module toolkits actually works with the other things that they want done. And so I'm more likely to go and check all the project websites, make sure that there's not any massive bugs that I'm aware of, I'm more likely to think of it. But once I get them, this is my plan. I put a C to spend six months building a website that launches on day six months plus one day. I would rather launch a series of features. I think it's better for SEO, I think it's better for... Yeah. More like, good luck with that, I'm a player now. Works on budget size, I would say, are at least 10 times the size of what I, but their average sort of size is easily tentative. If you start on odd, stay on odd. You start on triple five, skip six, go to seven. If you start on triple six, skip seven, go to eight. And that's because they tend to be working with non-profits. My understanding is they will sit to the height of development quality of static site, which gets fresh off the line, in my experience, is if you tell someone who's just, they don't want to hear six months with the site, it's my hardware that came around, so it does work perfectly. Yeah. There's a problem with the size, and it's being sent to you and ropes the basics. A lot of the way the C approaches front-end development, there are a lot of, I would say maybe triple C of one of the other, so ultimately all of those basics aren't some that are quite meeting your needs. We're going to spend time preventing you from drinking coffee, get out of this.