 All right, so today, like he said, I am going to talk about foundation press and it's how it's going to become your new best friend. It's the best, I promise. So in this presentation, I'm going to go over a lot of code and I'm going to mention a lot of like download links. You can go to this URL here, leamediagroup.com forward slash foundation press and you get a better look at the code. You can refer back to it later and then you can always refer back to the links that I talk about. Yeah. All right, so I'm going to give a quick introduction about myself. My name is Erin Thompson. I am a front end design and developer. I've been working professionally for about four years, but I've been interested in coding almost my whole life. It started with like, you know, the stupid MySpace profiles or Neopets. If anyone remembers that, no, just me. Okay, cool. Thank you. What I primarily do is I build custom WordPress themes. I work for a small integrated marketing company called Leamediagroup. We're out in Rose Hill, which is really close to Wichita. We primarily focus on custom WordPress themes, but then we also do a lot of marketing and social media. We have clients in about 22 different states and all different kind of industries. All right. So before I begin, how many of you know about frameworks? Okay, most of you. And then have you heard of foundation press? Okay, then cool, you're all going to learn something and not be super bored. I'm going to go over a little bit about what frameworks are for those of you who don't really know. So a framework is most usually defined as a package made up of a structure of files and folders of standardized code. So your HTMLs, your CSS, your JavaScripts, things like that, which can be used to support the development of websites as a basis to starting to build a site. So if you think about it like when you're building a house, all houses will have frames that they kind of build off of and it's pretty much the same thing with websites. In other words, frameworks make your life a lot easier by simplifying complex problems so that you can focus on finishing your project quickly and efficiently. A lot of times when you talk about frameworks, you'll have people who ask if it's cheating. I don't know why people are just mean. And my response to them is no, it's not. All you're doing is you're really, you're just using the tools available to you to help reduce some of the redundancies that commonly occur when you're building websites. Also, please give them this answer in that exact. I'm going to go over a few advantages of why you would want to use a framework. The biggest one and the one I'm probably going to refer back to a lot is that in a development production environment, where speed of deployment is just as, if not more so valuable than optimizations, frameworks can help cut a lot of corners. So basically, they're going to make development time much quicker, which is always nice. Some other advantages you're going to see is that for the most part they're all open source. So people have access to the codes and they can add and build on it as they see fit. They have, all of them have extensive support and documentation. So if you're having any troubles with installing them or adding features to them, someone somewhere has already figured it out and it's available to you. Google also another best friend for developers, but I'm sure I don't need to explain that. The next advantage is that they're free and that's free. Everyone loves free things. It's easy. They also have really good security and this goes back to being open source. So usually if an invulnerability is found that someone has already patched it out and they're easy to scale. So if you're using a site with a framework and it starts off small, but then the client wants to add a lot more features and capabilities later on, it's really easy to do that without messing up a lot. So why should you use FoundationPress? There's plenty of frameworks available and I'm going to convince you to use this one. I'm not sponsored but I wish I was. So one of the reasons is it's out of the box CSS. So basically once you install it and add it to your site, it's going to look great just on its own. You're not going to need to add a lot of work to it to make it look nice. Another one is cookie cutters and I might lose a lot of you here, but Bootstrap currently is the most, but this popularity tends to be a double-edged sword because with Bootstrap sites, there are a lot of elements that you start seeing and recognizing. But with FoundationPress, you can make it look however you want without as much extensive styling. And most frameworks come with a grid system. That's kind of like a defining feature of frameworks, but I really like FoundationPresses and how it works is that you have to imagine that each of your container rows equal up to 12. So all of your columns in each row will be 12. So in this first example, we just have one full-width column that's 12 wide. Then in the second example, we have two six columns and then you can go on. So then we have three fours, four threes or six twos. So if you can add to 12, you can use FoundationPress and if you can't, I'm sorry, that's unfortunate. But yeah, then you just go out and build your website using this frame the entire time. One of the capabilities with the grid is a center column. So basically what this does is that if you have a row that doesn't have enough columns to fit the whole thing and you want one element to be centered, it's really easy to do that. So in our example, we have our container row and in this first one, we have a div class with the class of small centered. So what that means is that on small screen sizes, the column will be centered in the row. And then you can go about and do that for anything. So if you want it to be centered at all screen sizes, you just do centered, then medium, you do medium centered. And then in the third example, the nine centered small, the reason that's not centered is that you'd be looking at it on a screen size that's large. So it won't center itself until you shrink it down to a smaller screen. It's a really nice way to easily style and display your content. The next one is the collapse feature. Okay, so in this first example, our container row has a class of medium on collapse and large collapse. So on large screen sizes, there are two rows are going to be collapsed together. So there's going to be no margin between the two. But then when you shrink it down to a medium screen size or small, they have these things called gutters, which is just going to be your margins. So if you go about and do that on all of the columns in your website, you don't have to go back later and add that styling to your CSS. It's just something you don't have to worry about. It's really nice. Next is going to be your incomplete. You're going to want to use this a lot if you have user driven content. So for example, if you this first row, it has three threes, which does not equal nine, it's nine by does not equal 12. It's nine. So by default, if you don't have enough, your end child is going to automatically write a line. And then you're going to have that weird space and it doesn't look nice. And I hate it. So to remedy this, all you do is you add the class of end to your end child elements. So on the second example, as you can see the last medium three column has an end class. So then it's automatically left aligned just kind of helps organize some of that. You can also add advanced stylings in your settings.scss file. So I'll go over this a little bit more when I talk about SAS. So in this first example, we have a variable of row width. And the RAM calc by default is 1200 pixels. So all of your rows are 1200 pixels wide. And in this example, we set it to 1000. And then you have your column gutter, which I talked about earlier, basically the margins between your columns. By default, they're 20. And in this example, we set it to 30 wide. And then by default, you have 12 columns. And that's what this example still is. You can change it as many columns as you like. I've never used it, but you can change the amount of columns in each of your rows. You can even add your own, you can create your own row classes. So in your scss file, you would create your custom row class, and then add all of your variables, and whatever styling you'd like. But then back in your HTML, you would then reference the class name that you created as a bunch of customization as much customization as you would like. The biggest reason that I like using Foundation Press is that it's made responsive extremely easy. So basically, you can easily adjust the size of each column just by adding a class for each size. Foundation Press will then automatically adjust the columns to fit. So in this example, we have two columns, both with the same class of large six, medium six, small 12. And what that tells us is that on large and medium screen sizes, they're both going to be six wide. So that's half the screen and they're going to be next to each other. But then on small screen sizes, they're going to change to 12 wide. So they'll each be 100% width and on top of each other. So you can go through your whole website, and if you structure it that way with every column and all of your content, then once you're ready for responsive, it's all going to adjust for you. And you don't have to do all that styling and adjusting yourself, which is the reason it makes development so much quicker. All right. So now that I've shown you why you should use Foundation Press, I'm going to show you how to install it, because that's important. So there are a few things you should remember first. The first thing is MPM is going to be your package manager. And what this is, is it's the largest ecosystem of open source libraries available. But you will need to have no.js installed on your system. I've included a link to find all the download files. But I really recommend that if you're not a server tech and if you don't know how servers work, that you just submit a support ticket to ever manages your server. They're going to be able to install it easily themselves. Next is SAS. That is the CSS extension language that Foundation Press uses. I know it's kind of intimidating trying to think about a new language to learn, but it's pretty easy. And I'll go over some tips in a little bit. And then on my blog post, there's a whole article about how to use it. The next thing is Gulp. And that's going to be your task runner. What it does is that it automates a lot of repetitive tasks for you, and it will also minify your file. So that's going to help with website optimization. Finally, of course, is this text editor and everyone has their preferred one. I like Sublime, but that's totally up to you. I take a drink real quick, sorry. All right, before we get started with installing Foundation Press, you need to install Putty. And this is what you're going to use to SSH into your server and install Foundation Press and then upload files. So first you need to go to this link here, and I'll leave it up for a second so you can write it down, or you can refer to my blog post later. Once you're at this link under package files, you're just going to need to find the right file for your system. Then all you need to do is click on the correct one and run the installer. Mac users can use Terminal, but I am not a Mac user, so I've never used Terminal. My bad. Using Putty is also super easy. All you need to do is find the program in your files, and I highly suggest adding it to your toolbar because you're going to be using it a lot. Then once you open it, you're going to see this screen here. In this first section, you're going to enter your host name or your IP address of your desired site, and then the correct port, and you'll click on open. And then the next screen, you just enter in your FTP information to connect to the site, and you use the CD command or change directory command to access your WordPress directory. I've given you an example of what that command looks like, so you just go to your WordPress folder, WP content, themes, and then wherever your file, your theme file is. This is the Foundation Press GitHub link. Again, this is back in my blog post, and you can find it there. To install Foundation Press, go ahead and open up Putty, and then connect to your desired site. Once you've connected, back on the link, you're going to clone the repository and install with MPM. To do that, you do the CD command, and then you get to your WordPress themes directory, then you hit enter, and then you'll do a git clone of the Foundation Press GitHub link, that one right there. Hit enter, then you do a change directory to go to the Foundation Press directory, and then you will install that entire directory. That'll take a couple minutes, but once it's done, then you can log into your WordPress site, then click on appearances, and there'll be a new theme with this cute little yeti guy. He's great. He's adorable. All you have to do is then just activate the theme, and you're ready to go. Super easy. The most difficult thing is that people sometimes don't like working with SSH in the command line, but it's very easy. All right, now I'm going to show you how to use it, because that's the most important part, probably. When you're ready to start working on your theme, connect to your server through Putty, and then I've added the change directory command to get to where you need to go. The file structure for all Foundation sites is pretty similar to what you'd see in a normal theme. You have your main theme file, so you're going to be your headers, your footers, archives, singles, things like that. Then you have your page templates directory, which is going to be the WordPress templates. Then you have your source directory, and then your template parts directory. A basic page setup is going to look a little like this. I'm sorry if it's hard to see. You can access my blog post later and see it. Basically, in this first example, we have our very first row. Within that row, we have a div with the class of small 12, medium 9, and then large 9. Then the next one is small 12, medium 3, large 3. 9 plus 3 is equal to 12. Basic math is fun. Then the second row, we have a small 12, medium 4, large 4 column, and then a small 12, medium 8, large 8 column, and that also equals 12. That's basically the template you're going to follow. You're going to have a row. Within that row, you can have as many columns as you like, so long as it equals 12. What that's going to look like, obviously the styling will be different, is that we have our first column of 9, second column of 3, and that's our first row because it's 12 now, and then our second row, we have a column of 4 and a column of 8. Just continuing following 12, and if you do that, then you're easily going to be able to organize your content, and then when you get to responsive, it's just going to automatically adjust all of it for you. I'm going to quickly go over setting up page templates in Foundation Press. It's basically the same, but you'll go to your page templates directory, create a new one, and then you'll have the template name of whatever you want it to be, and then you have your rows and your columns. Once you upload that, you can go into WordPress, and then under page attributes for a page, you'll just select the correct template, and there you go. It's pretty easy. Next is going to be the source directory, and it's going to be a really important one. This is where you're going to have all of your images, your JavaScript files, and your SCSS files. So SCSS or SAS, it's pretty easy to learn. Under this SCSS directory, you have other directories as well. The first one is your components directory, and in there you're going to have things like your button templates, your featured image template, your link template, so all of your stylings for smaller elements such as that will go there. Next is you're going to be your global directory, and there you'll do things like accessibility, overrides, colors, then you have your modules directory, and this will be things such as your headers, your footers, your navigations, or your sidebars, and then templates. So not bad. This will be where you put the style templates for each of your page templates, and it'll go over a little bit while you want to add style templates. So using SAS is pretty easy. It's actually very similar to CSS, and I'm not going to go over everything, but two of the most important things you need to remember is that with SAS, you can use variables. So it's a way to store information you want to reuse. So in this example, we have a variable of font stack that's going to be your font family, and then we have it as Helvetica. So anytime you want to use the Helvetica font, instead of typing it out, you just have to then reference back to the variable you created. Same with primary color. This is the one you use a lot. You can set a primary color, and then every time you want to use that hex code, then you just reference back to that variable. Super easy. So yeah, the next thing is nesting, and all this is is a visual hierarchy for your CSS selector. So this is going to be a really easy way to organize all of your styles. So instead of having like a nav-ul, nav-align, nav-a, separate lines, you can just have one parent nav, and then every element under that parent you can just put in the nest. Super easy. You can also, in your settings.scss file, you can set breakpoints. So this will be for your responsive. So if you want something to be mobile at a certain size, this is where you'll set it. So what you do is you create a breakpoints variable, and then you do a small size, medium size, large size, however you want that to be. It's really nice. And then some default style rules. I'll give you some examples. This is the variables I talked about earlier. So in the first example, we have a variable for each different social media, and then the hex code that goes with it. And then the second example is nesting and variable. So we have a variable for header styles, and then during, on small screen size, it changes the styles for all of your headers pretty automatically, and then mediums. So it's really nice. It's a really nice way to easily add all these styles without having to go back. So earlier I'd mentioned that there's a bunch of templates. So templates for everything, like your pages, your links, all of that. The main reason you're going to want to use these SCSS templates is that it's going to help with website optimization. With normal CSS, a lot of times you would have just one big file with all of your style sheets, but if you add the templates, then the site is only going to load the styles that you need instead of all of them. It's really nice. One thing to remember is that if you are using FoundationPress, your styles will not get applied unless you do an MPM run command within your putty. All you do is type MPM run, hit enter, and then what that's going to do is it's going to automatically minify all of your style sheets and apply it to the website. All right. So now that I've kind of shown you how to use FoundationPress, another cool thing that it offers is this kitchen sink. So what this is, is a whole library of pre-built elements that you could easily add to your site. There's tons of them. I'm going to go over the four that I use commonly. Okay. You can find all of the elements at this link here. I've also added that to my blog post. There's also a whole list of all of them within your FoundationPress theme. Under page templates directory, you'll see a file that says kitchen sink.php. And what you can do is you can just copy and paste from that file and add it wherever you'd like on your website and then customize it as you need. The first one and the one that I use most is an equalizer. So basically what this does in this example, we have a row with four columns. And since I have equalizer set, say if that third column had way more content than the other two, normally what it would do is that one would just be larger. But with equalizer, it's going to make sure that all of your columns in your row are going to automatically be the same height. So it looks a little more professional. This is really easy to set up. How you add this is that in your container class, you just add the attribute of data equalizer. And then each column within the container, you add the attribute of data equalizer watch. So what this is going to do is it's going to watch for the heights of all the other ones with it and then adjust them automatically. Really nice. Just someone's taking a picture. I don't want to. Yeah, no problem. Next is an accordion. I'm sure we've all used accordions are just a really good way to organize your content. Pretty easy to set up. So what you do is you have an unordered list with the class of accordion and the attribute of data accordion. And then each list item within that list, you have the class of accordion, accordion item, and the attribute of data accordion item. And then you just continue adding items as you need. And if you'd like it to be automatically open on one of the items when they load, all you have to do is add the classes is active. If you don't just all be closed by default. Pretty easy. Next is reveal. This is going to be an easy way to add a pop up window to your website. That's what you want. So you have the container div with the class of reveal. And you can have your ID set to whatever you like. This one is example modal one. You just need to remember that because we'll reference back to it later with the attribute of data reveal. And then you can have whatever content you want inside of that modal. Then you're going to want to add your button class. I mean your close button. To do that, you just do a button with a class of close button and the attribute of data close. Then you can go ahead and add labels if you want. And then whatever you want the button to look like. Once you have that made, you need a way to open the pop up menu. To do that, you just create a button with the class of button and the attribute of data open and it needs to equal whatever you set your ideas. And that'll create a cute little button for you. You click on it and then you have a cute little open box. It's really nice. It's not cute. I mean, I'm not sure why it's so cute. Whatever. Next is going to be a tabs. This is another good way to organize your content. To create a tabs box, first you need to make the navigation. So to do that, you just do an unordered list with the class of tabs, the attribute of data tabs, and then ID, this one is example tabs. You can set it to whatever you like. Just remember it for later because we'll reference back to it. And then each list item within this list has a class of tabs title. And then a link with an attribute of data tabs target equals panel one, panel two, as many panels as you want is sequential. And then links to hashtag panel one. And that's ruined me. And then you're just going to contain you one, two, three, four. And then to make the content for each of your tabs, you do a container div of class equals tab content. An attribute of data tabs content equals the ID of whatever you set your list as. And then each div within that content has a class of tabs panel and ID back to the link that you set earlier for each list item. So you just make sure they all reference each other. And you got cute little tabs, but it's nice. All right, so now I'm going to kind of do a humble brag and show you some of the things that we've been able to make with Foundation Press. The first one is move it for autism. This is a site that's going to be launching soon. You guys should go check it out because I'm going to shamelessly promote myself. It's a really nice site. What it is, it's a donation site where people can easily create their own accounts and then go and add activities and then raise money and share it with friends. They can easily make teams, events, all kinds of things. And it's raising money for a really good cause. The next one is Rosehill Veterinary Clinic. This is a local vet clinic. We created online adoptions for them, vet tips, and a staff directory. Plus it's just really adorable. I really love this site. It's animals. The last example I'm going to show you is La Hacienda. It's a Mexican restaurant that we've been working with. We created a way for them to easily add printable coupons that they could customize and then set when they expire. They have an online menu. They have specials calendars. And with all of these examples, the biggest thing with them is that we've been able to drastically reduce our development time because of foundation press. That's about all I have for you guys today. Does anyone have any questions? Thanks. You had your hand up first. She asked if it was something, it's kind of a child theme or is it something you make your own? It's kind of, it's not supposed to be a child theme. It's a standalone theme that you install and has all the files for you and then you go ahead and customize it from there. I've never actually had to update it. We just update plugins from there. They really don't send out updates very often. Okay. So she's asking about the contents because we have all the... What we do, so like if you want clients to easily add content, we also, so for that, we use a plugin called Advanced Custom Fields. That's a whole different ballgame. And what it does, it easily adds custom fields that you can reference back to in the code. So that's what we usually do for stuff like that is we'll use custom fields that they can go in and edit and then it'll change all that for you. Highly recommend that plugin. By the way, we did a talk on it two years ago. Any other questions? No? No one? Cool. Sweet. Well, I hope you guys... Oh yeah, in the back. The one that we use most commonly is WooCommerce. We haven't used it a lot with Foundation Press just because we don't have a lot of e-commerce ones. But from what I can tell, Foundation Press is extremely flexible. So it's going to be able to work with those e-commerce frameworks pretty easily. I think it supports e-commerce. Yeah. It's a good question. I would imagine it does since it's a site-wide... All right, I hope you guys learned something and you enjoyed it and you're going to go home and use Foundation Press because it's amazing.