Skip to content

Latest commit

 

History

History
156 lines (143 loc) · 4.77 KB

css-concatenation.md

File metadata and controls

156 lines (143 loc) · 4.77 KB
Raw
layout title desc hide_markbot extra_tutorials goal fork steps
lesson
CSS concatenation
Learn how to automatically combine many CSS files together into a single CSS file for better performance.
true
title url
Performance
performance
title url
Advanced performance
advanced-performance
title url highlight
Advanced performance checklist
advanced-performance-checklist
true
title url
Jekyll terminal guide
jekyll-terminal-guide
title url highlight
Jekyll cheat sheet
jekyll-cheat-sheet
true
title url
Advanced performance slide deck
/courses/web-dev-5/advanced-performance/
no_image before notes
true
We’re going to use Jekyll to combine many CSS files into a single file automatically to improve our website loading time. **After you’ve followed along with this tutorial apply the same technique to your own portfolio website.**
label text
Type it, type it real good
Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!
title before folders after notes
Set up the project
The basic starter repo you just forked and cloned has the CSS files we need inside it—we’re going to work from that.
label type
css-concatenation
folder
label type indent
_layouts
folder
1
label indent
default.html
2
label type indent
css
folder
1
label indent
grid.css
2
label indent
main.css
2
label indent
modules.css
2
label indent
type.css
2
label indent
_config.yml
1
label indent
index.html
1
**Start Jekyll in this folder.** Open the `css-concatenation` into your code editor.
label text
Naming conventions
Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions).
title before folders code_before code_lang code_file code after
Create new primary CSS
We need to make a new CSS file that Jekyll is going parse. Generally Jekyll ignores CSS files because they don’t have the `---` at the top. So, let’s make a new file named `site.css`:
label type
css-concatenation
folder
label type indent fade
_layouts
folder
1
true
label indent fade
default.html
2
true
label type indent
css
folder
1
label indent fade
grid.css
2
true
label indent fade
main.css
2
true
label indent fade
modules.css
2
true
label indent
site.css
2
label indent fade
type.css
2
true
label indent fade
_config.yml
1
true
label indent fade
index.html
1
true
In the CSS file we’re going to write this code:
css
css/site.css
--- --- {% include_relative modules.css %} {% include_relative grid.css %} {% include_relative type.css %} {% include_relative main.css %}
**The really important thing is that these files are in exactly the same order as inside `default.html`**
title before code_lang code_file code lines after
Link layout to single CSS
The final step in this process is to link to the single, concatenated CSS file from our `default.html` file.
html
_layouts/default.html
⋮ <title>{{page.title | escape}}</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="css/site.css" rel="stylesheet"> </head> <body> ⋮
num fade
2-3
true
num fade
5-6
true
num text
4
There’s only one CSS file linked from our layout now.
Now our `default.html` only links to a single CSS file. That single CSS file (`site.css`) represents a combined (concatenated) version of all our CSS together. *Refresh your browser to make sure everything still works…* **And you’re now ready to get much better results on the performance tests.**
title before
Apply to your portfolio
Now that you understand the technique and done it once, **apply the same thing to your own portfolio** to make it harder, better, faster & stronger.