bulma-clean-theme 0.5.5 → 0.5.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 61986f5b2dcae879017e703f23c3c876b61d27ea
-  data.tar.gz: 5dd4e1024e224e987e8944d8cce1e16c4e09c3d0
+  metadata.gz: c2866ad24c9fd3246a8c5f5fc678cfee8f539f8c
+  data.tar.gz: d29857874854ec47d33973fc8551befa9e22193f
 SHA512:
-  metadata.gz: db4ce11862357299cb57657a108c58133ab9c2bac43cbcc6c794a391a02d8c0480d6090f69938938a2899d6c7344283e1ad7afd4fcea4d8580676264731c9362
-  data.tar.gz: ab97bee8a46bea3cd74fe3e0691e6f6e6c02b081e2001a2a25da3f4530b155f5c8a973c609c0b9a93889e46698b8aa7e4c7d21fa9b722f4b1dbd4336c8f2681f
+  metadata.gz: 61b4747afe16485dae385662eec74a8130c48881a0665fe4a6a111aedd22bd73f28b3a3cbbd1a4e004b1fc98e97639983e3fad29acea319dbc7f56b32fd34188
+  data.tar.gz: b0c235cc7297afccd1f06d6b3c197cf224117ba14d2c84b7a66b15c6ebe0d70bba899e28f7b7570183a1accc0b50f3a91d304a9246c680522fc335c0430644e6

data/_includes/head.html

@@ -3,10 +3,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ page.title }} - {{ site.title }}</title>
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/app.css">
+    <link rel="shortcut icon" type="image/png" href="{{ site.baseurl }}/favicon.png" />
     <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
     {% seo %}
     {%- if site.google_analytics -%}
       {%- include google-analytics.html -%}
     {%- endif -%}
     {%- include head-scripts.html -%}
-</head>
+</head>

data/_posts/2018-05-28-why-use-a-static-site-generator.markdown

@@ -0,0 +1,37 @@
+---
+layout: post
+title:  "Why use a static site generator"
+date:   2018-05-28 10:50:07
+categories: development
+description: "There are many ways to make a website, but what about static site generators"
+image: 'https://www.csrhymes.com//img/static-site-generator.jpg'
+published: true
+canonical_url: https://www.csrhymes.com/development/2018/05/28/why-use-a-static-site-generator.html
+---
+
+There are many ways to make a website and many different CMS platforms you can use, such as WordPress and Joomla, as well as site builder tools that offer you drag and drop interfaces, but what about static site generators? 
+
+A static site is pretty much what it sounds like, a set of pre generated html pages. Other platforms take what you enter into the CMS and process the information stored in the database, alongside a template or many template partials and dynamically construct the page before serving the html to you in your browser.  
+
+## Speed
+The initial advantage of a static site over a dynamic, database driven site is the page speed as means a lot less processing has to be done before the page is delivered. Some CMS’s provide caching which means that the first visitor to the page gets a dynamic version and then stores a cache of the page. This means subsequent visitor to the page gets the page quicker than the first. If you have a regularly cleared cache, or low numbers of visitors, subsequent visitors may not benefit from the caching and would all experience the increased load times. 
+
+## Version Control
+The next advantage of a static site is that it is that it can be version controlled. Usually a CMS relies on a database, which means that if you delete a page or some page content you either have to have revisions enabled in your CMS so you can roll back to a previous version or you need regular backups of your database so you can roll that back to a previous version. A static site with version control means you can easily revert to a previous version of your site and content without the need for database manipulation. 
+
+## Data Files
+Static sites, such as Jekyll, also offer a way of storing data in a more human readable format, such as yaml or JSON. This means you can store data that is used in multiple places across your site in one file and reference it in many places. For example, you may have a data file containing products, which you want to list in a category page and a product details page and maybe feature it on the homepage as well. These files can also be version controlled, meaning any changes or updates to your datafiles can be undone easily. The files can also be easily edited in a text editor so if you need to make multiple product amends, such as updating a misspelt brand name you can use something as simple as find and replace to update the spelling in all places at once without having to navigate to multiple different pages in a CMS. 
+
+## Design Freedom
+The biggest benefit I find to a static site is there is more freedom for a frontend developer and how they design and build your site. Some CMS’s work in a particular way and you are limited by the way they work. Page builders are available for many CMS’s but it often results in a lot of effort to get a particular piece of content in a particular place on the page. 
+
+A static site generator gives you more freedom to write your own html and text onto the page in the format you want it, rather than having to customise or overwrite the html and css classes output by the page builder tool. 
+
+## Data Protection
+A lot of people like the idea of installing a plugin into a CMS to handle things such as contact forms, so people can contact you about something, but in all honesty, it’s easier just to have an email address on the page that users can click on and email you directly. The reason I say this is that you have to try and prevent spam emails by using some kind of captcha on the form, as well as maintaining an email service that will handle the form submission and either store the form data somewhere on your site or send it to you as an email. This is pretty basic stuff, but is further complicated by data privacy laws that dictate how you store customers data and how you protect it. I know a lot of small business users would prefer to not have the hassle of managing stored user data on their site. 
+
+## Security
+One last thing to consider is website security. There is always a chance that using a popular CMS will leave your site vulnerable as there are always security issues being identified. You need to constantly keep your site up to date and lock down the CMS login as secure as possible. With a static site, there is no login screen. The original content lives somewhere else and the compiled, generated html is all that needs to be uploaded to your website, minimising the risk. Any public facing website has some risk but anything you can do to minimise it is better for your website in the long run. 
+
+## What will you use on your next project?
+A static site may not be the first thing you consider when building your new website, but it’s definitely worth exploring the pros and cons before you start the next project. After all, a faster, more secure site is better for you and your visitors. 

