dan
/
jekyll
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update 07-assets.md (#8449) 

Co-authored-by: Frank Taillandier <frank.taillandier@gmail.com>
This commit is contained in:
Rachel Cheyfitz - Owner 2020-10-29 19:07:32 +02:00 committed by GitHub
parent 2c18ddcd80
commit 5ec7a8e289
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/_docs/step-by-step/07-assets.md
View File

@ -16,11 +16,15 @@ Jekyll sites often use this structure to keep assets organized:
│ └── js
...
```
So, from your assets folder, create folders called css, images and js.
Additionally, directly under the root create another folder called '_sass', which you will need shortly.
## Sass
Inlining the styles used in `_includes/navigation.html` is not a best practice,
let's style the current page with a class instead.
Inlining the styles used in `_includes/navigation.html`(adding or configuring within the same file) is not a best practice.
Instead, let's style the current page by defining our first class in a new css file instead.
To do this, refer to the class (that you will configure in the next parts of this step) from within the navigation.html file by removing the code you added earlier (to color the current link red) and inserting the following code:
{% raw %}
```liquid
@ -46,12 +50,12 @@ First create a Sass file at `assets/css/styles.scss` with the following content:
The empty front matter at the top tells Jekyll it needs to process the file. The
`@import "main"` tells Sass to look for a file called `main.scss` in the sass
directory (`_sass/` by default which is directly under root folder of your website).
directory (`_sass/`) by default which you already created directly under the root folder of your website).
At this stage you'll just have a main css file. For larger projects, this is a
great way to keep your CSS organized.
Create a Sass file at `_sass/main.scss` with the following content:
Create the current class mentioned above in order to color the current link green. Create a Sass file at `_sass/main.scss` with the following content:
```sass
.current {
@ -83,6 +87,6 @@ Open `_layouts/default.html` and add the stylesheet to the `<head>`:
The `styles.css` referenced here is generated by Jekyll from the `styles.scss` you created earlier in `assets/css/`.
Load up <a href="http://localhost:4000" target="_blank" data-proofer-ignore>http://localhost:4000</a>
and check the active link in the navigation is green.
and check that the active link in the navigation is green.
Next we're looking at one of Jekyll's most popular features, blogging.