Designing the Workflow

About myself

We only have 3 hours.

What you’ll take away from the workshop are ideas, not skills.

Let’s get started!

Three parts of this workshop

Preparation and planning

Planning for a website is underrated.

True Story

List of things you need to do for planning

  1. Get the content and read it.
  2. Try to think about the design.
  3. Sketch it out.
  4. Drawing boxes and plotting divs.

Get the content and read it.
(Like, really reading it.)

Yarn

Yarn with description

Knitted

You can’t produce good design without good content.
And you won’t know the quality of the content if you didn’t read it.

Now think about the design

The layout?

The hierarchy?

How about the color palette?

Is the whole thing reusable?

Lets face it.
Sometimes, nothing works.

Grab a beer, take some rest.

Now go ahead and sketch!

Boxing and Plotting

Base sketch

Base sketch with side margin

Base sketch with sections

Base sketch with containers

Base sketch with all parts

Base sketch with labels

Download the content from http://bit.ly/1i7YFED

Setting up tools and programs

Basic stuff

  1. Computer (Preferably Mac/Ubuntu)
  2. Browsers (The more the merrier)
  3. Text editor (Go with Sublime Text)
  4. Graphic editing programs

Basic languages & codes

We want something faster, something better, something more efficient.

We need some magical process.

Let’s talk about Jekyll

Jekyll is a site generator

We use Jekyll to populate html files.

With Jekyll, you create templates and put content files inside. then jekyll will help you to generate html files to make up the whole site.

There are no database behind Jekyll so no server side processing is needed.

Basic commands

Now let’s talk about Sass.

Sass is a CSS preprocessor

A CSS preprocessor can help you save time by letting you write smarter code.

It gives you the capablity to virtually have variables, calculations, and nesting in CSS—which can’t do the aforementioned.

Downside of any CSS preprocessors are you have to run some process to compile them into plain CSS code.

We need Grunt to do that for us.

Grunt is a task runner

Grunt can be used to handle a lot of tasks.

One of the uses of Grunt is to help us compile your .scss into css.

You can also use Grunt to minify your JS files.

Let’s set them up!

Create a new Jekyll project

  1. Opening the project directory in Terminal.
  2. Inside the terminal, type jekyll new ..
  3. Hit Enter.

Fixing the directory for our workflow

  1. Remove the _sass folder.
  2. Create a folder named dev inside css.
  3. Remove the main.scss file inside css.

Installing Grunt

  1. Install Grunt with npm install grunt-cli -g.
  2. Create new file called package.json with content from http://bit.ly/1IoIubf. Go edit the content as well.
  3. Create new file called Gruntfile.js with content from http://bit.ly/1IoIubf.
  4. Run npm install in terminal.

Now we’re all good!

Let’s make it work

Install some tools

  1. Go to ~/Library/Application Support/Sublime Text 2/Packages/User.*
  2. Download http://bit.ly/1NLHULG.
  3. Unzip and put all the content(except readme.md) inside the folder from 1.

*For Windows users: C:\Users\{user}\AppData\Roaming\Sublime Text 2\Packages/User *For Linux users: ~/.config/sublime-text-2/Packages/User

Let’s start working on Sass

  1. Create a file inside css/dev call main.scss.
  2. With Sublime, type setup and hit tab.
  3. Save the file.

Use Grunt to compile Sass

  1. Type grunt in terminal.
  2. Hit enter.
  3. Go try to save main.scss again.
  4. See if main.css appear in css.

Styling with Sass

Use $something: something; as variable. For example:

$color: #badass;
p { color: $color; }

Will become

