UI and CSS

In this chapter, we'll set up our UI library and CSS build process using PostCSS.

UI and CSS setup#

For this course, we'll be using a combination of Blueprint UI Framework and Tailwind CSS. Blueprint (or BlueprintJS) is a set of React UI components like modals, inputs, buttons etc. Tailwind CSS is a functional (or atomic) CSS framework that exposes utility classes that can be mixed to create responsive UIs.

Both BlueprintJS and Tailwind need a set of CSS classes to function. In combination, this leads to heavy CSS import. For development use, a large bundle size doesn't matter. For production use, you can easily minify CSS using any standard minifier, like PurgeCSS. This part is independent of Clojure.

Install BlueprintJS#

The Blueprint UI framework is managed by Palantir Technologies. Blueprint is open-sourced under Apache 2.0 License and is free for commercial use.

It is distributed as @blueprintjs/core package:

This installs the React components, but you still need to import CSS files to get the styles working.

At the time of this writing, the latest version of @blueprintjs/icons (a package that @blueprintjs/core depends on) throws a parsing error in Google Closure Compiler. If you see Exception parsing "~/tinycanva/node_modules/@blueprintjs/icons/lib/cjs/generated/iconContents.js", you can fix it by installing an older version of @blueprintjs/icons explicitly:

This section will be updated when the bug is resolved.

Install Tailwind#

Tailwind is an atomic CSS library. It ships thousands of utility classes. For example: class names m-0, m-1, ... m-n specify the style margin:n rem.

Instead of adding a class to an element and styling that class, you add a class to the element for each style you want to apply. For example, if you have a div and you'd like to set a border and padding on it, you can add the classes border-solid p-2 to it. You can change the border color using the class border-black (or pick from a variety of other colors). We recommend this 30-minute crash course by Traversy Media if you'd like to learn more about Tailwind.

Tailwind ships as an NPM package with some added dependencies and scripts for customization. We need the tailwindcss package:

To customize Tailwind with brand colors, we need to create a configuration file in the root directory (the directory containing package.json). This can be done using the tailwindcss binary that ships with the package:

This will create a file called tailwind.config.js in the root directory. With this configuration, you can change the default fonts, colors, margin sizes etc.

Install PostCSS#

PostCSS allows us to bundle, minify, and purify (remove unused classes from) CSS from a variety of CSS sources like Saas, Less, Stylus, etc. It ships with a plugin ecosystem to enhance various aspects of writing CSS.

We'll use PostCSS to compile Blueprint and Tailwind CSS styles. In our setup, we don't need to write any custom CSS as we will rely on Tailwind (and some inline styles). However, if you do need to write custom CSS, you can bundle and process that too with PostCSS:

We also need postcss.config.js file to configure PostCSS plugins. Create this file in the project root and add the following configuration to it:

  • the postcss-import plugin inlines import statements, ie takes the content of the imported file and puts it at the place it was imported, essentially leading to one compiled file

  • the tailwindcss plugin gives access to TailwindCSS files and configuration

  • the autoprefixer plugin automatically adds browser-specific prefixes like moz- and webkit- to styles that need it

Create a CSS source directory#

We will store CSS files in the src/css folder, then create a mechanism to process those files and import them in public/index.html:

Create Blueprint CSS source#

BlueprintJS requires three CSS files to function. We will create src/css/blueprint.css to import these files. You can also configure PostCSS to inline the contents of these files leading to one compiled CSS file:

Then populate it with the following content:

 

This page is a preview of Tinycanva: Clojure for React Developers

Please select a discussion on the left.