Design Systems Crash Course: Introduction

design-systems

Hello and welcome to this page. What follows is a 3 part email course that used to live as an email course behind DesignSystemsCrashCourse.com (now dead).

It has been featured on podcasts such as Python Talk, Freelancers Podcast, and UI Breakfast. I believe there is still a lot of value in the material, so I am making it available for free. If you are a designer or a developer who is new to design systems or UI component libraries, this can be a great starting point not only for getting some traction on the project, but learning how to sell it to management.

And on to the first email…

What follows in this course two actionable things you can do right now to realize huge savings in your project.

Before talking about those ideas, I wanted explain what the benefits of using Design Systems Engineering in your project.

Foster better communication
Play to your team’s strengths
Avoid conflict between teams (such as Design vs. Engineering)
Produce a better quality product
More design consistency
Less meetings

Yes, and that last one is no doubt going to save you headache and your organization money.

So this all sounds great, but how are we going to get there?

We are going to get there by creating a set of communication tools that allows interdisciplinary teams to quickly and clearly communicate their ideas or reference how something should be done.

This is no easy feat since teams often have objectives that overlap and perhaps agendas that can conflict with one another.

Let me illustrate this point with an example of how web development was done in the past (and continues to this day).

The design teams supplies the engineering team with a set of photoshop high fidelity mocks. There is a large meeting to discuss what each mock is and little details and nuances of how the interface is supposed to work. The engineers take notes based on this ephemeral conversation and return to their lair to hammer out the project.

Then there are the questions…

Hey, is this button is a different size?
What color is this grey?
How far is that spacing?
Why is it 17px here and 19px there?
Where are the icons?

And so the back and forth between design and engineering starts. It tends to be very detail oriented based on whatever template engineering decided to start with.

Even this decision is one that has a huge divide between the two teams. Design probably wants to see the most visually stunning page (often the home page) finished first, while engineering focuses on the page with the most complexity first, paying no attention to aesthetics.

And so, how are these questions answered typically?

Meetings, meetings, and more meetings.
Designers talking to engineers.
Pair sessions with designers sitting with the engineers.

And this is compounded because rather than going through the entire project looking for inconsistencies it is often approached in a template-by-template way.

This is a terribly inefficient process. The only way that products end up hitting that professional level is just a matter of throwing a huge amount of time and energy at it.

Eventually the project is complete and everyone has gotten everything to fit.

But the final site might not resemble the original designs exactly and vice versa.

Likely there have been some changes along the way and the only thing keeping your process together is the verbal history of your tribe.

If the unthinkable happened, and you had to start over with a completely new team, it is unlikely that anyone could decipher the mocks and the final project and figure out what had been done.

I am here to tell you that there is a better way. And that better way is Design Systems Engineering.

Perhaps you have heard of Design Systems and even seen a few on the web. Perhaps you even have implemented (more or less successfully) a set of Design Systems at your own organization.

First off I want to dispel a myth.

A proper Design System for your organization does not need to look like the style guides published by MailChimp, Salesforce Lightning or Google Material Design. These are all beautiful, but they are just examples of how these organizations publicly share or draw attention to their process.

In a recent talk by Jina Bolton of Salesforce she said that, “Design Systems contain whatever your organization needs to communicate design decisions.“

In my experience there are two ways to get started with creating a Design System that will work for an organization of any size. Even a web team of one.

These are 1. front-end code and 2. a living styleguide.

Both of these are what I like to call low hanging fruit. This means that you will be able to build these the fastest, with the least amount of effort, and they will have the biggest rewards.

In the next email I am going to talk about what I mean exactly in regards to front-end code, what my process is, and how this is going to help your team.

Until tomorrow.

-James Stone, Design Systems Engineering – ZURB Foundation Specialist

P.S. A little bit about me. My name is James Stone and I am an independent Design Systems Engineer and an Adjunct Professor at the College of Arts and Architecture at Penn State. For the past 4 years I have worked with diverse design and development teams on a variety of fast-paced projects. In these projects there is always the same goal: to bring world class level products to life in a short time frame. If you would like to learn more, a good place to start is my Featured Articles + Talks Page.

