Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:13Length:1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Add CSS and Optimize

Grav has some excellent built-in functionality for handling CSS files. In this lesson we’ll add a stylesheet to your theme, load in a Google font, and then set Grav to combine and minify all CSS.

Related Links

3.3 Add CSS and Optimize

Hey, welcome back to Up and Running with Grav CMS. In this lesson we're gonna start integrating some CSS into our site. We're gonna be integrating three different style sheets. One is the style sheet that's gonna control the overall look of the site. The second is a Font Awesome style sheet that's going to add some font icons into our site. And the third is a Google Fonts style sheet that's going to give us a custom font for our site. We're gonna pull all of these in using the in-built Grav system for managing CSS. And then we're also going to use that system to automatically optimize our style sheets. Now we're not actually gonna be writing any CSS in this course so that we can keep the focus on learing about Grav CMS itself. For that reason, you get the completed style sheet as part of your access to this course. So grab yourself a copy of the source files for this course, extract them, and then inside there go into the completed theme-from-scratch folder, into the CSS subfolder. And then copy both of the style sheets that you find there. And then the theme that you were working on, create a new folder, name it css and then paste in the two style sheets. Now because the Font Awesome style sheet is working to integrate an actual set of font files. In the source files you're also need to go back up one level, copy the fonts folder there, and then paste into your theme alongside the CSS folder. Okay so now in our base template, in the head section, we're gonna be using a prebuilt tweak function that's gonna load in our CSS in a managed fashion. So we'll add curly brackets and percentage, and then inside that we're gonna say do. And then assets to let the system know that we're gonna be loading in some asset files, and then .addCss. So that's all lowercase, except for the C, which should be uppercase. addCss is a function, so we're gonna need a set of brackets after that. And then in between the brackets, we're gonna need to specify the location of the style sheet that we're trying to bring in. Now Grav has a really cool shorthand that allows you to target any files that are inside your theme without needing to use any sort of complex querying to find out what the path of your theme is. All you have to do is add a theme://. Now you can target any folder or any file that's inside your theme. So in our case we wanna target the css folder, so we'll add that in. And then we're gonna load up the Font Awesome style sheet first, so we'll also add font-awesome.min.css. And next up we're gonna load in our main style sheet for our site, so just copy the line that we just created and paste it in. And now we're gonna have it load in our main style sheet, which is named custom.css. And by the way, that is the naming convention that's used in Grav sites, that your main style sheet is called custom.css. And then finally we wanna load in our Google font. In this case we're loading in an external style sheet rather than an internal style sheet. So we wont need that theme://, so we'll get rid of that, and then we'll just paste in the URL of the Google font that we wanna use. So none of these lines have actually added the style sheets that we're trying to use into our theme yet, but basically added them to a queue that is ready to be output. So to actually output those style sheets, you remember that we need the double curly braces any time you're trying to output content. So we'll add that in, and then to make our style sheets output we're gonna add assets.css[]. And that css function is gonna use Twig's back end to properly handle the loading of the CSS files. So now if we go back and we refresh our front page, you can see that we've got some CSSs loaded, giving us some basic styling over the text that we have on the homepage right now. Now the addCss function that we use to load those individual style sheets, that's just one of the asset loading functions that you can use in a Grav CMS site. You can also add an entire directory of CSS files at the same time with the addDirCss function. And if you need to load JavaScript it's the exact same process. So you would use the exact same code, but instead of saying addCss you will say addJs. And then to output your JavaScript,nstead of saying assets.css you'll say assets.js. So I'll give you a link to this docs page, and you can have a closer read at how to handle asset loading in a Grav CMS site. So now all our style sheets are loading, but there's still one more step that we need to complete, and that is to make sure that they're loading in an optimized fashion. So if we inspect the code of our site right now and we look in the head section, you can see that we have these three files being loaded individually. But Grav has an in-built function that allows you to both combine your CSS files or your JS files and minify them at the same time. Now because we used Grav's functions to load in our CSS rather than just using normal link elements. That means that we can tap into these optimization functions just by flicking a switch in the admin panel. So we'll go into the Configuration section, and then if we scroll down we find this Assets section. All we have to do is switch CSS pipeline to Yes, and then that allows us to access all of these settings that you can see listed here. So for example, we have CSS minify set to Yes, CSS rewrite set to Yes. Now you can go through these options and you can set them to your liking. And you can see also here, you have the same type of functionality available for JavaScript. So we'll save that, and now if we go back to our homepage and refresh. In the head section here you can see we just have the one CSS style sheet being loaded then instead. And if we copy the location of that style sheet, we just grab this whole string and we'll past it onto the end of our local host address. You can see that the code that combined CSS has also been minified, so all of the white space has been stripped out, so that can load as efficiently as possible. All right, so that's our CSS loaded in and set to be optimized automatically. In the next lesson, there's a little bit more that we need to do with the base template before we can move on to doing things like creating a blog and setting up a modular homepage. So we're gonna go through and make those additions to the base template in the next lesson. I'll see you there.

Back to the top