Introduction
Hello and welcome to the docs for the Yellowblue theme!
Yellowblue (YB) is a clean, modern, customizable, responsive theme, that will make your blogging a pleasant experience!
YB is a Jekyll theme. Some basic Jekyll knowledge is assumed, although I try to be as detailed as possible and I also provide the appropriate documentaion links.
Almost all of the documentation you will ever need for Jekyll, exists in the Jekyll's docs pages, so feel free to explore the docs and play around with Jekyll.
Installation
First of all, you need to have Jekyll installed in your machine (or virtual machine). In Jekyll's website, you will find instructions on how to install Jekyll. Things should be fairly easy if your machine is a Mac or Linux based. For windows, Jekyll's site recommends this guide. I have tested it and it works.
The next thing to do, is to download the zip file and extract its contents, or clone the repository. Either way, you will end up with a folder that contains the theme. Rename the folder if you wish to and then open the console and CD into it. Then type in the console
jekyll servelocalhost:4000
Your new Jekyll site should load. Now you are ready to customize your site!
Jekyll version
Yellowblue works well with Jekyll 2+. It's always a good idea to update your Jekyll gem, by typing in the console: gem update jekyll
File Structure
Yellowblue's file structure is (hopefully) well organized. Don't be overwhelmed by the large number of files. This will help you customize and maintain your site easily and quickly.
Here is Yellowblue's file structure:
/
|-- 404 # Folder that contains the 404 page
| |-- index.html # The actual 404 page
|-- _data # Jekyll's _data folder
| |-- icons.yml # A YAML file that contains formatted information about the theme's icons
|-- _includes # Jekyll's _includes folder
| |-- patterns # The partials used in the Pattern Library page
| | |-- buttons # The partials for the buttons' patterns
| | |-- forms # The partials for the forms' patterns
| | |-- icons # The partials for the icons' patterns
| | |-- layout # The partials for the layout's patterns
| | |-- notifications # The partials for the notifications' patterns
| | |-- tables # The partials for the tables' patterns
| | |-- typography # The partials for the typography's patterns
| | |-- highlighter.html # The syntax highligter's patterns
| |-- aside.html # The site's sidebar
| |-- comments.html # The comments code
| |-- footer.html # The site's footer
| |-- aside.html # The site's sidebar
| |-- head.html # The site's <head> tag's contents
| |-- header.html # The site's header
| |-- icomoon.html # The code for Icomoon's icons
| |-- logo.html # The site's logo
| |-- nav.html # The site's navigation
| |-- teaser.html # The template for the posts' teasers
|-- _layouts # Jekyll's _layouts folder
| |-- categories_list.html # The template used for the categories list
| |-- default.html # The site's default layout
| |-- page.html # The layout for the pages
| |-- page_with_outer_heading.html # The layout for pages with a header outside the page's block
| |-- post.html # The layout for the posts
| |-- post_page.html # The template for the pages
| |-- tags_list.html # The template used for the tags list
|-- _posts # Your posts go here
|-- _sass # Sass files
| |-- base # Base Sass files
| | |-- _animations.scss # CSS animations (including animate.css)
| | |-- _buttons.scss # buttons
| | |-- _fluidbox.scss # CSS for fluidbox
| | |-- _forms.scss # forms
| | |-- _icomoon.scss # CSS for Icomoon icons
| | |-- _icons.scss # icons
| | |-- _layout.scss # everything that has to do with layout
| | |-- _normalize.scss # normalize.css
| | |-- _notifications.scss # notifications
| | |-- _prism.scss # CSS for prism.js
| | |-- _tables.scss # tables
| | |-- _typography.scss # everything that has to do with typography
| | |-- _vars.scss # the Sass variables
| |-- color_schemes # The files for Color Schemes presets
| | |-- _gray.scss # The Gray color scheme preset
| | |-- _green.scss # The Green color scheme preset
| | |-- _red.scss # The Red color scheme preset
| | |-- _white.scss # The White color scheme preset
| | |-- _yellowblue.scss # The Yellowblue (default) color scheme preset
| |-- site # Sass files for the theme itself
| | |-- _404.scss # styling for the 404 page
| | |-- _content.scss # everything that has to do with the content of the site
| | |-- _footer.scss # styling for the footer page
| | |-- _header.scss # styling for the header
| | |-- _nav.scss # styling for the navigation
| | |-- _pagination.scss # styling for the pagination
| | |-- _posts.scss # styling for the posts
| | |-- _sidebar.scss # styling for the sidebar
| |-- _custom.scss # Your custom sass/css code goes here
|-- _site # The folder that gets deployed
|-- archives # The folder that contains the archives page
| |-- index.html # The actual archives page
|-- category # The folder that contains the teasers for certain categories
|-- contact # The folder that contains the contact page
| |-- index.html # The actual contact page
|-- css # Jekyll's CSS folder
| |-- main.scss # The site's main scss file
|-- icons # The folder that contains the icons list page
| |-- index.html # The actual icons list page
|-- images # The site's images go here
|-- js # Jekyll's CSS folder
| |-- fluidbox.js # fluidbox.js library
| |-- jquery.js # jquery.js library
| |-- prism.js # prism.js library
| |-- scripts.js # custom javascript goes here
| |-- scrollreveal.js # scrollreveal.js library
|-- pattern-library # The folder that contains the Pattern Library page
| |-- index.html # The actual Pattern Library page
|-- tag # The folder that contains the teasers for certain tags
|-- thank-you # The folder that contains the thank you page after submitting the contant form
| |-- index.html # The actual thank you page
|-- _config.yml # Jekyll's settings
|-- favicon.ico # favicon.ico
|-- favicon.png # favicon.png
|-- feed.xml # posts feed
|-- index.html # the site's home page
|-- sitemap.xml # the sitemapSite Settings
Everything regarding your site's global configuration, is found in one single file; _config.yml
Most of the variables there are pretty much self explanatory, i.e the title sets the site's title, the email sets the site's email, etc.
For a full listing of what you can do with the site's configuration, check Jekyll's Configuration docs page.
YB uses a couple of extra settings, like paginate and excerpt_separator. The paginate variable sets the number of posts teasers per page and the excerpt_separator sets the end of the post teaser. More on these variables, can be found at their corresponding sections in the docs.
Keep in mind that for any changes in _config.yml to be applied, you need to restart the Jekyll server.
The Logo
You can customize the site's logo by opening _includes/logo.html
Once there, you can change the text of the logo, use an image, or add whatever you want.
If you have an image, place the file preferably in the images folder and just use an <img> tag. For example, if your image file is named logo.png, your entire logo.html file will look like this:
<section class="site-logo">
<a class="site-title-link" href="/">
<img src="/images/logo.png" alt="Logo alt text">
<div class="a-left-line"><div class="runner"></div></div>
</a>
<div class="site-slogan">A Jekyll Theme</div>
<div class="a-right-line"></div>
</section>
YB also offers you the option to have a site slogan. You can change it by modifying the text in the div with the class name of site-slogan. If you do not want to use a slogan, just delete the following lines altogether:
<div class="site-slogan">A Jekyll Theme</div>
<div class="a-right-line"></div>Posts
The posts will be the heart and soul of your (and any) blog. Therefore, I have made an extra effort while writing the code for the posts.
Yellowblue's posts, apart from the basic features, provide you with some extra features which make the overall navigating and reading experience, a pleasant and effortless process.
Some of the posts' features, are:
- Categories
- Tags
- Date of publishing
- Author
- Hero image
- Permalink (choose your own URL for your post)
- Comments (enable or disable at will)
- Navigation links to previous / next post
- Distraction free (the sidebar is not visible while on post pages)
- Edit the post's info for sitemap.xml. Choose if you want the post included in sitemap.xml or not.
↪ Writing Posts
Writing posts in Jekyll requires you to know a little about about Front Matter. Don't worry though; even a quick read through Jekyll's documentation about Front Matter, will get you up and running in no time.
Now, the actual process of writing posts ia also very well documented. Please make sure to read both about Front Matter and writing posts, in order to get a solid grasp on writing posts in Jekyll.
The necessary variables for a post, are the layout, the title and the date. Below you can see a basic post:
---
layout: post
title: "Welcome to Yellowblue!"
date: 2012-06-16 18:19:27
---
Post body goes hereNote that the post body can be written in Markdown, HTML, or even in both of them.
The best way to get an idea about how posts are written, is to just check the theme's posts in the _posts folder.
↪ Permalinks
Permalinks can be used in Yellowblue, as in any Jekyll site. Again, Jekyll provides detailed documentation about how to use permalinks. Just make sure that each post has a unique permalink!
↪ Hero images
If you have an image, say my_hero_image.jpg and want to use it as a hero image for your post, the first thing to do is copy the image into the images folder.
If you want a lower resolution version of the image, say my_hero_image_low_res.jpg, to appear in the post's teaser place the image into the images folder.
If you want the image to link to a larger image, place in the images folder a larger version of the image, say my_hero_image_large.jpg.
A post with a hero image, will look like this:
---
layout: post
title: "Welcome to Yellowblue!"
date: 2012-06-16 18:19:27
hero: images/my_hero_image.jpg
hero_high: images/my_hero_image_large.jpg
hero_low: images/my_hero_image_low_res.jpg
hero_alt: My Hero Image
---
Post body goes hereAs you can see, the variables regarding hero images, are the following:
| Variable | Value |
|---|---|
| hero | The path to the image file |
| hero_high | The path to the image file of a high resolution version. The image will be used as a link from the original hero image. |
| hero_low | The path to the image file of a low resolution version. The image will be used in the post teaser. |
| hero_alt | The alternative text to the image. It will be included in the images markup. |
↪ Comments
Yellowblue uses Disqus, a widely popular comments service. In order to you use it, you have to create an account there.
By default, comments in the YB theme are disabled and you get to determine if a post will accept comments or not.
If you want to have the comments enabled by default, just head over to _config.yml and change the line comments: false to comments: true.
If you want to have the comments disabled by default, but you want to choose which posts will allow comments, just add the line comments: true in your post's Front Matter section.
If you want to have the comments enables by default, but you want to choose which posts will not allow comments, just add the line comments: false in your post's Front Matter section. Also make sure that in _config.yml the comments variable is set to true.
The code for the comments resides in _includes/comments.html. The code is provided by Disqus and the comments (for the code) are quite explanatory. All you need to change, is the Disqus username. Yelloblue's username is yellowblueeu, so all you have to do in the following piece of code:
var disqus_shortname = 'yellowblueeu'; // required: replace example with your forum shortname
is to change yellowblueeu with your own Disqus username. And that's it. Now your site can support comments!
Categories
With Yellowblue, you can organize your posts in categories. In order to use this feature, no extra plugins are required. All that is needed, is a little manual work on your side. But don't worry, the whole process takes a couple of minutes for each category.
↪ Assigning Categories to Posts
In order to assign a category or categories to a post, you will need to declare them at the post's Front Matter section, like so:
---
layout: post
title: "Sample Post 1"
date: 2014-10-26 18:19:27
categories: update
---
This post has a category of update. If you want more than one categories, your Front Matter will look like this:
---
layout: post
title: "Sample Post 1"
date: 2014-10-26 18:19:27
categories: update tutorial
---
Now the post can be found under two categories, update and tutorial. Notice that the category names are separated by a single space.
Another way to declare your categories, is to have them inside brackets, like so:
---
layout: post
title: "Sample Post 1"
date: 2014-10-26 18:19:27
categories: ['update', 'tutorial']
---Notice that the category names are inside quotes and the whole list is wrapped inside brackets.
If you want a category name to be consisted of two or more words, use the following format:
---
layout: post
title: "Sample Post 1"
date: 2014-10-26 18:19:27
categories: ['sample post', 'tutorial']
---Get it? Quotes, and the whole list inside brackets.
Play it safe
If you are not sure about wich format to choose for your categories list, the safest way is to have the category names inside quotes and the whole list wrapped inside brackets.
↪ Creating the Posts lists per Category
Now, the next thing to do, is to create the page that lists the posts under each category.
Say you have a a category named tutorials. Under the category folder, create a subfolder and name it tutorials. Inside this folder, create a file and name it index.html. Inside this file, copy and paste the following:
---
layout: categories_list
cat_name: tutorials
---
{% for post in site.categories.tutorials %}
{% include teaser.html %}
{% endfor %}
For another category, just folllow the previous steps, assign the category name to the cat_name variable and in the for loop and change the category name, like so:
{% for post in site.categories.jekyll %}
If for example, your other category is called jekyll, your index.html inside the category/jekyll folder, will have the following contents:
---
layout: categories_list
cat_name: Jekyll
---
{% for post in site.categories.jekyll %}
{% include teaser.html %}
{% endfor %}To sum up:
- Assign the category or the categories to the
categoriesvariable in the post's Front Matter section. - Under the
categoryfolder, create a subfolder and give it the category name. - Inside this subfolder, create an
index.htmlfile. - Copy and paste the code given above, changing both the
cat_nameby assigning it the same value as the category name, and the category name in theforloop.
In order to produce URL friendly names out of the categories names, yellowblue uses the filter slugify.
Just don't get too funky with your categories' names and you will not have any problems.
What if the category name is consisted of two or more words?
Say your category name is Sample Post. The subfolder you will create, will have the name sample-post. As you see, you take your category name, you lowercase it and replace spaces with dashes.
In the sample-post folder, the index.html will look like this:
---
layout: categories_list
cat_name: 'Sample Post'
---
{% for post in site.categories.['sample post'] %}
{% include teaser.html %}
{% endfor %}Just remember to:
- wrap the
cat_namevalue inside quotes - change the for loop by changing the category name. Make sure it is lowercased and inside quotes, wrapped in brackets
Tip
Yellowblue auto-generates the categories list for you. If you use the categories list block, after you add a category in a post, refresh and check the categories list.
Your new category will be there as a link. If you check the URL, the part after category/, is the name of the folder you will create, under the category folder.
Archives Page
Yellowblue provides you with an auto-generated Archives Page. You can see it by clicking on the menu's 'Archives' link in the demo site.
The Archives page shows all the site's published posts, grouped by the publication year and sorted by the publication date.
The Archives page is a feature of Yellowblue and you can use it right away. No plugins or extra configuration is needed. Just provide a link to /archives and the Archives page will be there for you!
If you want to have a look at or modify the code of the Archives page, you can do it by opening the archives/index.html file.
Contact Page
Jekyll, like any static site generator produces, well, static sites. This means that a static site is mainly plain old HTML. And HTML cannot send emails. Server-side languages, like PHP, Ruby or Python can send emails.
Since we do not (and do not want to) have the luxury of a server-side language, in order to have a contact form, we need to rely on third party services. Luckily, there are more than one such services which help us receive contact emails, with minimum effort and time spent.
Yellowblue uses such a service, called Formspree and provides you with a ready made contact form. You can see it by clicking on the menu's 'Contact' link in the demo site.
In order for your contact form to work, it needs a little bit of configuration. After all, you have to at least provide your own email address, haven't you?
Open the contact/index.html file and locate this line:
<form action="http://formspree.io/your@email.com" method="POST">
and replace your@email.com with your own email address.
A couple more changes;
Notice the page's Front Matter section:
---
layout: page
title: Contact Me
site-url: "http://localhost:4000"
---
You can change the title variable, that's ,duh, the page's title, or just leave it as it is.
As for the site-url variable, you assign it to the site's URL. The variable is set to the default Jekyll's URL while working locally and you probably will leave it there while testing the contact form on your local machine. This variable helps Formspree to redirect the user back to your site, after the form has been submitted. So when your site goes live, do not forget to change the site-url variable!
See this line?
{% assign response = '/thank-you' | prepend: page.site-url %}
In this line we are preparing Formspree to return to a page with a permalink of thank-you, after a successful form submission.
The code for the thank you page is inside the thank-you/index.html file. You can leave it or modify it to your own liking.
Remember!
Before unleashing the form into the wild, test it yourself. The first time you will use it, Formspree will ask you to confirm your email address.
Lastly, do not forget to visit Formspree's website, for further information and documentation.
The Pattern Library
Yellowblue features a rich and stylish pattern library. You can see its components by following the 'Pattern Library' link of the demo site's menu.
The Pattern Library consists of reusable and confifurable components that can be used throughout the site.
By visiting the Pattern Library demo page, you can see all of its components, accompanied with the code needed to use them.
So go ahead, explore the page, examine the components and their variations, examine their code and use them anywhere you like on your site!
The Grid
Yellowblue features a simple, responsive, mobile-first grid system.
Its basic functionality is that each row is inside a container with a class of row.
Then, if you want your content to have a length of a full row, just place a container with a class of full-width.
If you need two columns, place two containers, each with class of half-width. If you need three columns, place three containers, each with class of one-third-width. If you need four columns, place four containers, each with class of one-fourth-width.
Notice that I am referring to containers and not, for instance, divs. That's because the classes of the grid system can go with any block-type HTML tag, like divs, sections, paragraphs, etc.
The best way to understand the grid system, is to have a look at it at the Pattern Library demo page. There you will get a visual understanding of the grid, along with its code.
Color Variations
Yellowblue allows you to give color to your backgrounds and text, just by adding classes to your HTML tags.
The colors available, are the following: blue, light-blue, dark-blue, yellow, green, light-green, dark-green, orange, light-orange, dark-orange, red, light-red, dark-red, gray, light-gray, dark-gray
There is also black and white.
For the backround color, you prefix the above colors with bg-. For the text color, you prefix the above colors with text-.
For example, if you want your paragraph to have blue background and yellow text, your code would look like this:
<p class="bg-blue text-yellow">I am a yellow piece of text, with a blue background</p>The actual result is this:
I am a yellow piece of text, with a blue background
Or a paragraph with dark-orange background and white text:
<p class="bg-dark-orange text-white">I am a white piece of text, with a dark-red background</p>And the actual result:
I am a white piece of text, with a dark-red background
You can use these classes on any element you want to apply background or text color on.
Modules
Yellowblue lets you use visual blocks, or modules, that you can place just about anywhere, like the sidebar, the content area, the main column, etc.
You can have modules that can go in the sidebar, two, three or four modules side by side, modules with blue headings and yellow font, modules with yellow headings and blue font... well you can have them almost any way you want them.
↪ Headings Color Variations
Yellowblue offers some ready to use color variations for the headings of your modules. You can apply them by using the following classes:
- blue-var: blue background, yellow text
- light-blue-var: light-blue background, black text
- yellow: yellow background, black text
See below the modules with their color variations and the code that creates them:
Default
No color variation.
<div class="module">
<header class="block-module-header">
<h3>Default</h3>
</header>
<div class="module-body">
<p>No color variation.</p>
</div>
</div>Blue
Blue color variation. Uses the class blue-var
<div class="module blue-var">
<header class="block-module-header">
<h3>Blue</h3>
</header>
<div class="module-body">
<p>Blue color variation. Uses the class <code class="language-markup">blue-var</code></p>
</div>
</div>Light Blue
Light Blue color variation. Uses the class light-blue-var
<div class="module light-blue-var">
<header class="block-module-header">
<h3>Light Blue</h3>
</header>
<div class="module-body">
<p>Light Blue color variation. Uses the class <code class="language-markup">light-blue-var</code></p>
</div>
</div> Yellow
Yellow color variation. Uses the class yellow-var
<div class="module yellow-var">
<header class="block-module-header">
<h3>Yellow</h3>
</header>
<div class="module-body">
<p>Yellow color variation. Uses the class <code class="language-markup">yellow-var</code></p>
</div>
</div> Modules widths
The Grid's width classes can be on applied on modules too. If for example, you want a half-width module, just apply the half-width class on your module's opening tag, like so: <div class="module half-width">
↪ Customize your modules
Yellowblue might offer you some reade-to-use color variations for your modules, but that doesn't mean that you cannot use your own. Remember the Color Variations section? You can use these classes to give to your modules' headings your own color combinations.
Have look at the following examples to get an idea of how to customize your modules:
Orange / White
Header with orange background and white text.
<div class="module">
<header class="block-module-header">
<h3 class="bg-orange text-white">
Orange / White
</h3>
</header>
<div class="module-body">
<p>
Header with orange background and white text.
</p>
</div>
</div>Dark Red / Yellow
Header with dark-red background and yellow text.
<div class="module">
<header class="block-module-header">
<h3 class="bg-dark-red text-yellow">
Dark Red / Yellow
</h3>
</header>
<div class="module-body">
<p>
Header with dark-red background and yellow text.
</p>
</div>
</div>
Just give the h3 the color variations classes and you're good to go.
Again, visit the Pattern Library demo page for a thorough demostration of the modules, their color variations and how to use them. Keep in mind that you can use the Grid's classes on the modules as well.
Tables
I really like the tables from Pure.css, so Yellowblue uses these tables.
Yellowblue's tables are responsive, using the simple overflow method. This means that if the table is wider than the screen, you can horizontally scroll the table, in order to see its hidden content.
Yellowblue tables use the markup from Pure.css, so please visit this page in order to see what kinds of tables are supported. If you want your tables to be responsive, you must place them inside a container with a class of table-container.
Here is an example of a responsive table with horizontal borders, along with its code:
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
<div class="table-container">
<table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</div>↪ Table Headings Color Variations
Yellowblue offers some ready to use color variations for the headings of your tables. You can apply them by using the following classes:
- blue-var: blue background, yellow text
- light-blue-var: light-blue background, black text
- yellow: yellow background, black text
See below the tables with their color variations and the code that creates them:
Default Table
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
<div class="table-container">
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</div>Blue-var Table
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
<div class="table-container">
<table class="pure-table blue-var">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</div>Light-blue-var Table
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
<div class="table-container">
<table class="pure-table light-blue-var>
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</div>Yellow-var Table
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
<div class="table-container">
<table class="pure-table yellow-var">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</div>↪ Customize your tables
As with modules, you can customize your tables' headings as well. You can use Yellowblue's color variations. Here are a couple of examples:
Full width Striped Table (Dark red background with yellow text)
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
<div class="table-container">
<table class="pure-table pure-table-striped full-width">
<thead class="bg-dark-red text-yellow">
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</div>Full width Table with horizontal borders (Black background with white text)
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
<div class="table-container">
<table class="pure-table pure-table-horizontal full-width">
<thead class="bg-black text-white">
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</div>
Just give the thead the color variations classes and you're good to go.
Again, visit the Pattern Library demo page for a thorough demostration of the tables, their types, their color variations and how to use them. Keep in mind that you can use the Grid's classes on the tables as well.
CSS - SCSS
As from version 2, Jekyll provides built-in support for Sass.
Sass is CSS preprocessor, wich makes the life of a CSS author much, much easier. If you have never heard of Sass, please have a look at its website for more info.
Yellowblue's Sass files are inside the _sass folder, which is Jekyll's default Sass folder. They are organized in two folders, base and site. Feel free to browse through these files. They also contain inline documentation to help you better understand the styling applied.
It it strongly suggested not to edit the sass files. You may end up breaking something and then spend a lot of time to fix it.
You can write your custom CSS / SCSS code in the _sass/_custom.scss. This file is imported last, which means that your changes will override any previously defined styles.
You do not have to worry if you can write CSS but not SCSS. Just write your plain old CSS code in the _sass/_custom.scss file. Sass can understand and compile regular CSS code without any problems.
Javascript
The javascript includes are placed in the site's footer, in particular in the _includes/footer.html file. The actual files are inside the js folder.
The javascript files used, are the following (in the order they are loaded):
- prirm.js: The Prism library; used for the syntax highlighting.
- jquery.js: The jQuery library; write less, do more.
- fluidbox.js: A very nice library that provides a beautiful and simple way to view the images. From the repo's description: Replicating and improving the lightbox module seen on Medium with fluid transitions.
- scrollreveal.js: A library that allows you to easily reveal elements as they enter the viewport.
- scripts.js: The custom javascript code is in here.
If you want to add your own custom javascript code, you may add it inside the js/scripts.js file. There is a comment in the file, telling you where to put your code.
Icons
Yellowblue uses Icomoon's free icon set. This icon set is consisted solely of SVG shapes.
Select Icons from the menu to have a look at all the available icons, along with their names.
Let's use an icon, say, the icon-cool:
And the code:
<div class="svg-container">
<svg class="icon icon-cool" viewBox="0 0 32 32">
<use xlink:href="#icon-cool"></use>
</svg>
</div> The default icon.
Noticed the icon-cool in the svg and use tags? As you very well guessed, this is the name of the icon. Also, the svg tag is wrapped inside a container, with a class of svg-container. If this container was not there, you would have an icon that would take up the entire width of the icon's container. If that is what you want, you can omit the svg-container.
Yellowblue's icons come in different sizes and colors.
Along with the default size, you can apply large or larger sizes. See for yourself:
The code:
<div class="svg-container">
Default:
<svg class="icon icon-cool" viewBox="0 0 32 32">
<use xlink:href="#icon-cool"></use>
</svg>
</div>
<div class="svg-container-large">
Large:
<svg class="icon icon-cool" viewBox="0 0 32 32">
<use xlink:href="#icon-cool"></use>
</svg>
</div>
<div class="svg-container-larger">
Larger:
<svg class="icon icon-cool" viewBox="0 0 32 32">
<use xlink:href="#icon-cool"></use>
</svg>
</div>
For the default icon, you apply the svg-container class to the icon's container. For the large and larger icons, you apply, respectively, the svg-container-large and the svg-container-larger class.
You can also apply colors to your icons. You can use all the available colors from the Color Variations section.
Here is the code for the green icons:
<div class="svg-container-large">
<svg class="icon icon-cool icon-green" viewBox="0 0 32 32">
<use xlink:href="#icon-cool"></use>
</svg>
</div>
<div class="svg-container-large">
<svg class="icon icon-cool icon-light-green" viewBox="0 0 32 32">
<use xlink:href="#icon-cool"></use>
</svg>
</div>
<div class="svg-container-large">
<svg class="icon icon-cool icon-dark-green" viewBox="0 0 32 32">
<use xlink:href="#icon-cool"></use>
</svg>
</div>
If you want a blue icon, just add the icon-blue class to the svg tag of the icon. For a light-red icon, add the icon-light-red. In other words, you prefix the color variations with icon-.
You can have bordered icons as well, using the classes bordered, rounded and circled, on the icon's container.
An example:
The code:
<div class="svg-container-large bordered">
<svg class="icon icon-cool icon-green" viewBox="0 0 32 32">
<use xlink:href="#icon-cool"></use>
</svg>
</div> Bordered,
<div class="svg-container-large circled">
<svg class="icon icon-cool icon-dark-blue" viewBox="0 0 32 32">
<use xlink:href="#icon-cool"></use>
</svg>
</div> Circled,
<div class="svg-container-large rounded">
<svg class="icon icon-cool icon-red" viewBox="0 0 32 32">
<use xlink:href="#icon-cool"></use>
</svg>
</div> Rounded As you can see, you can mix and match, and have say, a green large icon with circled border, or a default sized dark-orange icon with roounded border.
Again, don't forget to check the Icons section in the Pattern Library section of the demo page.
Sitemap
If you want your site's content to be known by search engines like Google, then it's a good idea to provide the search engine (I'll be referring to Google from now on) with a sitemap.xml file.
Google has a set of Webmaster Tools (GWT) that can help your site have better results on Google's search results.
Yellowblue auto genarates the sitemap.xml file for you, which you can submit to GWT. Here is an artricle from Google, that explains what a sitemap is and why you may or may not need one.
If your site's base URL is www.myblog.com, your sitemap's url will be www.myblog.com/sitemap.xml. In other words, to get your sitemap's URL, just append sitemap.xml to your sit's base URL.
Do not forget!
Before deploying your site, do not forget to enter your site's base URL in the url variable in the _config.yml file!
If you want to have a look at the code that generates the sitemap, just open the sitemap.xml file.
If you want to take control of the sitemap's variables, you can define them in your posts' or pages' Front Matter section, like so:
sitemap:
lastmod: 2015-09-18
priority: 0.7
changefreq: 'monthly'
exclude: 'yes'
The exclude variable is for pages, whereas the published variable is for posts. So if you don't want a page or a post to be included in the sitemap, just set the appropriate variable to no.
If you omit the above section, the default values will be used, which are just fine.
Full credit for the sitemap code goes to David Ensinger and this wonderful post of his. Thank you!
RSS Feeds
Jekyll ships with a feed.xml file, wich contains the code for your site's RSS feeds.
If your site's base URL is www.myblog.com, your feeds' url will be www.myblog.com/feed.xml. In other words, to get your feeds' URL, just append feed.xml to your sit's base URL.
Color Schemes
This theme is called Yellowblue because (yes, you guessed right) its color scheme is based on the colors yellow and blue.
However, this doesn't mean that you are restricted to use the theme's default colors.
By the power of Sass and Sass variables in particular, Yellowblue privides you with 4 additional color scheme presets. These presets are named after each schemes's dominant color; green, red, gray and white.
You can change the color scheme by going to the css/main.scss file. There, the line we are interested in. looks like this:
"color_schemes/yellowblue",
See the yellowblue word? That's the default color scheme preset. If you want for instance the green preset, change the line so it looks like this:
"color_schemes/green",For the red preset:
"color_schemes/red",Pretty easy, huh? By changing one single word, your site's color scheme changes instantly.
Again, the available color schemes are: yellowblue , green, red, gray and white.
If you want to have a look at the color schemes' code, or feel confident enough to tinker with it, the files are located inside the _sass/color_schemes folder. For the green preset the file is called _green.scss. For the red preset the file is called _red.scss, etc.
If you want to use your own custom color scheme and name it, say, my_color_scheme, just create a _my_color_scheme.scss file in the _sass/color_schemes folder. Now copy and paste the code from another color scheme file and start changing the variables and/or adding/removing CSS rules.
In order for your color scheme to take effect, go to the css/main.scss and change the line with the color schemes, like so:
"color_schemes/my_color_scheme",Thank you
Thank you for using the Yellowblue theme and having read the docs for it.
After reading this lengthy documentation, you still have questions, suggestions or corrections, please feel free to contact me at info[at]yellowblue.eu.