Template Help

Introduction

The world of web development is a tangled web of weeds, a potential black hole of acronyms, commands, and innanely named software companies that can be inscrutable at first, even to moderately savvy designers and web users. We won’t be diving into all of that today. Instead we have attempted to put together a ‘gardening box’ and ‘soil’ that you can use to plant things in and tend to.

The specific tools that we will be using today are:
Kirby: a content management system.
Tachyons: A Component library / CSS framework

Content Management Systems:

Other content management systems that you may be familiar with include Squarespace, WordPress, Wix, Cargo… there are a million others, and they each do things a little differently. What they have in common is that they store information in some kind of a database, and use a series of templates in order to make publishing content easier, without needing to open up html or other code files every time you want to update your site.

Benefits of content management systems are that successful, functional ones make publishing content extremely easy, even without knowing much (or any) code at all.

Drawbacks include that they are more complex to build, and have more moving parts than, say, a simple html / css site programmed from scratch.

We will be using a content management system called Kirby to build our website. CMS’s provide a visual interface to ‘grow’ (upload, write, edit), and ‘tend-to’ (organize, manage) your content.

Some key parts of a CMS:

Admin where you manage your content
Templates used for displaying your content and structuring your website
Themes pre-built templates
Plugins extend the functionality of the CMS

There are many different CMSs out there, each that speak to different audiences and uses. Kirby was chosen, in part because:

• it comes from a small business
• is software you can own (vs. a subscription, or ad-driven)
• has a very helpful community of users
• is a gateway to publishing on the web; its straightforward to start with but can grow with you.
• is well thought out and documented
• Your content is organized as files (text, images) within folders, making it easy to view and migrate your content.

Getting Started

Understanding the Kirby Panel

The Kirby panel is the back-end of your site. This is where / how you add content to your site.
The panel allows you to:

• Create new pages and sub-pages
• Populate these pages with text and images
• Structure these pages with markdown
• Style these pages by adding additional CSS and/or Tachyons classes

to access the Kirby panel, instead of the url to your page, you would enter:
http://communitygarden.southland.institute/~yourpage/panel

When you are in your admin panel, you can tell where you are in the site by looking at the horizontal black bar that appears at the top of the page. As you add pages and content, you can see where you are in the structure of your site by looking at this top area.

The structure is something like this (this is what appears on white text in the black box):
Main Page / Sub-page / location on sub-page

You can also get this information by looking at the web address bar in the browser.
For instance, the panel address for where this page is located would be:
“communitygarden.southland.institute/panel/pages/a-box-some-soil+getting-started”
you can see that we are in:

• the back-end area of the site (/panel)
• on a page within that site (/pages)
• called “a box some soil” (/a-box-some-soil)
• in the “getting started” section (+getting-started)

On your own site, the names of these various areas (after /panel/pages/) will change based on what you call them, but the structure will be similar.

Publishing settings (draft, unlisted, published)

On the main mage of your panel, you can add pages to your website. Each of these pages that you add will be added to the menu of pages that runs horizontally across the top of the published site.

When you click “Add” (with the little plus sign next to it) this will create a new page as a ‘draft’.
This draft will not be made public / published until you click the little red dot next to it, where you can choose from the following options (with descriptions of how each functions):

• Draft: The page is in draft mode and only visible for logged in editors
• Unlisted: The page is only accessible via URL
• Public: The page is public for anyone

Re-arranging content

When you decide you are ready to publish the draft of your page it will ask you to specify the position that you want it in. This will be a number. If you already have 3 pages, and you choose “4”, it will place the new page after the 3rd page. If you wanted it to appear earlier in the list (and in the menu) and choose “2”, it will shuffle the order of other pages so that it appears in the second position, and bumps the others in the sequence to accommodate it.

Adding Images

When adding images, you want to be mindful of their size. Have you ever opened an email where the image was 10x larger than your screen? If you upload very large images, they will make your website much slower to load, and open the door to weird formatting errors as well. Tools like photoshop are one way of doing this, but there are lots of free and open source options as well.

The Templates

This template that you will be using to create your site has been built to give you the option of choosing two types of templates each time you create a new page:

• Collection :
  which creates a page that can contain multiple “items”
  and
• Item :
  which consists of a single item.
  Each “item” may contain text and images, but it can be thought of as a single piece of content.

This page, for instance, is structured as a “collection,” and each section that you see on the page: “Introduction,” “Getting Started,” “The Templates,” etc. is an “item” in that collection.

