background preloader

My go at theming jekyll

Facebook Twitter

Templates. Jekyll uses the Liquid templating language to process templates.

Templates

All of the standard Liquid tags and filters are supported. Jekyll even adds a few handy filters and tags of its own to make common tasks easier. Filters Options for the slugify filter The slugify filter accepts an option, each specifying what to filter. None: no characters raw: spaces default: spaces and non-alphanumeric characters pretty: spaces and non-alphanumeric characters except for ._~! Includes If you have small page snippets that you want to include in multiple places on your site, save the snippets as include files and insert them where required, by using the include tag: {% include footer.html %} Jekyll expects all include files to be placed in an _includes directory at the root of your source directory. For more advanced information on using includes, see Includes. Code snippet highlighting Jekyll has built in support for syntax highlighting of over 60 languages thanks to Rouge. Line numbers Gist Linking to posts.

CSS Variables with Jekyll and Liquid « null program. CSS variables have been proposed a numberof times already, but, as far as I know, it has never been taken seriously.

CSS Variables with Jekyll and Liquid « null program

Variables -- constants, really, depending on the proposal -- would be useful in eliminating redundancy, because the same value often appears multiple times across a consistent theme. The cascading part of cascading stylesheets can deal with some of this, but not all. For example, Because the color has been defined in one place, adjusting the color theme requires only one change. That's a big help to maintenance. I recently investigated CSS variables, not so much to reduce maintenance issues, but mainly because I wanted to have user-selectable color themes. If you look in my site's source repository (not the build code hosted here), you'll see my core stylesheet is an _include and looks like this, Those are Liquid variables.

---backA: "#ecffdc"backB: WhitebackC: WhiteSmokeforeA: BlackforeB: SlateGrayborder: Silverlinks: Blue--- Shopify Cheat Sheet - Liquid variables. Jekyll Themes. As I continue to hack away at the design of Made Mistakes and improve on things, I’ve tried to release a simplified Jekyll starter after each major revision.

Jekyll Themes

Just my way of giving back to the community. Below are all of the Jekyll starters I’ve open sourced thus far. Each “theme” contains all the _layouts, _includes, assets, and sample posts/pages to get you started. For the most part they share a lot of similarities (especially in _config.yml), which should make switching and updating easier. Not quite on the level of Octopress or Jekyll Bootstrap, but I think they get the job done. A responsive Jekyll blog theme designed to give your site a modern and somewhat cliche feel. Modern, subtle design Animated main menu So Simple A simple and clean responsive Jekyll theme for words and large photographs. Minimal design Search script Minimal Mistakes A minimally designed responsive Jekyll theme for text heavy blogs.

License Found This Useful or Enjoyable? Going Static without a CMS using Jekyll. If you follow the trends in modern web design and development, it’s hard to ignore the work being done around responsive design.

Going Static without a CMS using Jekyll

Seems like every other week there is an awesome article about media queries, fluid grids, mobile first, or responsive images on websites like A List Apart and Smashing Magazine. Which got me thinking “Shit. I don’t know anything about these new technologies or techniques, I better learn fast.” And the only real way I was going to pickup all this was to create a project for myself. So began the process of evaluating how to build my personal website and how I’d like it to function. Why Go Static For the last ten years I’ve used a CMS to hold and present personal blogs and portfolios of my design work. A common problem facing Wordpress sites are their speed, due to a number of reasons. Designers Are Control Freaks But the real reason that prompted me to look at going back to my web roots was control. The Journey to a Static Website Generating the Site with Jekyll.