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. Things like grunt, gulp, git, sass, less. We won’t be diving into all of that today. Instead we have attempted to put together a virtual ‘banker’s box’ that you can use to collect and organize things in, in a variety of ways.

The specific tools that we will be using 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.. there are a million others, and they each do things a little differently. What they have in common is that they store information in a database, and use a series of templates in order to make publishing content easier.

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 websites (collected within the larger ANS site as a series of boxes with each participant’s site ‘contained’ within. The CMS provide a visual interface to ‘collect’ (upload, write, edit), and ‘maintain’ (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 extends 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.

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.

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.

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

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 this pages by adding additional CSS and/or Tachyons classes

You can tell where you are in the site by looking at the top of the page in the panel.
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 texts 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

• Collection
• 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 ‘text’ 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).

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

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