On today’s episode we are going to talk about CSS. Some tricks, some tips, and some cool things that you can do with CSS right here on Your Website Engineer podcast, episode No. 404.

Hello, and welcome back to another episode of Your Website Engineer podcast. My name is Dustin Hartzler and I’m excited to be here with you today because we’re gonna be talking about one of those subjects that I aspire to learn more about. And I’m always clipping articles and learning about training and just trying to figure out how I can best learn CSS. The CSS stands for cascading style sheets. And we’ll get to this in just a minute, but I do a little bit of CSS and I help customers with CSS, but it’s basically hiding things or moving things on a WooCommerce site. And so, I don’t get to use a lot of these cool things. So, I thought I’d talk about them today in today’s show.

I’ve got three announcements and a plugin to share with you. The first announcement is all about Gutenberg and the Classic Editor. And so, you may have been listening to this podcast for a while or heard other WordPress podcasts. And if you haven’t been living under a rock under the last couple months, you may have heard of this thing called Gutenberg. And Gutenberg is the new visual editor, is the new way to create posts and content and pages and custom post types. And all the content that we create on our WordPress sites, well, we’re gonna start doing this with this new editor, called the Black Editor. Also codename Gutenberg.

But one of the things that customers or people that are very discouraged because of the lack of – or it’s just so different. That’s the big thing. We’re moving towards a new future and things are changing. They’re making it easier, but to make things easier there is gonna be some sort of learning curve.

But there was a – Matt Mullenweg, who is the CEO of Automatic and has been one of the ones that is kind of the driving force behind this Gutenberg project, has confirmed – and this is kinda what the article is and there’s a link to it from WP Tavern. But he’s confirmed that the Classic Editor – so, there’s a plugin called the Classic Editor that will allow you to install this. And then you can use the regular editor that we’ve all grown accustomed to loving. And he said that there will be support for this Classic Editor, will be available for many years to come. So, this is a relief to those who fear that the WordPress would drop support for the old editor after a year or two.

And Matt said on a recent comment in a recent post said that he loves that people are using the Classic Editor. There’s an infinite number of ways to use WordPress and not all plugins and themes and everything will be ready for Gutenberg when 5.0 is released. The Classic plugin will allow people to still be able to update core and stay current with releases. And with a click of a button they can try Gutenberg out again in the future if they want to.

It’s also trivial to maintain because Gutenberg also uses TinyMCE, which the Classic Editor uses. And we’ll still get improvements and updates to the TinyMCE. He says, “I won’t say forever, but I don’t see any reason why we can’t main the Classic edit screen for many years to come.” So, if you wanna read the whole article, find the link in the show notes for episode No. 404.

The other news I wanna share with you today is about WPCampus. And the 2018 videos are now available to watch. This was at a conference held back in July at Washington University in St. Louis, Missouri. And it was a conference for educators, staff, and those in higher education. They all gathered to learn how WordPress can be used and how it is used in higher education environments.

And so, if you weren’t able to attend and/or watch the livestream, now you can watch all the sessions for free. And so, there’s a link in the show notes for that. So, you can go, and you can watch these. And it’s gonna be very much like WordPress.tv and how all the word cam presentations are recorded and uploaded there. All of the talks were done the exact same way. So, that is for WPCampus, not to be confused with WP US, which is the WordCamp US that’s coming up in December in Nashville, Tennessee.

And the last thing that I wanna share with you today is kind of a – it goes along with Gutenberg, but WordPress has now been forked and it has been forked to be called ClassicPress. And what forked means is basically taking all the code and duplicating it and calling it something else and then keeping it updated as something else.

And so, this has happened in the past when WordPress has made changes that weren’t super popular with the community. People have forked WordPress and called it something else and then just not added those features. ClassicPress is essentially WordPress 4.9 without Gutenberg. And so basically it is gonna be a community-lead project and it’s gonna continue the way of WordPress, but without Gutenberg.

Now, like I said, this happens regularly, but it doesn’t necessarily hold up. The people that have forked this will find out in the future that it is very hard to maintain a huge Open Source project like WordPress and it’s gonna be very hard to keep the two paths congruent. So, when new features are added to WordPress, then it’s gonna be very hard to add them into ClassicPress.

So, I just wanted to say that it’s out there. If you’re very unhappy about Gutenberg, you could go the route of ClassicPress. I won’t spend any more time talking about it in any episode ever, but – since this is a WordPress show, but I just wanted to show that since it is Open Source, anybody can do anything with the software. And so, some folks have created ClassicPress out of WordPress. So, that is the news for the week.

The plugin that I wanna share with you today is called Admin Live Search. And it is a plugin that allows you to live search pages and posts in the admin area as you type inside the internal WordPress search. So, if you go to a – if you’ve got hundreds of posts and you go to the admin – or you’re in the admin section where you see all of your posts and you start typing in the – you start typing episode No. 302 is what I wanna look up and then nothing pops up until you hit enter and then the whole page has to refresh.

