You need CSS to control the layout, typography, and colors of your Jekyll website. In this tutorial, you will learn how to add and use CSS in Jekyll.
Creating a CSS file
To create a new CSS file in a Jekyll project, follow these steps:
- Navigate to the root directory of your Jekyll project.
- Create a new folder named
assets. Insideassets, create another folder calledcss. - Inside the “css” folder, create a new file named
main.css(or any other name you prefer) - Open the
main.cssfile in your preferred text editor. I usually use Sublime Text or VS Code. - Add your CSS rules and styles to this file, such as font-size, color, margin, padding, and so on.
Now, you have your CSS file with the code. Next, you need to tell Jekyll the location of the CSS file.
Link CSS file To Layout
Once you’ve created your CSS file, the next step is to link it to your HTML layout template. To do this, follow these steps:
- Open your main HTML layout file (usually located in the
_layoutsfolder). In most instances, its thedefault.htmlfile. - Link to your CSS file inside the
<head>section of your HTML file, like this:
<link rel="stylesheet" type="text/css" href="{{ "/assets/css/main.css" | relative_url }}">
- Save your HTML file
Now your CSS file is linked to your Jekyll website, and the styles you defined in the CSS file will apply to your website’s HTML elements.
Organizing CSS Files
Organizing CSS files is essential to make your code more readable, maintainable, and scalable.
You can organize your CSS files in several ways, such as:
- grouping them by functionality or page
- creating a global file for common styles
- using a naming convention that reflects the content’s purpose
In Jekyll, you can organize your CSS files by creating subfolders inside the “css” folder. For example, you can create a:
- folder named “components” for reusable UI elements
- folder named “pages” for page-specific styles
- folder named “vendor” for third-party libraries
This approach helps you keep your code organized and makes it easier to find and update specific styles.
Using SASS with Jekyll
You can also use SASS in addition to using the methods above to organizing your CSS.
By default, Jekyll come bundled with jekyll-sass-converter plugin. This means you don’t need to install anything to start using SASS with your Jekyll website.
Jekyll automatically compiles SASS files into CSS when you build your Jekyll site. SASS also offers the option to minify CSS which can significantly improve the website’s loading speeds.
