Working in the open on The Tyee's new article page design
git clone git@github.com:TheTyee/design-article.thetyee.ca.git
git submodule init && git submodule update
bower install
If you don't have a global install of Bundler, you'll want to install that first:
gem update && gem install bundler
Then install the project requirements in local directory so that you know you're using the right ones:
bundle install --path _vendor
If you run Jekyll though Bundler the project can the gems installed in the _vendor
directory:
bundle exec jekyll serve -w --config _config.yml
That helps to ensure the project is using the right version of each gem, and that it's easily deployed. If you need to add more Ruby dependencies, add them to the gemfile
and then run bundle install --path _vendor
.
Configuration files can be added to switch modes:
bundle exec jekyll serve -w --config _config.yml,_config.development.yml
If not using Bundler, you can simply pass the configuration arguments directly to Jekyll like so:
jekyll serve -w --config _config.yml,_config.development.yml
jekyll serve -w --config _config.yml,_config.development.yml
The layout file for the article page is at _layouts/article.html (This page then gets rendered in the index.html page file).
Inside of article.html, you'll find a series of includes created to reflect this mockup: https://basecamp.com/1929296/projects/9481270/messages/48980865?enlarge=185388269#attachment_185388269
All includes can be found in the _includes folder. All working CSS, JS and images can be found/added in the ui folder.
There are no classes appended to any of the sections, except where some bootstrap styling was needed. This is so @AlexGreen can feel free to add any classes he likes without worrying about breaking anything I've done.
The list of includes is:
The general idea is that each of these elements can be used in multiple positions on the page.
You will notice that some of the includes are being populated with Jekyll (Jekyll tags are identifiable from their {% %}
or {{}}
wrappers). This is meant to replicate the behaviour or any CMS, and hopefully make it easier to account for dynamic content when styling. This data is being pulled from a csv I made out of existing Tyee stories.
If at any point, you'd like to sub in new content to see how the styles hold up, you can do that by searching out all {% for field in site.data.example_stories limit:1 %}
tags and setting them to {% for field in site.data.example_stories limit:2 %}
or {% for field in site.data.example_stories limit:3 %}
. You can also feel free to reorder any of the includes in article.html and sidebar.html.