All of the pages in the main menu of communitygarden.southland.institute are structured this way, except for the 🌱 page, which is a single Item.

Using Markdown

Markdown

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. It allows you to format documents in a straightforward way that can be easily converted to HTML.

You can add markdown to your Kirby ‘Description’ areas in order to format the text within them, specifying where headings, links, and lists appear (which can then be styled up with CSS or tachyons classes).

The backend panel of the communitygarden Kirby template has been programmed to have a convenient Markdown Cheatsheet in the “content” area of each Item.

A useful introduction to Markdown:
markdownguide.org/getting-started

Using Tachyons and CSS

CSS

CSS or Cascading Style Sheets describes how your page looks. You can use CSS to control typography, layout, spacing, basic interactivity, amongst many others.

Some useful introductions to CSS:
Web Design in 4 minutes by Jeremy Thomas
CSS First Steps - Mozilla Foundation

CSS Classes and Tachyons

For the purposes of the workshop we will be using CSS — CSS Classes and a framework called Tachyons in particular, in a way that abstracts the nuts and bolts process of coding. Instead of using a code editor, we will use our purpose built theme to input the CSS.

Tachyons is a CSS toolkit that uses css classes to make it easier apply CSS to your web pages. Instead of writing CSS from scratch, you can use pre-defined classes to design your site.

For people coming in through graphic design you can think of css classes and tachyons as a more verbose version of applying paragraph or character styes from indesign.

Here are is a small subset of useful Tachyons classes:

(more here: Tachyons Docs)

Typography

TYPE SIZE / SCALE

f-headline { font-size: 6rem; }
f-subheadline { font-size: 5rem; }
f1 { font-size: 3rem; }
f2 { font-size: 2.25rem; }
f3 { font-size: 1.5rem; }
f4 { font-size: 1.25rem; }
f5 { font-size: 1rem; }
f6 { font-size: .875rem; }
f7 {font-size: .75rem; }
more

LINE-HEIGHT (LEADING)

lh-solid { line-height: 1; }
lh-title { line-height: 1.25; }
lh-copy { line-height: 1.5; }
more

TRACKING

tracked { letter-spacing: .1em; }
tracked-tight { letter-spacing: -.05em; }
tracked-mega { letter-spacing: .25em; }
more

more Typography here:
http://tachyons.io/docs/

SPACING

PADDING

The space inside of things

WIDTH AND HEIGHT

WIDTH

.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-33 { width: 33%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }

MAX-WIDTH

.mw1 { max-width: 1rem; }
.mw2 { max-width: 2rem; }
.mw3 { max-width: 4rem; }
.mw4 { max-width: 8rem; }
.mw5 { max-width: 16rem; }
.mw6 { max-width: 32rem; }
.mw7 { max-width: 48rem; }
.mw8 { max-width: 64rem; }
.mw9 { max-width: 96rem; }

HEIGHT

.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }

HEIGHT (BASED ON SCREEN HEIGHT

.vh-25 { height: 25vh; }
.vh-50 { height: 50vh; }
.vh-75 { height: 75vh; }
.vh-100 { height: 100vh; }

• direct examples: change background color, change type color
• subset of useful tachyons classes
• link to documentation

Glossary

CMS: Content Management System

A content management system (CMS) is an application that is used to manage web content, allowing multiple contributors to create, edit and publish. Content in a CMS is typically stored in a database and displayed in a presentation layer based on a set of templates. (src)

Kirby

A content management system that uses files and folders. more

CSS: Cascading Style Sheets

CSS describes how your page looks. You can use CSS to control typography, layout, spacing, basic interactivity, amongst many others properties. CSS usually style HTML elements. more

CSS Framework

CSS frameworks are built by developers and are collections of pre-built CSS stylesheets that are used to make working with CSS easier. more

Tachyons

Tachyons is a CSS Framework used on this site. It’s a collection of CSS classes that makes it easier to use CSS. We use it on this site so that you can add CSS within the admin panel. more

HTML: HyperText Markup Language

HTML is used to describe how your page is structured and ordered. HTML documents are marked up <p>using opening and closing tags<⁄p>. more

PHP

Is programming language for web development. Kirby is built using PHP

Command Line

The command line is a text interface for your computer. It’s a program that takes in commands, which it passes on to the computer’s operating system to run. On a mac, the command line is accessed by an app called Terminal.

Homebrew

Homebrew is like an App Store for command line applications. It’s used to download and manage to command line applications. more