Well, as you do – as you have this plugin, the Admin Live Search, what it does is as you’re searching it drops down suggestions. And so, you can click on that and you go directly to that post. Very, very handy and it speeds up navigating through the backend of your site very much. And so, if you’re interested in something like this it’s called Admin Live Search. You can find it in the WordPress repository under Admin Live Search. Or, as always, there’s a link in the show notes. We’re episode No. 404.

After I got this whole show outlined I realized I should have done something more fun. Like I create the – how to create a 404 page because it’s episode No. 404. But nonetheless, we’re talking about CSS today. And I don’t get to do a lot of CSS regularly. And CSS is basically the visuals that are behind your site. So, any website can look any different way and it’s all based on CSS. CSS stands for cascading style sheets. And it was a way that web developers created so that you could give a certain element style and then that same element would appear styled the same way across your entire site. So, if you wanna change all your buttons from blue to orange you can do that with changing some CSS.

And so, it’s really powerful and you can do a lot of things. And there are some really cool things that are coming with CSS. But today I just wanted to give you a handful. I’ve got about seven different places where you can find or learn about CSS and stay abreast of what’s happening in the CSS space.

The first thing that I wanna share is something called Font Awesome. And you can find that more at fontawesome.com. But this is basically a library. It’s got 3,600 icons in it and they are – there are 1,200 that are free. There are some premium ones that you can pay for if you buy a license for Font Awesome. But basically, what it is is you can install the Font Awesome plugin. There’s a WordPress plugin. And then you can start adding these icons. And they are beautiful icons. Let’s see. What’s the word? You can use them. They look awesome on every type of site, whether it be on a mobile site or a big computer, they are very – what’s the word? Like vector-type images. They’re not really vectors, but that’s the way that they work. And you can style them with CSS.

And it’s just a couple lines of code that you can add. And so, it’s really cool what you can do with these. And I use icon fonts on the social icons on yourwebsiteengineer.com. And so, what happens is you add a line of code and it automatically brings in the Twitter icon or the GitHub icon or whatever. And then you can style them like any other CSS. Which is really cool because if you were just grabbing an image, like a PNG file or some sort of JPEG, you can’t style that with CSS. So, you’d have to have the right color and things like that.

Vector icons like this are great when you wanna have hover over states or you wanna do different things when you’re hovered or change color or spin or do anything and you can do all of this with Font Awesome icons. And so, if you need to add one of these to your menu you can do it, but this is a resource. And again, most of these things today are just resources. Things that you can learn about CSS or places where you can add some cool things or enhancements to your website.

So, Font Awesome is one. And then the other thing that I have is a GitHub link. It is called Font Awesome Automation. And what this is is it allows you to automate some of these icons. So, if you wanted to – if you wanted to spin an icon when they’re hovered over or if you wanted them to float. If you wanted them to go up and down or if you wanted them to shake when your mouse is over them, you can do all of that. And so, I’ve got a link in the show notes for these animations where you can go, and you can take a look and see well some of the things that you can do.

It’s really cool and it’s all possible with CSS. You don’t have to write this fancy Java script. Java script can do some really cool things. And CSS is kinda catching up and it can do some really cool things as well. And automating these icons is something that you can definitely do with CSS and Java script, but it’s a lot easier to implement with CSS. So, I encourage you to go and look at the examples there.

So, those are the first two, Font Awesome and Font Awesome Animation. The next item that I have on my list is something that I found today that was really kind of cool and it is called csslayout.news. And it’s a weekly collection of tutorials, layouts, and information about CSS all over the web. And it’s kind of a curated post.

They’re on episode No. or issue No. 161. There are a few different articles. In this most recent article there’s – they cover column-gap and row-gap in Flexbox. They talk about advanced effects with CSS in blend modes. They talk about web performance and solving container queries. All these things. So, if you’re interested in learning more about CSS, kinda leveling up your skills, then this is one thing that you want to read regularly. You can subscribe, and you get the post delivered to your inbox every week. And so that’s really nice or you can just read them on the web.

Like I said, there are 161 issues. And so, there’s a lot of content there. And again, it’s a lot of curated content from all over the internet. And so, if you find an article that, “Oh, this site looks good,” then you could follow that article and you can follow that site to get more CSS news. So, that’s csslayout.news.

The next piece of news or the next thing that I really like is called cssreference.io. And it is a free visual guide to CSS. So, you can learn by example. And so basically you can click on any of these – the CSS properties and you can learn how they work. And so, the first one is – let’s look at a border.

So, border is one. We can look at border left. And so, it shows that how you can define border left. So, you can see it is border, dash, left, colon and then you can put the width, the style, and the color. So, you can say border left, colon, four pixels doted orange. So, that’s gonna give a four-pixel wide dotted line on the left side of your container. It’s pretty cool.

And then on the right-hand side it shows a visual. So, on the left it shows, okay, here’s the CSS. On the right, here’s the visuals of what it actually looks like. And so, you can go through the probably a hundred or more different properties and see what it looks like.