UPDATE 2019: I am now working as a Senior Software Developer at Futurice and the best place to learn more about me is on my personal website at JamesStone.com

Is jQuery still relevant in 2018

video

Get Started with Frontend CSS Frameworks using Python and Django

design-systems

Get Started with Frontend CSS Frameworks using Python and Django

Getting started with a CSS framework can be a daunting task. There tends to be a lot of information, a lot of details, and a lot of emphasis on complicated frontend tooling.

Sometimes all you need is a quick way to start quickly, with a step-by-step guide that is specific to the language you working with. In this guide, I give you some insight into the strengths of each framework, and then show you step-by-step how to implement it with Python.

Although these techniques are largely language and platform independent, specificity to Django and Python will be used.

Bootstrap – A safe bet for Devs

One of the most popular frameworks and for good reason. It is developer friendly, has great documentation and looks designed right out of the box. Better yet, grab a theme (free or commercial) and you could be close the look you want right out of the gate. Perfect for teams working on MVP or v1 web apps or personal projects.

Get started with Bootstrap + Python

ZURB Foundation – Best for Visual Brands

One of the favored frameworks of visual designers and projects that have strong visual brands, ZURB Foundation is one of the most popular. Just like a real “foundation” the goal is to build your visual design upon a robust set of starter components that are largely unstyled. This allows you to form the framework into any sort of visual design without having to reinvent the wheel or start from scratch.

Get started with ZURB Foundation + Python

UIKit – Trendy visuals safe for Devs

With the adoption of flat design and material elements, Bootstrap has become much more minimal in its design opinion. UIKit brings that opinion back with strong visual decisions, slick animations, and a more polished look out of the box. If the style is close to the look and feel you are looking for, UIKit might be a good fit for your team.

Get started with UIKit + Python

Talk Python Episode #137: Design concepts and tips for developers

This resource was created by James Stone as a resource for python developers and the audience of the TalkPython[‘podcast’]. I have included an embed of the episode below for context or you can visit the official episode page.

