README.md in boido-1.0.0.pre.beta2 vs README.md in boido-1.0.0.pre.beta3

- old
+ new

@@ -1,12 +1,12 @@ # Boido -Basic layouts for static websites. +Basic layouts for Jekyll-powered websites. Helps to manage resources when building pages. ## Installation -Add this line to your application's Gemfile: +Add this line to your application's `Gemfile`: ```ruby gem 'boido' ``` @@ -15,5 +15,90 @@ $ bundle install Or install it yourself as: $ gem install boido + +## Usage + +Add this line to your site configuration: + +```yaml +theme: boido +``` + +And then use it on page with [Front Matter](https://jekyllrb.com/docs/front-matter/) or as part of other sets of [Variables](https://jekyllrb.com/docs/variables/): + +```yaml +layout: boido +``` +From there, you can customize: + +- `<html>` lang attribute; +- `<title>` contents; +- `<head>` tags; +- `<body>` scripts; + +The `language` variable defaults to "en", `charset` to "utf-8" and viewport is described as "width=device-width, initial-scale=1". + +## Examples + +A markdown page described as below: + +```html +--- +layout: boido + +language: ja + +viewport: + width: 600 + initial_scale: 1.5 + +title: Hello World + +head: + elements: + - type: link + attributes: + href: //assets/styles/index.css + rel: stylesheet + - type: meta + attributes: + name: description + content: "Hello World" + - type: meta + attributes: + name: generator + content: jekyll + - type: meta + attributes: + name: google-site-verification + content: verification token + +body: + scripts: + - //assets/scripts/script.js +--- +Hello World +``` + +Will produce following output: + +```html +<!doctype html> +<html lang="ja"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=600, initial-scale=1.5"> + <link href="//assets/styles/index.css" rel="stylesheet"> + <meta name="description" content="Hello World"> + <meta name="generator" content="jekyll"> + <meta name="google-site-verification" content="verification token"> + <title>Hello World</title> + </head> + <body> + <p>Hello World</p> + <script src="//assets/scripts/script.js"></script> + </body> +</html> +```