8000 Get inline css option working, add back in the default layout gem, am… · omegahaunter/codejam.github.io@0287055 · GitHub
[go: up one dir, main page]
Skip to content

Commit 0287055

Browse files
daviddarnesdaviddarnes
committed
Get inline css option working, add back in the default layout gem, amend documentation
1 parent 644c1ba commit 0287055

File tree

5 files changed

+21
-20
lines changed

5 files changed

+21
-20
lines changed

‎README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@
2525

2626
## About
2727

28-
**Alembic is a starting point for [Jekyll](https://jekyllrb.com/) projects. Rather than starting from scratch, this boilerplate theme is designed to get the ball rolling immediately. Install it, configure it, tweak it, push it.**
28+
**Alembic is a starting point for [Jekyll](https://jekyllrb.com/) projects. Rather than starting from scratch, this boilerplate theme is designed to get rolling immediately. Install it, configure it, tweak it, push it.**
2929

3030
## Features
3131

3232
- Available as a **theme gem** and **GitHub Pages** theme
33-
- Simple and elegant design that can be used out of the box or as solid starting point
33+
- Clear and elegant design that can be used out of the box or as solid starting point
3434
- Tested in all major browsers, including **IE and Edge**
3535
- Built in **Service Worker** so it can work offline and on slow connections
3636
- **Configurable colours** and typography in a single settings file
@@ -128,9 +128,9 @@ Date format can be customised in the `/_config.yml` with the option `date_format
128128

129129
Alembic comes with a couple of options to enhance the speed and overall performance of the site you build upon it.
130130

131-
By default the built in Service Worker is enabled, and will work on a 'network first' method. That is, if there is no internet connection then the content the Service Worker has cached will be used until the connection comes back. It will always look for a live version of the code first. To disable the Service Worker set an option called `service_worker` to false in the `/_config.yml`.
131+
By default the built in Service Worker is enabled, and will work on a 'network first' method. Meaning if there's no internet connection the content the Service Worker has cached will be used until the connection comes back. It will always look for a live version of the code first. To disable the Service Worker add an option called `service_worker` with a value of `false` in the `/_config.yml` file.
132132

133-
Another option to speed up Alembic is to enable inline CSS, which is off by default. You can enable this by setting `css_inline: true` inside your `/_config.yml` file. **This is not working anymore after the upgrade to Jekyll 4.x**
133+
Another option to speed up Alembic is to enable inline CSS, which is off by default. You can enable this by setting `css_inline: true` inside your `/_config.yml` file. By switching to inline styles you bypass the use `/assets/styles.scss`, any custom styles will need to be added in `/_includes/site-styles.html` or in a new custom file.
134134

135135
Please note that these options aren't a "silver bullet" for making your site faster, make sure to audit and debug your site to get the best performance for your situation.
136136

@@ -145,7 +145,7 @@ There are a total of 4 different navigation types:
145145

146146
All navigations can 10000 be edited using the `_config.yml` file. To see example usage either look for the `Site navigation` comment within the `/_config.yml` file or see [the nav-share.html include](#nav-sharehtml).
147147

148-
If there are no items for the `navigation_header` or `navigation_footer`, they will fallback to a list of pages within the site. The `social_navigation` properties should either be one that is already in the list (so `Twitter` or `Facebook`) or simply `link`, this is so an icon can be set for the link.
148+
If there are no items for the `navigation_header` or `navigation_footer`, they will fallback to a list of pages within the site. The `social_navigation` properties should either be one that is already in the list (so `Twitter` or `Facebook`) or a regular `link`, this is so an icon can be set for the link.
149149

150150
## Using includes
151151

@@ -202,7 +202,7 @@ DesignerNews: "#2D72D9"
202202
Email: true
203203
```
204204
205-
_The first item is the name of the network (must be one of the ones stated above) and the second is the colour of the button. To remove a button just remove the line of the same name._
205+
_The first item is the name of the network (must be one of the ones stated above) and the second is the colour of the button. To remove a button remove the line of the same name._
206206
207207
### `video.html`
208208
A YouTube video.
@@ -242,7 +242,7 @@ This include has no options. This include will add a block of javascript to the
242242
### `site-before-start.html` & `site-before-end.html`
243243
Optional html includes for adding scripts, css, js or any embed code you wish to add to every page without the need to overwrite the entire `default.html` template.
244244

245-
**Example usage:** These are different to other includes as they are designed to be overwritten. If you create a `site-before-start.html` file in the `_includes/` the contents of the file will be included just before the closing `</head>` tag. If you create a `site-before-end.html` file the contents of the file will be included just before the closing `</body>` tag.
245+
**Example usage:** These are different to other includes as they are designed to be overwritten. If you create a `site-before-start.html` file in the `_includes/` the contents of the file will be included immediately before the closing `</head>` tag. If you create a `site-before-end.html` file the contents of the file will be included immediately before the closing `</body>` tag.
246246

247247
## Page layouts
248248

‎_config.yml

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ plugins:
2929
- jekyll-paginate
3030
- jekyll-seo-tag
3131
- jekyll-redirect-from
32+
- jekyll-default-layout
3233
- jekyll-feed
3334
- jekyll-commonmark
3435
- jekyll-include-cache
@@ -92,13 +93,7 @@ email: "me@daviddarnes.com"
9293
# google_analytics: ''
9394
# google_analytics_anonymize_ip: ''
9495
# service_worker: false # Will turn off the service worker if set to false
95-
96-
#### css_inline IS NOT WORKING #####################################################
97-
# After the upgrade to Jekyll 4.x this function is not working anymore. #
98-
# For this reason it's deactivate (it was activated by default in the old version. #
99-
# If you are able to fix it, please help. #
100-
####################################################################################
101-
css_inline: false # Will insert all styles into a single <style> block in the <head> element and remove the style <link> reference
96+
css_inline: true # Switches to placing styles in the <head>, note that this will skip 'assets/styles.scss' and start using '_includes/site-styles.html' instead
10297

10398
# 8. Site favicons & manifest icons
10499
favicons: # Favicons are also used in the manifest file. Syntax is 'size: path'

‎_includes/site-styles.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
{% for item in site.pages %}{% if item.styles == true %}
2-
<style>{{ item.content | scssify | strip_newlines }}</style>
3-
{% endif %}{% endfor %}
1+
{% capture styles %}
2+
@import "alembic";
3+
{% endcapture %}
4+
<style>{{ styles | scssify | strip_newlines }}</style>

‎alembic-jekyll-theme.gemspec

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ Gem::Specification.new do |spec|
2121
spec.add_runtime_dependency "jekyll-paginate", "~> 1.1.0"
2222
spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.6.1"
2323
spec.add_runtime_dependency "jekyll-redirect-from", "~> 0.16"
24+
spec.add_runtime_dependency "jekyll-default-layout", "~> 0.1.4"
2425
spec.add_runtime_dependency "jekyll-feed", "~> 0.15"
2526
spec.add_runtime_dependency "jekyll-commonmark", "~> 1.3.1"
2627
spec.add_runtime_dependency "jekyll-include-cache", "~> 0.2"

‎index.md

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,18 @@ excerpt: "Alembic is a starting point for [Jekyll](https://jekyllrb.com/) projec
88
layout: < 9E81 span class="pl-s">page
99
---
1010

11-
Alembic is a starting point for [Jekyll](https://jekyllrb.com/) projects. Rather than starting from scratch, this boilerplate is designed to get the ball rolling immediately. Install it, configure it, tweak it, push it.
11+
{% for page in site.pages %}
12+
<a href="{{ page.url }}">{{ page.title }}</a>
13+
{% endfor %}
14+
15+
Alembic is a starting point for [Jekyll](https://jekyllrb.com/) projects. Rather than starting from scratch, this boilerplate is designed to get rolling immediately. Install it, configure it, tweak it, push it.
1216

1317
{% include button.html text="Fork it" icon="github" link="https://github.com/daviddarnes/alembic" color="#0366d6" %} {% include button.html text="Tweet it" icon="twitter" link="https://twitter.com/intent/tweet/?url=https://alembic.darn.es&text=Alembic%20-%20A%20Jekyll%20boilerplate%20theme&via=DavidDarnes" color="#0d94e7" %} {% include button.html text="Install Alembic ⚗️" link="https://github.com/daviddarnes/alembic#installation" %} {% include button.html text="Tip me $5 💸" link="https://www.paypal.me/daviddarnes/5usd" color="#333333" %}
1418

1519
## Features
1620

1721
- Available as a **theme gem** and **GitHub Pages** theme
18-
- Simple and elegant design that can be used out of the box or as solid starting point
22+
- Clear and elegant design that can be used out of the box or as solid starting point
1923
- Tested in all major browsers, including **IE and Edge**
2024
- Built in **Service Worker** so it can work offline and on slow connections
2125
- **Configurable colours** and typography in a single settings file
@@ -87,7 +91,7 @@ _(deprecated, not recommended)_
8791

8892
## Customising
8993

90-
When using Alembic as a theme means you can take advantage of the file overriding method. This allows you to overwrite any file in this theme with your own custom file, simply by matching the file name and path. The most common example of this would be if you want to add your own styles or change the core style settings.
94+
When using Alembic as a theme means you can take advantage of the file overriding method. This allows you to overwrite any file in this theme with your own custom file, by matching the file name and path. The most common example of this would be if you want to add your own styles or change the core style settings.
9195

9296
To add your own styles copy the [`styles.scss`](https://github.com/daviddarnes/alembic/blob/master/assets/styles.scss) into your own project with the same file path (`assets/styles.scss`). From there you can add your own styles, you can even optionally ignore the theme styles by removing the `@import "alembic";` line.
9397

0 commit comments

Comments
 (0)
0