 Good afternoon. Thank you everybody for making it this far or Camp Atlanta. And also I did this talk at Raleigh, not the exact same one, but a similar one, Demo & Roots. And everybody's eyes glazed over so what I did was made this a little bit less technical, a little more friendly. They also put me in the designers room which I'm very happy to be here. So what we're going to do is glaze over some topics because of time, because of questions, because of some stuff I want to show you. And then after that I'm going to be available for the entire rest of the time in the happiness bar just answering questions if you have any. If we had internet you'd be able to get this set up, but because the internet's not really reliable and we recommend some package installations. We're going to not maybe do that over there. So, cool. Alright, so I'm Julian. I'm a web developer from Asheville, North Carolina. I help run the WordCamp Asheville which you'd totally come to. It'll be sometime this summer. You don't have a date yet, right? We aren't allowed to tell you the date yet because WordCamp Central is still getting back to us. But it will be sometime this summer and it's going to be really great. We had a really good year last year and we're growing to some more attendees and a really awesome new venue hopefully. So, you can get me on Twitter at Julia Melissa's. I don't blog often, but I'm on there. And I have a boutique agency in Asheville with an awesome designer and friend. And we do pretty cool unique websites. So, on top of that, I like to mention what I'm using during a presentation or tools that I like to use because I always see demos and don't understand that cool tool. Other than everything on here, you guys also might see me doing a lot of this. This is called Alfred. It does everything I need. So, just wanted to mention, it's pretty awesome. Things I like to use. It's PHP Storm, it's really awesome, but I'm an ADD typer and Sublime Text is really quick. So, I use Sublime Text. I'm also not 100% always in the WordPress world and I write a lot of JavaScript. I really enjoy Sublime Text speed and simplicity. So, I use that as my text editor. Git for version control is really easy. And I recommend trying it out using Source Tree. You can take a folder from your desktop, dump it into the icon on Source Tree, and you'll have a Git repository initiated for you that quick. So, even just using that to keep control of your code, maybe if you're coding a custom theme or whatever, is really helpful. I use Bootstrap. I was an early adopter and I'm a big fan. It's not the end-all-be-all, but it's a good one to start with. I used to love only less, but less in SAS, both have a dear place in my heart. And as long as I'm using a CSS preprocessor, it isn't stylus, I'm okay. And there's also Vagrant for my local development box. I personally use a VVV box to do a lot of my development. That's Vagrant's. If you look up VVV, you can find it. I'll also talk a little bit about another Vagrant box that Roots offers. So, you're actually here to learn a little bit about Roots and the new theme Sage. So, Roots originally actually turned four years old yesterday. So, Ben, yeah, it's actually really exciting. I didn't realize that it was going to be this weekend, but this guy named Ben, he worked in an agency in Texas and they pumped out websites like eight a day sometimes. Just crazy, like fast turnaround, little customization, started from scratch and he ended up making this little theme that he always started with called Ben's Blueprint. Well, eventually he ended up putting it on GitHub, called it Roots. It got a pretty big following. I've been using it since we introduced Bootstrap, but once we added Bootstrap and Bootstrap was like this big craze, it just blew up. Like we had all these GitHub swatchers and everybody's using it and it became something a little bit bigger than what he had originally intended. So, our thing is projects that help you build better WordPress sites. And my own definition is a group of awesome people who want to bring modern development practices into WordPress. WordPress is historically really good at our backwards compatibility or really good at that one-click update or really good at making sure code that was written 14 years ago in core or 10 years ago in core still functions. But there's all this stuff going on around us in the WordPress world. So, some of the Roots team members are actually not primarily WordPress developers. They're people from other parts of the technology sector and they just want to help contribute back to kind of bring WordPress somewhat up to speed. We'll talk about that in a little bit. So, there's two projects that we maintain that are these big projects and then there's a couple small repositories on GitHub that we also keep updated. And if anybody's wondering what a repository on GitHub is, it's just a place that holds code. So, you can download a zip of that or use Git to download it as well. We have Sage, which used to be called Roots. It's a starter theme. That's what we're going to be talking about today. It helps you build websites faster, better with some modern development tools. And Bedrock, which is a vagrant box, an ansible playbook. You don't have to know what any of that means. And it is a really awesome hosting stack for WordPress. But it is a hosting stack that you keep maintained yourself or use that as your development environment. It offers some really cool stuff like HHVM, which is a PHP processor that Facebook made. That is Wicked Fast. We use NGINX on that. Anyways, it's pretty cool. You can check it out. But that's not what we're talking about today. So, before, and we're going to talk about Sage, but before I really get into Sage, I'd like to get an idea on who's in the room. Has anybody raised your hand if you're a designer primarily? You would identify yourself as a designer, okay? Raise your hand if you identify yourself as a developer. You can be both. All right, cool. Raise your hand if you've ever gotten a theme from Theme Forest, didn't like what it did, and hacked it up to do what you wanted it to do. Okay, less people than I would have thought. What about people who have ever used underscores before? A starter theme. All right, cool. So, for those who didn't raise your hand, I recommend checking out underscores, absolutely. It's the WordPress way to do things. It's what WordPress VIP uses, where they start most of their themes. A lot of time, you have a designer or you have a project and a client, and the designer gives you, and this is traditionally what I did, designer just hands me a Photoshop document, or they hand me an illustrator document and say, okay, go make this into a WordPress site. So, in order to do that, in order to get that default look and feel, especially for a custom job, you really should start with a starter theme. And underscores is an outstanding alternative to roots, especially if you'd like to learn the WordPress stuff only first, and then you can bump up to using Sage when you've got all that and you're totally good on that. But this will still be helpful, and it may be something that you want to pick up right away, and that's totally okay too. I actually think that the new rewrite of Sage made it a little bit easier for people to pick up. So what is Sage exactly? It's a starter theme that you just dump into your themes repository, but I think it saves a lot of time. You can hit the ground running. It is also very delete key friendly. So it means if you don't understand one piece of the code, or you don't like one piece of the code, or you don't need one piece of the code, you can delete it, let it do its thing, and it's usually pretty good. There will be some exceptions as with anything. So when do you use Sage? Maybe when you're starting a brand new custom theme. That's what I mentioned with the Photoshop document or Illustrator document. If you need to build a quick responsive site or a web application on WordPress, that's happening a lot more and more where people are building WordPress sites or becoming these. Software is a service, or maybe it does something crazy. Like I built a wine distributors database on WordPress. They use Excel to upload all of their wines, but it does like a live search of where the wines are from, and there's over 16,000 wines in their database, and WordPress actually handles all of that data really well. Presentation wasn't much of an issue for them. So I just installed Roots at the time it was Roots. Popped it up and it worked. So you can get something started, maybe prototype an idea. Or you just want to sharpen your skills with a real world example. You might hear about these things like Grunt or Gulp or CSS preprocessor like Lest or SAS, or maybe you've heard about PHP moving to namespaces or you want to try to learn about object-oriented programming or whatever. We do bring concepts from other parts of the modern development world. So if you'd like to learn some about that hot new trendy item and how it might be helpful in your WordPress workflow, we update very quickly. And we always use what we think is the best choice for the job and also where the industry is moving. That example is best with Grunt and the rewrite. We had Grunt for a year or so. That helps us. It's just a command line tool that helps you preprocess your CSS. So turn your Lest or SAS into CSS. And then Gulp was this hot new kit on the block. Everybody wanted to use it. Super wicked fast. And we were like, all right, guess we have to rewrite Roots so that we can use Gulp. So we do that for you so that you don't have to. Who should use Sage is another really good question and maybe even more important than when to use Sage. Because it's important to remember that it is somewhat advanced and it does a lot of stuff for you. But if you're coming directly from a WordPress point of view or WordPress perspective and you're used to writing these WordPress themes, I think sometimes people can get caught up in that it looks different or it feels different. So understanding WordPress concepts is really good before you move on. Just specifically for theming. If we're talking about theming. So theme developers who want a reliable toolkit, that's me. That's why I got into the project of spilling these themes and this saved me 10 to 15 hours per theme. So if I can save that much time to start, I can focus on making it look good, making it work well. That was me. Maybe people getting into more advanced theme development. People who want a working but delete key-friendly starter theme. I guess this maybe could be the same person. You could fit into one of those. There's a really good blog post on our site. It's called Roots Should Not Be Your First WordPress Theme. And even if you want to go in there and try it after today, which I definitely recommend, it's got some really good points as to maybe where you can start, but also some reasons why you might not want to use it right out of the gate. There are some disclaimers and downsides, as with any piece of software, really. Learning Curve. Like I said, I think we've made this a little easier, but there is definitely somewhat of a learning curve to it and it looks a little bit different than a normal WordPress theme. Just so you guys know, it's not quite like a framework as people would call like Genesis or thesis or something like that. It doesn't rewrite the loop for you. There's no tags like that, specifically. We have a couple things that we do. So it really is just a starter theme. It's not trying to reinvent all of WordPress. It's just maybe some of the front-end tools that you use. The theme wrapper, which we'll get into, has a potential to break a couple plugins or frameworks, like Genesis. You probably want to use Genesis with roots. Actually, I think there's people that do, but they probably have their own changes that they make to every project before they start. And WooCommerce is a great example. WooCommerce calls getHutter, getFutter, getHeader. And then we also call getFutter, getHeader in a base, PHP, which we'll go into. So when you install WordPress, there's two headers and there's two footers. And we have blog posts. There's tons of stack overflow questions people asking about, theme compatibility stuff. We have our own forum. If you do a Google search, very quickly, you will find that answer. And if you have not found that answer and you're noticing a plugin is broken, just post on our forum and one of us will help you. It's like five-minute response time because none of us have lives. So it very well may be me getting back to you. So it is opinionated. One of the guys on our team is a Ruby developer almost full-time. Another one of the guys who just wrote Gulp, the Gulp rewrite is a JavaScript developer 95% of the time. We are opinionated in the way that we think the modern development environment should be and maybe where WordPress could be moving. And because we're not directly tied to WordPress, I think underscores is very tied to WordPress because VIP people use it and it's accepted as a good starter theme for the theme repository. Because we're not tied to those things, we can make some changes before they can just because of all the backwards compatibility and stuff. The development moves really fast. So as in, we work on this all the time. About every year, we do a complete, not a complete rewrite. So some of the concepts are the same. But people have left roots literally because they had to learn something new. For me, that was good because I got to learn about grunt before, you know, I probably wouldn't have done it. I would have just kept using code kit or whatever. I got into grunt because Roots forced me to use grunt. And then I got into gulp because Roots forced me to use gulp. So it's a good thing, bad thing. Finally, and I talked to Tom McFarlane about this after his talk, coding standards and it's all good. But we're not coded to the exact WordPress coding standards. WordPress uses a tab. You could certainly format anything to be WordPress coding standards. But we don't use the tabs, the force-based tabs. Some of the functions look a little bit different. We follow something called PSR2 coding standards, which is most large PHP frameworks governing coding standards. And that said, this is completely delete-free friendly. So if it delete-key friendly. So if you really want, you could absolutely make it fall WordPress coding standards. Yeah. The name is very different in Roots. Super good. Yeah. Yeah, so when you're coding a custom theme and you're starting from scratch, I'm assuming most of us maybe have used child themes or are told that we should use child themes to edit a theme. Roots technically can be set up to be a parent theme, but just like underscores says on the first page, it's a starter theme. So you don't just take underscores and then download another underscores and make that into an underscores child theme. You have to have styles up here in your main underscores. So normally it's like a main theme. WordPress doesn't historically work right out of the box as a parent theme that then can be made into child themes. A lot of that is what we do with the PHP changes. Our functions PHP file is actually just a file that recursively calls other PHP files. So that can sometimes make breaking changes. And it's really for like the work that I was doing at the time and the work that I still do, which is a designer hands me a Photoshop document. The client wants a theme that's going to stay maintained. And I get to kind of do whatever I want because I've got this awesome Photoshop document and this blank canvas of a WordPress site. So that's really the use case where I see it being most helpful. But we have lots of, like, some people say, okay, well, you know, maybe that might be really hard for like government people to keep up with or whatever. Well, the, you know, like, or maybe like an enterprise because everybody's got to learn it. Data.gov uses roots. So there's a lot of really big agencies. There's a lot of people using roots because it saves them a ton of time. Is that helpful enough? Yeah, I guess what I was doing for was, but don't use it as a child theme. Yeah. Is that the guiding principle? The guiding principle in general is don't use it as a child theme. You can technically do it. So like UNC Chapel Hill just built a new theme based off of roots that they're distributing to their multisite. And he says it works. And I don't affirm that you can use it. You can use it as a parent. But if you do, don't ever update it because as you've been, we weren't mentioned that the development moves very fast. Yes. The development moves very fast. And so it's not the kind of thing where you're in your plug-in, you're in your WordPress dashboard, and it's like updates. You'll never see roots updates in there. You have to manually make those changes yourself if you want to do that. You can make that easier with some Git tools. But it's really like a one-off custom build. It's perfect for that. And like I said, that's what I was doing a ton of. And that's what Ben was doing a ton of. So let's talk about what it does, not just what it is. It's got an advanced, so these are some features. It's got an advanced build workflow with Gulp, Bower for package management, Asset Builder, which one of our team built specifically for this, and now is fairly popular in GitHub. People are using it for some more advanced front-end workflows. That minifies scripts. It preprocesses CSS. And it also minifies your images for you. So it does PNG and JPEG compression as you're typing as you're going. It automatically updates that for you. We have a theme wrapper. Whoever's ever built a custom theme or has ever made a page template. So maybe you have like a custom home page or custom contact page. Well, using WordPress template hierarchy, you go page-home, or sorry template-home, right? PHP or something like that. The theme wrapper has this base file that lets you actually not have to call get header, get footer, and a couple common site elements every time. So in fact, we really just have this wrapper and then your content is separated out a little bit more. So you only write that code once. And we'll talk about that in a little bit, but it's basically to keep yourself dry, which is don't repeat yourself. That's a good coding standard or good coding practice across the board. We also use HTML5 boilerplate code. So that's kind of what's the recommended way to just start a webpage that works in lots of different browsers. We use microformats. So for SEO reasons or for accessibility reasons, like screen readers and stuff, all that's already built in. And the microformats are especially helpful if you have a blog. They're basically little tags that tell Google what that blog, what is a post, and how often it's updated, and those kind of things. It's all built into the market. Currently, Bootstrap is included. As well as we have over 30 community translations, and it's really internationalization friendly. So we have a lot of people using this with WPML. Most of our strings that are... Most of the strings that come with roots, like prompts, like maybe a 404 page or a blog header, all of those things are translatable. And we love pull requests from other languages, but we have German and Japanese. We have two versions of Chinese. We have, I think, a Hindi translation now. So there's a lot of awesome developers contributing back. That is in a separate repository now. It used to be part of the same one. Pre-requisites. This is the fun stuff that you have to make sure your computer has so that either you can develop or your server has so that it'll run. First thing to note here is you must have a version of PHP equal to or greater than 5.4. Does anybody know the WordPress minimum PHP requirement? Anybody? It's less than 5.4. It's 5.2.3, as far as I remember. And PHP has changed. That version of PHP is like over six years old. So WordPress, like we said, is awesome at continuing to maintain backwards compatibility. I will warn you, not all hosts are on 5.4 now. And you will get like a white screen of death when you upload your theme and try to activate it because it doesn't work. You can make PHP, you can make roots 5.4 compatible, but it would take you so much time that you should probably just go find a host that cares about their version of PHP. And that's all I'm going to say about that. Node and NPM needs to be installed globally. And Node, we're just using Node for a couple of technologies, like Gulp, Asset Builder runs off of Node. It's basically JavaScript in your command line. And it's really fast, it's really helpful. On top of that, the NPM is Node's package manager. And we'll talk about package managers in a sec. But package managers just get dependencies for any project or any server environment. So every Linux server has a package manager. Maybe it's called app get or there's like yum. And what you can do is you can install Apache or you can install Nginx to run your web server or you can install FTP, right? All those things are installable. Well, for our projects, we need Gulp and Bower. These things are both powered by JavaScript as well as fetchable with NPM. So we use NPM to grab the tools we need to build the project. And again, if this is really confusing, I can show you after the talk. I didn't know how many people were going to really grasp that, but it's really cool. And really just trust me, you just install Node and it's great. We have really good instructions, too. Gulp is that thing that I was talking about that does all this cool stuff like minifies your images for you. Grunt was the previous cool thing. And I still like the name Grunt because it's exactly what it does. It does grunt work. So every time you hit save and you want your SAS file to become CSS, you have to run a very annoying task to say, OK, well, I'm going to go change this over here. Grunt does the same thing. Grunt does all of that for us. Grunt does watches for us to just hit save. So Gulp is like Grunt. It's just faster and a little bit leaner at times. Bower is another package manager, but instead of being a package manager for things Node needs, Bower is a package manager for front-end libraries, front-end projects. So as a really good example, you need jQuery on your site. OK, wait. Wordpress gives you jQuery. You need a slider thing on your site. Or if anybody's seen those pop-up libraries, like where you get a pop-up for modal, Flex, what is that called? Magnific pop-up. That's it. That's the one I like to use. If I want to use Magnific pop-up in my custom project, I can Bower install Magnific. What it's going to do is it's going to write to my Bower file. It's going to say, OK, Julian wants Magnific, and he wants it in this folder, and he wants this version. What's really cool is that you can upgrade very easily instead of dragging and dropping that as a zip into there. Say they upgrade Magnific. Well, with Bower, I can say Bower Update. It'll actually update that package for me and pull in the latest version. On top of that, instead of your other developers having to manage that or also pull down those same things, all they have to do is run Bower install, and it already gets everything that they need for the project. So these are all free open source tools, and you can share this. You can share a very small repository with the code that's only needed for your theme with other developers, and they can run some really simple commands to get it working on their machine, just like your environment. I'm not actually going to install Sage, but it's really easy. This is just for me to tell you that it's pretty easy. These steps are available on our installation. One thing we should remember is the dev URL and we have a manifest file needs to be changed so that you can get browser sync working, which is what I'm going to show you. It might be the only thing you're really excited about for this whole talk. So before we get into the wrapper, let's just look at what I have right now. This is a basic, basic WordPress site with roots installed. Nothing has been changed. This is what it looks like when you install your theme and get everything working. You'll notice we have Bootstrap, and what I'm going to do really quick is go into the wp-admin, and... Oh, that's definitely wrong. Let's see if this works. This one might work. Sweet. So if I want to make a page, I can call this... Is it making me log in? Oh, no, that's not right. This one. I have an example page like this sample page. It's got some text in it. It's got a link. You'll notice this link is green, which I actually think is a cool thing to point out. Roots pipes the style sheet that it generates for your front end and the back end of WordPress as well. So when your clients are editing it, and maybe you have a site with a black background and the text is white, or the text is red, or the text is green, you can see that, and it'll show up here, even if you're using classes or something to identify that. Roots default color is green, like the logo, so that's our default anchor color right there. That actually Bootstrap gives us. So it's kind of washed out, but this is using the Bootstrap styles for the block quotes and things like that. So here's a page, and what I'm going to do is I'm going to add this into the menu just so you guys can see. And it was a sub-item. I'm going to save the menu and let's go visit the site and see what it looks like. Oh, yeah, thanks. This guy's got send. It's really hard looking up there. So we've got a couple menu items, right? Well, everybody knows Bootstrap's got that super cool collapsible navigation, and it's already written in there for you. So you do have your mobile navigation just like Bootstrap would normally do. And I actually have a blog post on my site that if you just copy and paste the code, it makes the little navigation items turn into an X and then animate back when it's not open. So definitely recommend checking that out. You want some slang factor on your nav menu. So you'll notice that it's already kind of usable. The site could technically be published like this. In fact, I'm pretty sure Russell's site literally is just a root's install just uploaded to the server. And it's perfectly functional like this. Everything right here works. And you'll notice we have a sidebar and with some default widgets. We also have our page here. Now, this is already responsive because we're using Bootstrap's classes. So it will stack down. It's just using Bootstrap's column stuff. But that's pretty cool. But this is cooler. I'm going to show you guys how easy it is once it's all said and done. Three... Oh, I probably shouldn't say that. This is a password. Give me one second. And... It's worth the wait. So what Browser Sync does for you is it actually syncs your development environment on all your devices. And it gives you an IP address of your computer's local address on the network so that you can visit it while you're developing. So, I've got my computer open over here and I'm developing for my iPad here or maybe I've got my phone over here. Well, if you guys look, I'm about to change the background color and... it's going to update that for us. So, if I go and open that file, here's Sage, we have a variables file where you can change things like brand primary, you can change, these are all Bootstrap variables. So, if I wanted to make our link color blue, do that, our link is going to update. Probably can't see it there yet. Body, background color, background color, to RIT. And if it works, it's going to inject those styles and update them as we go. Now, on top of that, it actually can save click events, it can manage click events, as well as manage well, lots of things. It can manage click events and scrolls. So, let's just say we wanted the min height, just so I can show you guys the scrolling thing, to be maybe 30,000 pixels. It will be like super tall. I'm going to go here and I'm going to open up my local host environment here. It defaults support 3,000. So, and that should be red. So, as I scroll down, my iPad it scrolls up and down over here. No, so if you see the local host 3,000, my normal development URL is actually roots.dev and it's on a vagrant box. And what browser sync does is it creates something called a proxy. Yeah, this is called browser sync, this tool. And it creates something called a proxy and it basically masks that site, but it makes it accessible over your network. And it's a little piece of JavaScript that basically watches for click, scroll, form submission events and on top of that instead of, so my CSS changes, right? As my CSS changes, instead of loading all of those changes, it actually only injects the changes. So it does a diff of what it used to look like and what it is now and only injects those changes to keep it very quick. So you'll notice that these code changes happen in milliseconds. Actually, what's funny about grunt is that grunt measured everything in seconds. So if you use like grunt time or something like that it was an add-on, it would say three seconds to compile, four seconds to compile. This is all in milliseconds and actually sometimes in nanoseconds. So, Gulp is extremely fast because it leverages some really cool, some really cool computer science It's refreshing the whole page. Oh yeah, it's refreshing the page. So if I click over to the sample page, it'll change it here and now this, it looks like the CSS has been cached. If I refresh there, it updates. So if we want the link color to be, or say we just want like the font size, basic font size, to be like 50 pixels, it's going to make that change, it's going to inject that change and all of our text is going to be like way too big. So that's the first cool thing about roots. When you really look at how much time it takes and sometimes if you're designing responsive websites, maybe even starting mobile first, being able to have your phone right next to you code for this actually, like keep your editor here, code for your phone first and then start to move up iPad, desktop, other screen, it keeps everything in sync. On top of that I use my girlfriend's computer as like my test computer all the time, because it's never got anything weird installed on it. It's always just like, you know, she just goes on the internet. So I can always like double check. I can just get on her computer, I can type in my IP address, make it work and then see if there's any, if it's just a local problem or a problem there. Yes. Browser sync? Yes, it's available for, well it is actually available for both. Cool, that's okay, cool, good. It's available for grant, gulp, it's also available just as a command line utility. So as soon as you have, if you use npm for your package management, it's a package there, you can use npm install browser sync, you can actually use browser sync on anything. It'll create a proxy, you can do it for just HTML or CSS development. Their site's really easy to get started. Has anybody here used code kit for development? Okay. What? Yeah, yeah, so before you use grant or whatever, it's a GUI, so it's like a graphical, it's just like an application that you install on your Mac. It does all this preprocessor stuff for you. It's really simple. What? It does have a cost and that's why we really like continuing to use open source free software. So here's the deal, I have 20 minutes, technically. And if I sit around and talk to a bunch of designers about all the PHP changes, that might not be super helpful. So instead I'm going to show you guys a couple things that makes WordPress really cool. Sorry, not WordPress. WordPress is really cool. That makes Sage really cool. So if you see this template dash custom PHP, you'll notice that this doesn't look exactly like your normal page template. Maybe not from underscores, maybe not whatever. It's missing tons of things. It's missing your get header, get footer, WP head. Roots has always used partials. And what partials are for is for challenging you to separate your code out into little bits and pieces and then assemble those only when you need them. It keeps things drier, which again, don't repeat yourself. Also, to me, I really like it. I have this kind of like folder directory of this is where things are going to go and this is how I'm going to do it. I don't just have one huge CSS file. In fact, most of my projects have over 20 or 30 SAS split ups files and they all get compiled into one. So we actually do that and it's kind of hard to see on my screen. But if we're looking here, this is WP content. On themes, I'm going to go in Sage. And first of all, we have a disk directory which gets generated every time you run Gulp. So you don't touch this. This gets automatically compiled from our assets directory. When you look in our assets directory, there's a fonts folder, an images folder, a scripts folder and a styles folder. And in the styles folder, you'll see there's lots of different files. In common, there's global and components where you might put buttons or form elements or grid or WP classes like a line left, a line right. Those go in there. Also, separate ones for layouts. We have footer, header, pages, posts. So there's this whole directory structure that keeps you really lean. Some of these files are only two lines long. And it might sound like really crazy because you're like, everything's not in the same place. But once you get used to organizing your project that way, it really makes you really performant. And you start coming up with your own naming conventions. You're going to know where it is anyways. And you're going to use it. Also, we all copy and paste from other projects, right? Like, you've done something here, you might do it over there. Keeping things in partials is really cool. It's an easy way to say, okay, if I just want the button styles from this site that I've done to work off of, go into buttons.less, copy it all, put it over here. It's pretty sweet. So, there's that. And then we talked about this looking kind of weird, this custom template. And that's because we have this base.php file. Up here is the namespaces I was talking about. You do not have to know what that is. It's one of the reasons why we do require a higher version of PHP. There's a really good blog post on it. You can read about if you want to know more. But if you'll notice right here, these files, these includes, we're using all these like get template part and include, this actually tells us what file to get. So, we can have a custom home page template. So, I'm going to copy this custom template, and I'm going to put it in home template. And I'm going to put an H1 on the top that just says hey, we're home. I'm going to save this in the main thing, just like I would template custom. I'm going to call it template home. And I'm going to go into my WordPress admin. Oh, I got to change that font size. Yeah, right? Let's maybe just like 20 that. Just make it smaller. So, I'm going to go into my back end. I'm going to select that custom template for home. And by the way, if you're running wondering why this is so fast, it's because my site has like nothing on it and I'm running it locally. So, now I have this home page template. Sample page looks the same, but we have an H1 at the top. And the reason why we have that is because base has already told us right up there that we're going to get that template path just like WordPress asked for it. So, everything is actually extended just like the WordPress template hierarchy might. If you're wondering, well, what if I want one of those huge full width sections, but only on the home page, you can totally do that. You can take base and you can copy it into a new file. So, we just don't want this container, right? Because on Bootstrap that container class is what puts it in the makes it not full width. I can save this. I can do base template home. So, it's just like the WordPress template hierarchy. Put it in there and once I refresh this page, Roots knows that only with the home page template we don't want that. We want a different base file. So, I hope that makes sense, but what it does is it allows you to kind of again separate your concerns, but only the code you need where you need it. And it's also really, really flexible. If you needed to make changes to some of those plugins like WooCommerce or whatever, that's kind of some of the ways that we can get around to those issues. It's just not using the base or not calling get template and get footer. You still use a custom base without the wrapper. Right. Yeah. So, you could use that without the wrapper. Exactly. So, that's the wrapper. The lib folder is pretty cool. We include a place to put your analytics already. There's a Google Analytics ID right there. This is actually going to move into a plugin that we have called Soil. You can use Soil anywhere. If you guys ever used like, if you guys ever had to inspect a menu item and you notice that WordPress dumps all these classes for that menu item, we clean that up. There's only a couple classes. On top of that, we use something from Paul Irish. He's a big JavaScript jQuery developer. And what we actually do is based on the body page of, based on the class of the body which WordPress does. So, like, on this site, you'll notice if we go into the, we go in here. It's got page template as a body class. It also has a class of home. If I want to target only home, I can use this to target only that page. So, on the initialization of the page, and I actually wrote the init finalize, but what it does is finalize just waits for all the other code on the other pages to run. This might work. So, it's going to recompile the CSS and it's going to say hey there. So, if we go to a different one, maybe infinitely. Okay. If we go to a different one, that didn't happen. And it's because we're targeting the body class of that page, right there. That's pretty cool. You can write a specific JavaScript and keep things, keep things down. What is this? This is called DOM based routing. And it's, there's a post right here by Paul Irish on why it's really cool. If you had, like, maybe thousands of lines of CSS on your home page, I would recommend in queuing that separately. Which actually Sage makes really easy to do. But in this case, with a small line of code, that's really helpful. It's never going to be on my app page. Maybe you have to, like, different sliders or something. Let's see what else we can cover. Has anybody's brains exploded? You have no idea what's going on? Okay. So, when you actually have to push to production, you use a gulp production flag. And what that does is it actually adds a random key at the end of your JavaScript and your CSS file. And that tells the browser to cache us. And then as soon as you make a new, and as soon as you upload new styles, the browser is going to change it. Because it has a different key at the end. So, if you had main. main.css your browser cache might actually cache that forever. But it lets you take advantage of a lot of performance caching things and stuff like that. So we can talk about Bower. We can grab a bunch of stuff. Our internet's really bad. I'm not going to do that. I'm just going to show you guys BrowserSync. Let's see what else we're going to look at. So, the first thing I want to show you guys is that it might be confusing for you right now. But we have our own dedicated discourse forum. It's not discussed. It's discourse. It's just a forum software. It's really easy to use. There are some rules and guidelines before you post. So check it out. Before you post, we've answered so many questions. And people ask questions like, how can I provide? Or, this plugin isn't working. Or, blah, blah, blah. And he's laughing, but I answer those questions all day for you. Really nice. Really nicely. As long as you ask me nicely. So, and that's why I'm on the team actually is because I ended up just contributing a lot to the forum. And now it's totally worth it. Getting people to get their development workflow faster so that they can do what they really enjoy, which is coding CSS and coding templates is much more valuable to me and really exciting to get people doing that. You can also just ping me on there or contributions that are welcome on GitHub. We have extremely strict standards of how the code is written and how it's uploaded. It always goes through a set of tests actually that I helped write that basically makes sure your code is formatted to PSR2. But for you guys who are using it because you know that it's been vetted and tested. We tested against the latest four versions of PHP as well as HVM and stuff like that. So, I want to tell you a little about the future of Sage because it's changing again and in a big way. Actually, in a way that is way cooler that nobody else has done yet in the WordPress template realm I've been trying to get this pushed for two years. We're finally at a point where we can do it. And we're going to use I know this isn't a technical slide we're going to use something called YoMn and what YoMn is is another trendy buzzword tool that uses Node but what it does is it allows you to create project templates and generate custom project templates based on the project. So, does anybody here use SAS? You can raise your hand maybe. Anybody use less? Alright, so for the less people we want this to be SAS. Let's ask people like why is this default to less? YoMn actually walks you through the process to build your project. It asks you questions and it runs all of your commands for you to get yourself set up. NPM install, everything. YoMn is super cool and we're really excited that we're finally starting to be able to use it for this. The biggest thing for us is people want us to move off of bootstrap. Some people like foundation, some people think bootstrap is big. You're going to be able to choose bootstrap, foundation which has to have SAS but you can choose less with bootstrap or you can have SAS with bootstrap. You can have no front end framework and just some really simple HTML files might look more like an underscore thing when you start. You can also use less or SAS. So, I made a proof of concept to show the guys a month ago and we're not actually going to work because what we have to do is have a really good internet connection to download all the packages we need but I am going to show you no, I mean, it's not going to work but I am going to show you how easy it is and how awesome it is so can we all see that? I'm going to make it a little bit bigger. How's that? Alright, so I'm going to go into my development folder and I'm going to go into you have to go into the fan line to do one of these things. Not that crazy. And I'm going to call this WordCamp Atlanta and I'm going to go into that folder. It's all I'm doing. I'm going to run Yo Sage and Yo is the command to just tell Yo Man to start. As I do that it's telling me Yo Man is up to date because I suck and then it's asking me what the name of that theme should be. So say my client is called Coke because I'm doing Coca-Cola's and put that in. It's going to ask me for the Google Analytics ID I don't have that yet because I haven't lost the site so I'm just going to hit enter. It's going to let me pick the CSS preprocessor that I want to use so I could use less or SAS. I can use a couple of CSS frameworks foundation, bootstrap, none. If I pick foundation I mean I'm going to quit this right away because it's going to just blow everything up. It's going to actually go and try to install all of this stuff for me and then by the time you're done you're going to end up and I just quit it because I don't want to see what happens. By the time you're done it's ready for you to just hit gulp, watch and start writing your code with whatever you want to use. So that's the future of Sage and I don't think the guys actually know I'm doing this so. Hopefully by the time it goes on WordCamp TV it'll be fine and it'll be perfect and we'll have it written. This is what I'm going to be working on a little bit over the next couple months and I'm really excited for you guys to get to use it because going from all this blah, blah, blah, blah, as long as your tools work and we can make sure your tools work you just hit Yo Sage hit enter a couple of times and you can start working on your WordPress name. So that's it. That's Sage. Thank you. Go ahead. The same repository as Roots or which projects? Yeah, so Roots the reason why we're called Roots now and not Sage is Roots became bigger than just one project. So you can go to Roots repo just GitHub slash Roots and under that you can find Soil which is that plugin. You don't have to use it with Sage. You can find Sage, you can find Bedrock lots of those things. All owned by the Roots people. All right, that's it.