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

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

Did you enjoy this post?

You have Successfully Subscribed!

Recent Posts

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

Did you enjoy this post?

You have Successfully Subscribed!

Recent Posts

Get Started with Frontend CSS Frameworks using Python and Django