|
1 | | -slim-pickins-jekyll-theme |
2 | | -============= |
3 | | - |
4 | | -Live Demo [HERE](http://chrisanthropic.github.io/slim-pickins-jekyll-theme/) |
5 | | - |
6 | | -Slim Pickins is what I consider to be a minimal 'core' theme with everything I need to quickly develop new themes for Jekyll. |
7 | | - |
8 | | -## Basic features include: |
9 | | - |
10 | | -* SASS |
11 | | -* Responsive grid (Zurb Foundation) |
12 | | -* Responsive navigation |
13 | | -* Optional full-width banner |
14 | | -* Sticky footer |
15 | | -* **Javascript free** |
16 | | -* Custom Rakefile with tasks for deploying, minifying, and notifying search engines about updates |
17 | | -* image_optim plugin to optimize all images |
18 | | -* Basic SEO |
19 | | - |
20 | | -### SASS |
21 | | -Includes the following variables: |
22 | | - |
23 | | -**Base Colors** |
24 | | -* $primary-color |
25 | | -* $secondary-color |
26 | | -* $complimentary-color |
27 | | -* $body-bg |
28 | | -* $body-font-color |
29 | | - |
30 | | -**Links** |
31 | | -* link-color |
32 | | -* link-hover-color |
33 | | -* link-visited-color |
34 | | - |
35 | | -**Text** |
36 | | -* $base-font-family |
37 | | -* $base-font-size |
38 | | -* $small-font-size |
39 | | -* $base-line-height |
40 | | - |
41 | | -**Navbar Settings** |
42 | | -* $navbar-height |
43 | | -* $navbar-color |
44 | | -* $navbar-text-color |
45 | | -* $navbar-hover-color |
46 | | -* $navbar-active-color |
47 | | -* $navbar-font-size |
48 | | -* $navbar-font-family |
49 | | - |
50 | | -**Socials Navbar Settings** |
51 | | -* $socials-font-color |
52 | | -* $socials-font-size |
53 | | - |
54 | | -**Utility** |
55 | | -* $spacing-unit |
56 | | - |
57 | | -**Footer** |
58 | | -* $footer-height |
59 | | -* $footer-color |
60 | | - |
61 | | -### GRID |
62 | | -Uses minimal sass [components](https://github.com/zurb/bower-foundation/tree/master/scss/foundation/components) from Zurb Foundation: |
63 | | - |
64 | | -* [grid](http://foundation.zurb.com/docs/components/grid.html) |
65 | | - |
66 | | -### NAVIGATION |
67 | | -A fully responsive navigation bar with the following features: |
68 | | - |
69 | | -* 2 navigation areas |
70 | | - * Left - Primary navigation |
71 | | - * Right - Social media links |
72 | | -* Both navigation areas are populated using Jekyll 'data' files, nav.yml and socials.yml respectively |
73 | | -* Ability to create 'external' links that link offsite while still using socials.yml to do so |
74 | | -* Easily customizable text, link, and background colors using the supplied sass variables |
75 | | - |
76 | | -### BANNER |
77 | | -This theme is configured with a 'wrap' of 1920px so banner images look best at that width. |
78 | | - |
79 | | -First it checks a pages yaml frontmatter for the header image, if none is found then it checks for a site-wide default in your config.yml, if none is found then no banner image is displayed. |
80 | | - |
81 | | -**Site-Wide** |
82 | | -You can set a site-wide default banner image by adding the following to your _config.yml: |
83 | | - `header_image: "path/to/image.jpg"` |
84 | | - |
85 | | -**Per Page** |
86 | | -You can also override it per page by adding the following code to a pages yaml front matter: |
87 | | - `header_image: path/to/image.jpg` |
88 | | - |
89 | | -### STICKY FOOTER |
90 | | -I like my footers to stay on the bottom of the page no matter what. You can easily edit the size and color using the supplied sass variables. |
91 | | - |
92 | | -### JAVASCRIPT FREE |
93 | | -The only thing in the theme that uses Javascript is the optional use of google analytics. |
94 | | - |
95 | | -### RAKEFILE |
96 | | -Includes the following custom tasks: |
97 | | - |
98 | | -* *minify_html* - uses HTML_compressor to minify HTML |
99 | | -* *notify* - pings google and bing to notify them about changes to the site/sitemap |
100 | | - |
101 | | -These tasks have been bundled into custom build and deploy tasks |
102 | | - |
103 | | -* *build* - runs `jekyll build` followed by `minify_html` |
104 | | -* *deploy* - runs `s3_website push` and then `notify` |
105 | | - |
106 | | -### IMAGE_OPTIM PLUGIN |
107 | | - |
108 | | -* Custom [image_optim](https://github.com/chrisanthropic/image_optim-jekyll-plugin) plugin will optimize all images in the /images folder and any subdirectories |
109 | | - * Uses the original [image_optim](https://github.com/toy/image_optim) |
110 | | -* Cache file is created on the first run so that only updated/new images are optimized |
111 | | - |
112 | | -### BASIC SEO |
113 | | - |
114 | | -* Google Analytics* |
115 | | - * *Uses Javascript |
116 | | - * just add your `google_universal_analytics ID` to the _config.yml file. |
117 | | -* Facebook Open Graph |
118 | | - Fill out the following in your config.yml |
119 | | - |
120 | | - ``` |
121 | | - facebook_app_id: #enter your App ID |
122 | | - facebook_locale: en_US |
123 | | - facebook_page: #the URL of your Facebook Page |
124 | | - facebook_image: #enter a default image (at least 200x200px) to use here for posts/pages that don't have one. |
125 | | - ``` |
126 | | - |
127 | | -* Twitter Cards |
128 | | - Fill out the following in your config.yml |
129 | | - |
130 | | - ``` |
131 | | - twitter_user: |
132 | | - twitter_card: true |
133 | | - twitter_image: #enter a default image (at least 200x200px) to use here for posts/pages that don't have one. |
134 | | - ``` |
135 | | - |
136 | | -* Sitewide description/keywords |
137 | | - * Edit the description in your config.yml and it will be used as the default description in the metadata for every page/post. |
138 | | - * Add `Keywords: some, bunch, of random keywords` to your config.yml and it will be used as the default keywords in the metadata for every post/page. |
139 | | - * Set specific keywords per page/post (override the sitewide defaults) by adding them to the front matter of any page/post. |
140 | | - * Example: |
141 | | - |
142 | | -``` |
143 | | ---- |
144 | | -Title: Example Post |
145 | | -Description: Some Yaml Frontmatter to show what's what. |
146 | | -Keywords: Example, Zim, this is only a test |
147 | | ---- |
148 | | -``` |
149 | | - |
150 | | -## Basic Use |
151 | | -For now it's best to start fresh or install the them and then transfer over any old files (posts, images, etc) from your old site. |
152 | | - |
153 | | -* Git clone this repo, cd into the directory and run `bundle install --binstubs --path=vendor` to install the required dependencies. |
154 | | -* Edit your config.yml file |
155 | | - * Change the title and description at a minimum. |
156 | | -* Update your navigation |
157 | | - * edit the `_data/nav.yml` file as needed |
158 | | -* Update your social links |
159 | | - * edit the `_data/socials.yml` file as needed |
160 | | - |
161 | | -## Deploying |
162 | | -I use S3 to host my site and the [s3_website](https://github.com/laurilehmijoki/s3_website) plugin to deploy, if you don't do both of these, delete the `s3_website.yml` file and edit the deploy raketask to fit your needs. |
163 | | - |
164 | | -If you plan on using S3 make sure you edit the configs: |
165 | | - |
166 | | -* FIRST - add the s3_website.yml file to your gitignore so your credentials don't end up on the web. |
167 | | -* s3_website.yml |
168 | | - * add your `s3_id`. `s3_secret`, and `s3_bucket` |
169 | | -* Update the Rakefile notify task to use your url |
170 | | - * replace `site = "www.YOUR-URL.com"` with your actual url. |
171 | | - |
172 | | -## MISC. |
173 | | -The blog posts included are duplicated from my actual blog and are the documentation of how I created this theme. From starting with a fresh Jekyll installation to the final product. |
| 1 | +[USBGuard](https://github.com/dkopecek/usbguard) project site build using [Jekyll](http://jekyllrb.com) and the [slim-pickins-jekyll-theme](https://github.com/chrisanthropic/slim-pickins-jekyll-theme). |
0 commit comments