data/_posts/2019-02-09-getting-started-with-bulma-clean-theme.markdown

@@ -0,0 +1,144 @@
+---
+layout: post
+title:  "Getting started with Bulma Clean Theme for Jekyll"
+date:   2019-02-09 20:00:07
+categories: development
+description: "Getting started with Bulma Clean Theme for Jekyll and using it with GitHub Pages"
+image: 'https://www.csrhymes.com/img/bulma-clean-theme.jpg'
+published: true
+canonical_url: https://www.csrhymes.com/development/2019/02/09/getting-started-with-bulma-clean-theme.html
+---
+
+I have made a [theme for Jekyll](https://rubygems.org/gems/bulma-clean-theme) which is based on the Bulma frontend framework. It might look familiar, because I am also using it for this site. If you like the look of this theme then I thought I would write a little blog post about how to use it for your own site and how you can use it with GitHub Pages. 
+
+## Getting started
+
+First things first, you need a local instance of Jekyll running on your computer. I'm assuming you are familiar with Jekyll and have everything you need installed. If this is not the case, check out the documentation on the [Jekyll website](https://jekyllrb.com/docs/). For this example, lets call the site myblog.
+
+Create a new installation of Jekyll, then go into the myblog directory:
+```bash
+jekyll new myblog
+cd myblog
+```
+
+Then add the theme to the Gemfile:
+```
+gem "bulma-clean-theme"
+```
+
+Then add the theme to your _config.yml:
+```yaml
+theme: bulma-clean-theme
+```
+
+Then run bundle to install everything
+```bash
+bundle
+```
+
+You can then preview your site by running the usual command
+```bash
+bundle exec jekyll serve
+```
+
+## Creating pages
+
+A page can either be a html or a markdown file, as long as you set the frontmatter. There are a few settings that pages can use to customise the default theme a bit further if you so choose. 
+
+```yaml
+---
+layout: page
+title: Page Title
+subtitle: Page Subtitle
+image: /path/to/image.jpg
+description: The pages meta description
+hero_image: /path/to/hero-image.jpg
+hero_height: is-fullheight
+---
+```
+
+If you don't set a subtitle, image, hero_image or hero_height then defaults will be used or in the case of the hero_image, no image will be used on the hero. 
+
+The theme uses the jekyll-seo-tag plugin so it will use the information you provide in the frontmatter to auto populate the meta tags and open graph tags. 
+
+## Posts
+
+Posts are created as per the standard Jekyll method, in a _posts directory, with each post named YYYY-MM-DD-name-of-post.markdown. For the post frontmatter you can use the same settings as a page, except you need to change the layout to post and add date and author settings. 
+
+## Blog page
+
+For the blog homepage, create a blog.html page with `layout: blog` and use the other settings from a normal page. The theme is set up to use jekyll-paginate so you just need to add pagination options to your _config.yml
+
+```yml
+# Pagination settings
+paginate: 5
+paginate_path: "/blog/page:num"
+```
+
+## Site defaults
+
+If you don't want to set each hero_image individually, then you can set default values in your _config.yml. The below example sets a default author, layout and hero image for every post. It also turns on the side bar on the right of post pages, which will display links to your latest posts. 
+
+```yml
+defaults:
+  -
+    scope:
+      path: ""
+      type: "posts"
+    values:
+      author: "Author Name"
+      layout: post
+      hero_image: /path/to/hero-image.jpg
+      show_sidebar: true
+```
+
+## Styles
+
+The theme uses Bulma frontend framework which provides a wide range of sass variable customisations. If you want to overwrite any of the standard variables, such as the primary theme colour, then set a sass variable in a new file in assets/css/app.scss before importing the main stylesheet.
+
+```scss
+---
+---
+$primary: #333333;
+// Import Main CSS file from theme
+@import "main";
+```
+
+You can also add any of your own custom css to this file if you want to. 
+
+### Navigation
+
+Once you have created posts and pages, you will need to create a way for visitors to access them. The theme makes use of the Bulma navbar, which is configured through a simple yaml file. All you need to do is create a navigation.yml file in `_data` directory with the following format with the pages you want to include in the top navigation. You can now also add items to a dropdown menu.
+
+```yaml
+- name: Page 1
+  link: page-1
+- name: Blog
+  link: blog
+  dropdown: 
+    - name: Page 2
+      link: page-2
+```
+
+Bulma is pretty handy in the way it converts the same HTML into a mobile / tablet friendly navigation, so you only need to set the menu up once for all screen sizes. 
+
+## Using bulma-clean-theme with Github Pages
+
+For the site to work with Github Pages, all you need to do is update the _config.yml so it uses remote_theme instead of theme and update it to chrisrhymes/bulma-clean-theme so it knows which GitHub repo to pull the theme from when it builds your site. 
+
+```yaml
+#theme: bulma-clean-theme
+remote_theme: chrisrhymes/bulma-clean-theme
+```
+
+And then push up your changes to Github as normal. 
+
+There seems to be an issue where Jekyll doesn't work locally with remote_theme, so when working locally you have to add theme back in, but remember to comment theme out again before pushing back up to GitHub or you will probably get a build warning email.
+
+## I hope your not feeling overwhelmed
+
+It may seem like there is a lot to do to get started, but really it shouldn't take very long to get a site up and running. All the options are there just in case you want to further customise the theme to be more personal to you, but you can just use the basic minimal settings to get yourself up and running. 
+
+## Feedback and Issues
+
+If you have any feedback, ideas or issues with how the theme could be improved, then please create an issue on the theme's GitHub page and I will try and take a look into it as soon as I can. The theme is still quite new and I have quite a few ideas for future enhancements, so I will write a new blog post on this site when any new features become available. 

data/_posts/2019-07-23-introducing-some-new-layouts-to-bulma-clean-theme.markdown

@@ -0,0 +1,165 @@
+---
+layout: post
+title:  "Introducing some new layouts to Bulma Clean Theme"
+date:   2019-07-23 08:00:07
+description: "Introducing Product Pages and Landing Pages for Bulma Clean Theme"
+image: 'https://www.csrhymes.com/img/landing-page.jpg'
+hero_image: https://www.csrhymes.com/img/landing-page.jpg
+hero_height: is-large
+published: true
+tags: webdev showdev webdesign
+canonical_url: https://www.csrhymes.com/2019/07/23/introducing-some-new-layouts-to-bulma-clean-theme.html
+---
+
+
+I’ve been meaning to write about some of the new features I have been rolling out to my Jekyll theme, [Bulma Clean Theme](https://www.csrhymes.com/bulma-clean-theme/), for a while but I have only just managed to push the update for the landing page layout last weekend. This article provides some of the thinking behind the updates, as well as a brief introduction to how to get started. 
+
+## Product Pages
+
+I use the theme to power my own personal website and decided that it would be good to update my [book pages](https://www.csrhymes.com/books), or book page as it was then. The page had used a very simple layout with both books on one page and was not really up to scratch. I decided it would be better to make each book its own page, and if I ever get round to it and write another book it would be easy to add another to the site in the future. Rather than just building these pages for my own site, I thought it would be a nice addition to the base theme. 
+
+I really like Jekyll as it is simple to use, but also very powerful. I decided to make the most of the frontmatter and allow you to set most of the product information in there, leaving the main content of the page for the text description. 
+
+To get started, create your product pages inside a `_products` directory as we will make use of collections later on.  
+
+The below is an example of the frontmatter for the product page. The product page uses the same hero, title and subtitle settings as other pages, but has additional settings for product code, image, price, rating and features. The product code is important for later on. 
+
+```yml
+---
+title: Product 1 Name
+subtitle: Product 1 tagline here
+description: This is a product description
+hero_image: /img/hero-img.jpg
+product_code: ABC124
+layout: product
+image: https://via.placeholder.com/640x480
+price: £1.99 + VAT
+features:
+    - label: Great addition to any home
+      icon: fa-location-arrow
+    - label: Comes in a range of styles
+      icon: fa-grin-stars
+    - label: Available in multiple sizes
+      icon: fa-fighter-jet
+rating: 3
+---
+```
+
+The features provides a way of making a bullet point list of the key product features, but instead of plain disc bullet points you can use font awesome icons to make it a bit more interesting. 
+
+I don’t know about you, but sometimes I spend longer deciding on what icon to use than making the rest of the page. 
+
+I’ve deliberately made the product pages have a 4 by 3 image ratio as I feel it works best across different screen sizes. Like all themes, if you want to change it you can override the default layouts if you want a different ratio. 
+
+Once you have created your product pages, you will need to tell Jekyll to output them. This is done by adding collections settings in the `_config.yml` for your site. 
+
+```yml
+collections:
+  products: 
+    output: true
+    layout: product
+    image: https://via.placeholder.com/800x600
+    show_sidebar: false
+```
+
+Now when you run jekyll build it will output a load of product pages for you, now we just need a way of getting to them. This is where the product category page comes in. 
+
+## Product Category
+
+Create a page, such as products.md or in my case books.md and set it to use the product-category layout. This will generate a list of the products, but you can also add some introduction content in the main content section of the page if you so desire. 
+
+```yml
+---
+title: Products
+subtitle: Check out our range of products
+layout: product-category
+show_sidebar: false
+sort: title
+---
+
+
+This is some page content and it will appear above the product list.
+```
+
+## Product Reviews
+
+The last addition to the product pages is reviews. If you would like to list some customer reviews on your product pages, then you will need to create a reviews directory inside _data and create a separate file for each product with reviews, named after the product code. For example `_data/reviews/ABC124.yml`
+
+The data file should follow the below format. The name is the customer name, the rating is how many stars out of 5, the title is the main title of the review and the avatar is a link to an image, if you have one. If you don’t have a customer image then just omit it and a user icon will be used instead. Lastly, the description is the main content of the review. 
+
+```yml
+- name: Mr E Xample
+  rating: 4
+  title: Great product, highly recommended
+  date: 01/01/2019
+  avatar: https://bulma.io/images/placeholders/128x128.png
+  description: >
+    The product worked really well. I would recommend this to most people to use. Delivery was quick and reasonable. 
+    Would recommend this to my friends. 
+- name: Mrs R E View
+  rating: 5
+  title: Nice, really liked this
+  date: 02/02/2019
+  description: >
+    The product worked exactly as described.
+```
+
+Example [product category and product pages](https://www.csrhymes.com/bulma-clean-theme/products/) can be seen on the theme’s demo site here if you want to take a look. 
+
+## Landing Page Layout
+
+I was thinking it would be good to create a landing style page so I could highlight a new project or something I was working on separately from the main projects page already on my site. Rather than create a new layout I thought it would be better to enhance the existing page layout so you could choose to use these features if you so desired. 
+
+I started by adding a call to action (otherwise known as a large button) in the hero at the top of the page. This can be used by adding hero_link and hero_link_text to the frontmatter.
+
+```yml
+---
+layout: page
+title: Example Landing Page
+subtitle: This is an example landing page with callouts
+hero_height: is-large
+hero_link: /page-1/
+hero_link_text: Example Call To Action
+---
+```
+
+Next, I wanted to make some nice callouts to help shout about key features of whatever you are talking about on your landing page. This started out as a simple icon and a title, but slowly evolved to allow for a subtitle, description text and a call to action button as well. 
+
+To make it more flexible, only the title and subtitle are required and the rest can be used as and when necessary. 
+
+To make the callouts reusable in different pages on your site, the content is defined in a datafile, for example, example_callouts.yml. The below shows the example structure for the callouts.
+
+```yml
+style: is-light
+items:
+  - title: Example callout 1
+    subtitle: Example subtitle 1
+    icon: fa-space-shuttle
+    description: >
+      The example description text goes here and can be multiple lines.
+
+      For example, such as this. 
+    call_to_action_name: Call to action 1
+    call_to_action_link: /page-1/
+```
+
+The style is the style of the hero that the callouts are contained in. This makes use of Bulma hero styles. 
+
+Then to display the callouts on the page, add a callouts setting to the pages frontmatter with the name of the data file without the extension.
+
+```yml
+---
+layout: page
+title: Example Landing Page
+subtitle: This is an example landing page
+callouts: example_callouts
+---
+```
+
+An example [landing page layout](https://www.csrhymes.com/bulma-clean-theme/landing/) can be seen in the theme’s demo site.
+
+## What do you think?
+
+I’ve tried to make these additions easy to use and flexible where possible. I’ve updated the readme file and the theme demo site with more information to help you get started with these new features. 
+
+If you decide to give the theme a go, it would be great to see how you are using it and if you have any ideas of how it can be developed further. You never know, if I get enough responses then I may even make a showcase page on the demo theme site to highlight how others are using it. 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bulma-clean-theme
 version: !ruby/object:Gem::Version
-  version: 0.5.5
+  version: 0.5.6
 platform: ruby
 authors:
 - chrisrhymes
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-08-04 00:00:00.000000000 Z
+date: 2019-08-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -166,15 +166,16 @@ files:
 - _layouts/post.html
 - _layouts/product-category.html
 - _layouts/product.html
-- _posts/2018-10-11-test3.md
-- _posts/2018-10-12-test2.md
-- _posts/2018-10-13-test.md
+- _posts/2018-05-28-why-use-a-static-site-generator.markdown
+- _posts/2019-02-09-getting-started-with-bulma-clean-theme.markdown
+- _posts/2019-07-23-introducing-some-new-layouts-to-bulma-clean-theme.markdown
 - _sass/_layout.scss
 - _sass/_main.scss
 - _sass/syntax.scss
 - assets/css/app.scss
 - assets/js/app.js
 - blog/index.html
+- favicon.png
 - node_modules/.yarn-integrity
 - node_modules/bulma/CHANGELOG.md
 - node_modules/bulma/LICENSE

data/_posts/2018-10-11-test3.md

@@ -1,30 +0,0 @@
----
-title: Test Post 1
-subtitle: Test post subtitle
-layout: post
-author: C.S. Rhymes
----
-
-This is a test post! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin ultrices eros id accumsan. Vestibulum dictum volutpat sapien in molestie. Nunc auctor felis quis nibh tincidunt, vel sodales dolor viverra. Donec elementum dolor nisl, nec imperdiet sapien semper in. 
-
-Integer ligula magna, vulputate in arcu vel, auctor aliquet enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hendrerit commodo ex, in blandit est iaculis id.
-
-Suspendisse potenti. Vivamus vitae felis placerat, consectetur tellus sed, consequat nulla. Sed id semper nulla. Nunc dui ligula, consequat id eleifend non, iaculis ut ex. Aenean fringilla convallis placerat. Aenean pulvinar accumsan magna, molestie aliquet nunc ornare nec. Sed commodo, turpis eget dapibus auctor, metus tellus eleifend quam, ut aliquet libero ligula id erat. Curabitur quis quam sed nibh efficitur vulputate. Vivamus fringilla quam non augue dictum dictum. Praesent semper dolor et vehicula sagittis. Pellentesque ornare, est non fringilla consequat, quam felis cursus neque, nec vulputate purus nisl et elit.
-
-```
-<?php
-
-echo 'This is an example of some code';
-
-$example = [
-    'This',
-    'is',
-    'an'
-    'array',
-];
-
-$test = 'This is an example of some code with a really long value to see how it displays on the page to see if a scroll bar appears on the page in the code block as it should';
-
-```
-
-Integer ligula magna, vulputate in arcu vel, auctor aliquet enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hendrerit commodo ex, in blandit est iaculis id.

data/_posts/2018-10-12-test2.md

@@ -1,17 +0,0 @@
----
-title: Test Post 2
-subtitle: Test post subtitle
-layout: post
-author: C.S. Rhymes
-tags: html JavaScript CSS Jekyll
----
-
-This is a test post! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin ultrices eros id accumsan. Vestibulum dictum volutpat sapien in molestie. Nunc auctor felis quis nibh tincidunt, vel sodales dolor viverra. Donec elementum dolor nisl, nec imperdiet sapien semper in. 
-
-## Heading 2
-
-Integer ligula magna, vulputate in arcu vel, auctor aliquet enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hendrerit commodo ex, in blandit est iaculis id.
-
-### Heading 3
-
-Suspendisse potenti. Vivamus vitae felis placerat, consectetur tellus sed, consequat nulla. Sed id semper nulla. Nunc dui ligula, consequat id eleifend non, iaculis ut ex. Aenean fringilla convallis placerat. Aenean pulvinar accumsan magna, molestie aliquet nunc ornare nec. Sed commodo, turpis eget dapibus auctor, metus tellus eleifend quam, ut aliquet libero ligula id erat. Curabitur quis quam sed nibh efficitur vulputate. Vivamus fringilla quam non augue dictum dictum. Praesent semper dolor et vehicula sagittis. Pellentesque ornare, est non fringilla consequat, quam felis cursus neque, nec vulputate purus nisl et elit.

data/_posts/2018-10-13-test.md

@@ -1,17 +0,0 @@
----
-title: Test Post 3
-subtitle: Test post subtitle
-layout: post
-author: C.S. Rhymes
-tags: html JavaScript CSS Jekyll
----
-
-This is a test post! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin ultrices eros id accumsan. Vestibulum dictum volutpat sapien in molestie. Nunc auctor felis quis nibh tincidunt, vel sodales dolor viverra. Donec elementum dolor nisl, nec imperdiet sapien semper in. 
-
-## Heading 2
-
-Integer ligula magna, vulputate in arcu vel, auctor aliquet enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hendrerit commodo ex, in blandit est iaculis id.
-
-### Heading 3
-
-Suspendisse potenti. Vivamus vitae felis placerat, consectetur tellus sed, consequat nulla. Sed id semper nulla. Nunc dui ligula, consequat id eleifend non, iaculis ut ex. Aenean fringilla convallis placerat. Aenean pulvinar accumsan magna, molestie aliquet nunc ornare nec. Sed commodo, turpis eget dapibus auctor, metus tellus eleifend quam, ut aliquet libero ligula id erat. Curabitur quis quam sed nibh efficitur vulputate. Vivamus fringilla quam non augue dictum dictum. Praesent semper dolor et vehicula sagittis. Pellentesque ornare, est non fringilla consequat, quam felis cursus neque, nec vulputate purus nisl et elit.