So, you can see what opacity does. So, fully opaque is if you set the opacity to 1. If you set the opacity to 0, the element is fully transparent. And then you set the number from 0 to 1, anywhere in-between, and it will show and make it semi-transparent.

So, you can see that. You can see animation delay. You can see what always confuses me is border and margin. So, you can look at those and you can get a real good visual of, okay, border is this – or padding and margin. Those are the two that I always confuse. And so, it shows the difference between those and where those sections are and how you can properly give your content on your website both – whether it needs margin or padding.

And so that’s cssreference.io. Really cool. It’s got a lot of neat visuals in there and I know that this is one that I’m gonna be spending some time looking through. And just it’s a great resource because you can see how it works, but you can also see what’s available. How many times do you think, “Oh, I only use color and width and opacity.” And you use about half a dozen CSS properties, but there’s other ones out there like animation name or animation timing function. There is a background repeat. There is box sizing. There’s column gap. There’s column width. There are all kinds of grid properties that you can use. And so, this is a really good resource and I’ll be spending some time there.

Got a couple more here. The next one is – there’s an article here on CSS-Tricks talking about the complete guide to CSS Grid. But the whole website, CSS-Tricks – css-tricks.com, is a fantastic resource if you wanna learn anything in the CSS world. I know that a lot of times you Google how to do something and CSS-Tricks, their website comes up first. And it’s because the writers there are phenomenal, and they do a great job of explaining how everything works. CSS Grid is this most – is a new thing. It’s a very powerful layout. And it is a two-dimensional system, meaning that it can handle both columns and rows.

Flexbox was something else that was a one-dimensional system. But you work with grid layouts by applying CSS rules to a parent element which becomes the grid container. And then the elements of the child or the children elements which become the grid items. So, if you wanna have an understanding of how this new technology works when it comes to CSS Grid Layout, check out the article in the show notes for this. And it’s got it all broken down. It shows all these different columns and rows and how it all works.

Another great WordPress – or it’s not a WordPress course, but it is a course. It’s on CSS Grid. And I believe I mentioned this a few months ago. It came out. It’s by Wes Bos and he is a – he’s an online teacher, I guess. He’s a full stack developer and speaker from Canada and he’s taught more than 200 different classes at conferences around the world. But he also has tutorials like React for Beginners, ES for Everyone, Learn Node. There’s a Sublime Text Power User, JavaScript30. He’s got a lot of tutorials. Some of them are free and some of them paid. But this CSS Grid one is completely free. It’s because Firefox has sponsored his time to create the course and they offered it for free.

And so, it’s really cool. I started to watch this and just learning. But it looks like there’s 25 videos and it’s four hours of content. And it talks about how you can size things with CSS Grid and the different dev tools and how you place a grid item and how you name different things and all these things. It’s all built in. And so that’s at cssgrid.io.

So, if you’re interested in learning about in a video form. So, the last one at CSS-Tricks was more a text base so you can read through it. This is a video form and I really like Wes’s style and he does a really good job explaining things and I can really understand what he’s talking about. So, check out those 25 videos at cssgrid.io.

And then lastly, I have a link here for an episode or a link to a – it’s an article talking about how to use CSS in WordPress. And so, once we’ve learned all this fancy CSS you don’t have to actually dig into your code or add all this fancy CSS to a theme or a child theme. It talks about how you can go into the appearance area under the customizer in WordPress and you can add it in the additional CSS area. So, it’s a way that you can go, and you can get started with implementing this. It gives some great examples of going in and starting to add different things.

So, if you wanted to change your H1 tags, it shows how you can change those H1 tags across your site to – or your favorite color, like orange. And then it shows you how you can change them from black to orange. And then how you can change the font size from the default font to something much bigger. And then it talks about how you can change the background color of a widget. And so, you can just go through and you can start experimenting and typing this code and seeing what it does to your website. And it’s a cool tutorial and a very beginner level to show you exactly what CSS is and how you can work it and how you can add it to your WordPress site.

So, those are some of the resources. I know that there’s hundreds if not thousands more of CSS resources out there. And you can start with the very basic things, just changing font sizes, font colors, text, what font icons are being loaded and whatnot. And you can change borders, or you can make font bigger. There are tons of different things you can do. If you wanna hide things. I always do the display none and that just removes the item right from view. So, if it’s something that’s built into a theme or a plugin that I don’t like, display none and it will completely hide it and it’s a simple CSS that you can do very, very quickly. And I write that or help customers on WooCommerce write that pretty much daily.

So, that’s what I wanted to share with you today. Just CSS tips and tricks. And if you’re interested in learning more about CSS, CSS is one of those things that just can overall make your website what it is. You can go from a standard site – there used to be a website called CSS Garden. It was all the same HTML, which is all the markup behind your website, and then you could click different buttons and you could go and you could see what a website looked like with just changing the CSS. It is really cool. It’s very, very powerful and you can do a lot of things. And so, I want you this week to spend a little time checking out CSS and see how you can make small improvements or tweaks to your website with CSS.

And that’s what I wanted to share with you this week. Take care and we’ll talk to you again next week. Bye-bye.