p { color: #badass; }

Styling with Sass

You can do math with Sass. For example:

padding: 10 / 2 * 1rem;

Will become

padding: 5rem;

Styling with Sass

Nesting? No problem! See this example:

.mother {
	.son {
		font-size: small;
	}
}

Will become

.mother .son {font-size: small;}

How to make your website look cleaner?

There’s an idea call baseline grid in typography, where the spaces between baselines are always constant.

Texts and other objects will then be put on the baseline so that the vertical rhythm of the page will be maintained.

There’s not yet a 100% accurate way to achieve this on the web. but we can do something to mimic it.

Remember this equation:

font-size = line-height(Leading) / ratio

The default ration between font size and it’s leading is 120% or 1.2. But for body text, it’s usually set to 1.4 to achieve better legibility.

We use font-size to achieve the leading or the height of baseline:

html, body {
	font-size: 16px; //Leading
	line-height: 1rem;
}

p {
	font-size: 1 / 1.4 * 1rem; //Remember the equation?
	line-height: 1rem;
}

It’s even applicable to other objects:

img {
	height: 4rem; // 4 times the leading
}

div {
	padding: 1rem;
	margin-bottom: 1rem;
}

Now let’s start the real coding.

Now let’s start the real coding.

  1. Open _layouts/default.html.
  2. Make the following edits:

From

{% include header.html %}

<div class="page-content">
  <div class="wrapper">
    {{ content }}
  </div>
</div>

{% include footer.html %}

to

{{ content }}

Now do these

  1. Edit the _config.yml
  2. Add exclude: ["node_modules", "Gruntfile.js", "package.json", "css/dev"] to _config.yml
  3. Run jekyll serve
  4. Start coding a normal website in index.html and css/dev/main.scss

Create assets folder

  1. Create a folder named assets at the root directory.
  2. Place your images here.
  3. Get your images as usual like <img src="assets/logo.png">

Lets set up contents

  1. Rename _posts/2015-08-28-welcome-to-jekyll.markdown into 2015-11-5-bradfrost.md
  2. Open it
  3. Replace all the content by content from http://bit.ly/1fKOqEo

Lets set up contents

  1. Create a new file in the home directory call outline.md
  2. Insert the content from http://bit.ly/1fKOqEo

Lets set up contents

  1. Open about.md
  2. Replace all the content by content from http://bit.ly/1fKOqEo

Contents are ready and we can now let the template retrieve the content.

Jekyll uses Liquid as it’s templating language, so let’s have a look at Liquid now.

There are three types of control in Liquid—Tags, Objects, and Filter.

Tags are used to handle the logic in Liquid. Some of the regularly used tags are the for and if tags.

Objects acts like the alias of the contents that need to be displayed.

Filters are modifiers used to manipulate objects. It’s usually placed after “|”.

For loop

  1. Add {% for speaker in site.posts limit:1 %} to the top of your index.html content.
  2. Add {% endfor %} to the bottom of your index.html content.

Now try to replace the big titled Brad Frost by {{ speaker.name }}

Let’s try to replace the topic by {{ speaker.topic }}

Get it?

The content between triple-underscores are usable contents retrievable by objects.

So when you have small details you need in different parts of the website, try putting them in beteen the triple-underscores.

Remember they have to be at the top of the file.

For the main content, use .content.

But how about pages? can we get them like the posts?

No, you can’t. But there are workarounds to make it work.

First, we need to get a list of pages from the site.

{% for page in site.pages %}

{% endfor %}

Then we check if the name of the looped page is equal to the needed page’s.

{% for page in site.pages %}
{% if page.title == "outline" %}

{% endif %}
{% endfor %}

Tada! now you can get the content form the page.

{% for page in site.pages %}
{% if page.title == "outline" %}
	{{ page.content | markdownify }}
{% endif %}
{% endfor %}

Why is there a markdownify filter?

It’s because when we’re retrieving markdown content from a page, the markdown won’t be processed.

That’s why we need to process it as markdown manually.

You’ve already learned about the basics of Jekyll, now go ahead and finish the site.

I hope you’ve learned something from this workshop.

If you have any questions, feel free to ask me on Twitter at @chakler or you can also send me an email at hi@aclr.co.

See you next time!