[tcb-script](function(p,l,a,y,e,r,s){if(p[y]) return;if(p[e]) return p[e]();s=l.createElement(a);l.head.appendChild((s.async=p[y]=true,s.src=r,s))}(window,document,’script’,’__btL’,’__btR’,’https://player.backtracks.fm/embedder.js’))[/tcb-script]

Additional resources:

Choosing the right framework for your next project or to guide your team is no daunting task. Here are a few resources to help guide you in your research journey:

Smashing Magazine: Which Responsive Design Framework Is Best? Of Course, It Depends.By Jen Kramer
James Stone: Bootstrap vs. ZURB Foundation (video 13m)
James Stone: Save on Development Costs by Using a Framework
James Stone: The Right Framework
James Stone: 6 Myths about Modern CSS Frameworks
James Stone: Why can‘t most front-end engineers pull off a pixel perfect design?

0 shares Share0 Tweet0 Share0

Guide to Getting Started with Bootstrap + Python

There are basically 3 methods to getting started with Bootstrap quickly with Python. I will use Django as the basis for the example, but the same principals apply if you are using another framework such as Flask. NOTE: I am showing how to install and use Bootstarp vs 3.3.7 the last stable release version. If you follow the official docs you will be prompted to install the beta version, 4.0 which I wouldn’t suggest until it is out of beta and tested.

Method 1: CDN based simple link

By far the most simple to use method to get started with Bootstrap is to add the CDN to your main templates. Not only is this easy to implement on any project, but you can also use tools such as CodePen or JSFiddle to prototype components, test things out or work on your frontend code in isolation.

Copy and paste the following into the head section of your html template:

Ideally what you want to do is have a more complete base template that you use for your project. Here is an example using the above CDN references as a complete template, extrapolated from the Bootstrap Official Docs.

<!DOCTYPE html><html lang=”en”><head><meta charset=”utf-8″><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width, initial-scale=1″><!– The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags –><title>Bootstrap 101 Template</title><!– Bootstrap –><link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”><link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css” integrity=”sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp” crossorigin=”anonymous”><!– WARNING: Respond.js doesn’t work if you view the page via file:// –><!–[if lt IE 9]><script src=”https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js”></script><script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script><![endif]–></head><body><h1>Hello, world!</h1>

Method 2: Download Static CSS and JavaScript files

Once you have decided that Bootstrap is the framework for you, it is time to lock it down and import static files into your project. The best way to accomplish that is to go to the direct download link for version 3.3.7. (release notes)

├── css│ ├── bootstrap-theme.css│ ├── bootstrap-theme.css.map│ ├── bootstrap-theme.min.css <– important│ ├── bootstrap-theme.min.css.map│ ├── bootstrap.css│ ├── bootstrap.css.map│ ├── bootstrap.min.css <– important│ └── bootstrap.min.css.map├── fonts│ ├── glyphicons-halflings-regular.eot│ ├── glyphicons-halflings-regular.svg│ ├── glyphicons-halflings-regular.ttf│ ├── glyphicons-halflings-regular.woff│ └── glyphicons-halflings-regular.woff2└── js ├── bootstrap.js ├── bootstrap.min.js <– important └── npm.js

Now all you have to do is copy the important bits into your static files directory. Once there you simply need to create a template similar to step 1, but replace the URLs from from Method 1’s template above, using URLS that are specific to your server or dev environment.

Don’t forget you will also need to download and link to jQuery and Popper libraries for Bootstrap to function correctly.

Method 3: Use Sass and Modern Frontend tooling

This is perhaps the most advanced and most difficult approach to getting Bootstrap into your Django app. It is also the most powerful, and is most suited to large team projects where organization of Sass / CSS into files, mixins, and variables are critical for your workflow.

Bootstrap does not come with a default set of proposed tooling, so my recommendation is to follow the excellent tutorial, Creating a Custom Bootstrap Build with Scss by Trey Hunter on Code Mentor.

Guide to Getting Started with ZURB Foundation + Python

There are basically 3 methods to getting started with ZURB Foundation quickly with Python. As a special note, ZURB Foundation typically needs to have a design placed upon it, so it will look the “least designed” out of the box. However, if you plan to work with visual designers and have a strong visual brand for your app, this is your best choice. I will use Django as the basis for the example, but the same principals apply if you are using another framework such as Flask.

Method 1: CDN based simple link

By far the most simple to use method to get started with ZURB Foundation is to add the CDN to your main templates. Not only is this easy to implement on any project, but you can also use tools such as CodePen or JSFiddle to prototype components, test things out or work on your frontend code in isolation.

Copy and paste the following into the head section of your html template:

Note about older version above: the most recent version of the Official ZURB Foundation Docs states that the current version is 6.4.3. In the example above I have used the last stable version of 6.3 because they have introduced a non-standard grid syntax called the XY Grid. Although it is a very interesting abstraction of flexbox and allows you to control the vertical nature of the grid, the syntax and concepts are more complex that the other two frameworks listed. Version 6.3 uses the Flexbox Grid which has many of the same features and an easier to understand syntax.

<!doctype html><html lang=”en”><head> <meta charset=”utf-8″ /> <meta http-equiv=”x-ua-compatible” content=”ie=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> <title>Foundation Starter Template</title> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css” integrity=”sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=” crossorigin=”anonymous” /></head><body> <h1>Hello, world!</h1> <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js” integrity=”sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=” crossorigin=”anonymous”></script> <script> $(document).foundation(); </script></body></html>

Method 2: Download Static CSS and JavaScript files

Once you have decided that ZURB Foundation is ideal for your project, and you are not quite ready for the complexity of their front-end tooling yet, downloading static files is a good way to go. ZURB Foundation has several different ways to accomplish this via their Official Download Page. Complete which has everything (all options on), Essential which is a lighter version (in file size and also features) and Custom, which is unique to the ZURB Foundation Framework.

As noted in Method 1 above, the most recent version of ZURB Foundation 6.4+ enables the XY Grid by default. It is my recommendation that you default back to the Flexbox grid which has a easier to learn and understand syntax.

To do this, you will need to use the Custom Download.

Under Grid: you want to select the radio button called “Float Grid”

Once you have made that change scroll to the bottom and click the “Download Custom Build”

As a side note, you can come back to this page at any time, remove or add components, change colors and other settings, which gives you some of the power of Sass, but in an easy to configure method. If you end up need to tweak one of these settings, you can just open up this page again, make your changes, and download a new set of files.

├── css│ ├── app.css <– your custom CSS styles│ ├── foundation.css│ └── foundation.min.css <– ZURB Foundation’s CSS├── index.html <– Starting point for your base template└── js ├── app.js <– ZURB Foundation is instantiated + Your own JavaScript └── vendor ├── foundation.js ├── foundation.min.js <– ZURB Foundation JavaScript ├── jquery.js <– Required └── what-input.js <– Also Required

As compared to the same process for Bootstrap in Method 2 above, you will see that ZURB Foundation provides a complete static file starter project. What you need to do is to copy the important files to your static files and make adjustments to your index.html as a base template for your Django app.

ZURB Foundation tends to be more opinionated about process and tooling (as I will explain in method 3) so you will see that there are two files generated to be modified in your project. ~/css/app.css is for your custom CSS styles and ~/js/app.js starts the JS part of the framework and acts as a home for your project JavaScript. This is apposed to the hard coded <script> tag from the template above from Method 1. You can change this structure, but if you use ZURB Foundation across a lot of projects (or plan to) it can be useful to leave it in a similar state so it matches up with the rest of the official docs.

Method 3: Use the ZURB Foundation frontend tooling

ZURB Foundation is well known for its extensive and modern frontend tooling setup. This can both a pro and a con. This sometimes happens at the expense of documentation on easier to use methods (described above), but it is the only framework that has such an extensive toolset at your disposal.

The easiest way to get started with the 2 starter projects is to install the ZURB Foundation CLI.

npm install -g foundation-cli

Once this is done you can access the CLI without any options other than new.

foundation new

Here is what you will be presented with:

? What are you building today?❯ A website (Foundation for Sites) <– you want this in all casesA web app (Foundation for Apps)An email (Foundation for Emails)

? What’s the project called? (no spaces) <– give it a name? Which template would you like to use?❯ Basic Template: includes a Sass compilerZURB Template: includes Handlebars templates and Sass/JS compilers

Basic Template

The basic template provides you with a simple Gulp based Sass compiler with a watcher task that also runs it through autoprefixer. This allows you to avoid using CSS vendor prefixes entirely and gives you a programatic way to support older browsers in this way.

This is the bare-bones way to approach this problem. You can even take this starter project and reconfigure it for either Bootstrap or UIKit by updating a few files and updating where the sass files are compiled from. It is certainly worth taking a look at the github repo if you are considering adding something like that to your project.

ZURB (Stack) Template

This is where the real magic happens with ZURB Foundation. The ZURB Template is the internal frontend tooling that the agency ZURB uses on its very own client projects. This is a state of the art approach using an inhouse variation of assemble.io (a static site generator) that comes complete with helper functions that are to help you build frontend code templates. This includes states for navigation based on the current page and repeaters that allow you to simply repeat a block of code several times. {{#repeat 100}} <p>yay!</p> {{/repeat}}

Here is a partial list of some of the features that set the ZURB Template apart:

Browser live reload
Dev and Production modes
CSS Minification
JavaScript concatenation and minification
Style Sherpa living styleguide generator
YML configured Gulp Workflow
Autoprefixer

This is the exact system that I use for building frontend code templates and living styleguides for my own client projects. It is lightning fast, allows you to work on the frontend code in isolation, and even allows you to do advanced things such as stub in data for complex patterns or even repurpose the starter project for Bootstrap, UIKit or your own internally managed codebase.

More…

Guide to Getting Started with UIKit + Python

There are basically 3 methods to getting started with UIKit quickly with Python. As a special note, UIKit will look and feel the “most designed” out of the box and might more fun. However, if have an established or growing team, Bootstrap could be a better choice since more devs will be familiar with the syntax. The deciding factor will be balancing the “more well known” factor against how close UIKit gets you to your final design. I will use Django as the basis for the example, but the same principals apply if you are using another framework such as Flask.

Method 1: CDN based simple link

By far the most simple to use method to get started with UIKit is to add the CDN to your main templates. Not only is this easy to implement on any project, but you can also use tools such as CodePen or JSFiddle to prototype components, test things out or work on your frontend code in isolation.

Copy and paste the following into the head section of your html template:

<!DOCTYPE html><html><head><title>Title</title><meta charset=”utf-8″><meta name=”viewport” content=”width=device-width, initial-scale=1″><link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/css/uikit.min.css” /><h1>Hello, world!</h1><script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script><script src=”https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.4/js/uikit.min.js”></script></head><body></body></html>

Method 2: Download Static CSS and JavaScript files

UIKit’s official docs suggest grabbing the latest release. In this case We are presented with a beta rather than a stable version, so I would recommend defaulting down to the latest stable version. At the time this was written (Nov 2017), this is 2.27.4 and can be downloaded directly from this link.

├── css│ ├── components│ ├── uikit.almost-flat.css│ ├── uikit.almost-flat.min.css│ ├── uikit.css│ ├── uikit.gradient.css│ ├── uikit.gradient.min.css│ └── uikit.min.css <– Important├── fonts└── js ├── components ├── core ├── uikit.js └── uikit.min.js <– Important

UIKit comes with a ton of static files, which would allow you to be more selective about which components are loaded or not. In the simplest case you just need the two files marked above as important as well as to download and link a suitable version of jQuery similar to Method 1 above.

These 3 files: uikit.min.css, uikit.min.js and your downloaded version of jQuery should be added to your static files and linked in a base template for your Django app.

Method 3: Integrate either Less or Sass into Django

UIKit provides an out of the box precompiler for Less. You can read the official docs for the details and once that is set up you can either run `npm run compile’ to compile your CSS files or `npm run watch` to have a watcher automatically recompile your Less into CSS in the background everytime a file changes.

They also provide documentation on how their Sass based structure works with a Sass complier, but they do not provide a starter project nor explain how to configure this.

0 shares Share0 Tweet0 Share0

Public Speaking Tips – VLOG 005

vlog

Finnish Breakfast – An American Perspective in Finland – VLOG 004

vlog

« Older Entries

Design Systems Crash Course: Introduction

Is jQuery still relevant in 2018

Get Started with Frontend CSS Frameworks using Python and Django

​Get Started with Frontend CSS Frameworks using Python and Django

Bootstrap – A safe bet for Devs

ZURB Foundation – Best for Visual Brands

UIKit – Trendy visuals safe for Devs

Talk Python Episode #137: Design concepts and tips for developers

Additional resources:

Guide to Getting Started with Bootstrap + Python

Method 1: CDN based simple link

Method 2: Download Static CSS and JavaScript files

Method 3: Use Sass and Modern Frontend tooling

Guide to Getting Started with ZURB Foundation + Python

Method 1: CDN based simple link

Method 2: Download Static CSS and JavaScript files

Method 3: Use the ZURB Foundation frontend tooling

Basic Template

ZURB (Stack) Template

Guide to Getting Started with UIKit + Python

Method 1: CDN based simple link

Method 2: Download Static CSS and JavaScript files

Method 3: Integrate either Less or Sass into Django

Public Speaking Tips – VLOG 005

Finnish Breakfast – An American Perspective in Finland – VLOG 004

Recent Posts

Get Started with Frontend CSS Frameworks using Python and Django