How to Use a Bulma CDN Setup
Bulma is a free and open source CSS framework. What makes Bulma different from other CSS frameworks is that it's based on Flexbox - a new layout module in CSS3 made to improve the way items align within a container by allowing them to "flex" their sizes in order to fill the unused space or shrink to avoid overflowing. The image below from Bulma's website shows an example of this.
As more columns are added, each one automatically resizes itself to be able to fit within the flexbox container row. This makes working with CSS much less time-consuming. The Bulma CSS framework comes with a wide range of elements, layouts, and styles all readily available within the CSS file. It's also 100% responsive and modular meaning you just need to import what you need.
That being said, if you want to ensure your Bulma CSS file is being delivered to your visitors at optimal performance, you may want to consider using a Bulma CDN setup. In this guide, we'll go over two easy ways you can use a CDN to deliver your Bulma CSS file.
Using a Bulma CDN combination
You can accelerate your Bulma library CSS file a couple of different ways using a CDN. If you already have an existing CDN account, you are likely already delivering all CSS via your CDN's network of POPs. However if not, you can easily reference the files using your CDN URL. The second option for those who do not currently have a CDN account is to use a third party CDN service that is already hosting the files.
Option 1 - Using your own CDN account
The first option is to use your own CDN account to accelerate the Bulma CSS file. With KeyCDN, you have two ways to achieve this, either by using a Pull Zone or a Push Zone.
A Pull Zone requires that you integrate the CDN with your existing CMS or framework. Once properly integrated, the CDN will automatically pull all of your static assets from your origin server and cache them on request. Upon subsequent requests, your static assets will be delivered from the CDN edge server. Therefore, with using this method, there is no manual URL configuration required at the origin in order to accelerate the Bulma CSS via your CDN.
If using a Push Zone, you can simply upload the latest version of Bulma via FTP(S) or rsync and reference it in your project using your Zone URL or Zone Alias. For example:
https://cdn.yourwebsite.com/css/bulma.css
Option 2 - Using an open source CDN
The second option for using a Bulma CDN combination is to call the CSS file using an open source CDN such as cdnjs.com. The minified version of the cdnjs Bulma CSS file can be referenced using the following snippet (ensure that you first check for the latest version and replace x.y.z with the current version).
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/x.y.z/css/bulma.css" />
Bulma CSS code requirements
To get started with Bulma CSS there are a couple of code requirements you need to define in your HTML file. First off, use HTML5 doctype:
<!DOCTYPE html>
Secondly, add the responsive viewport meta tag as follows.
<meta name="viewport" content="width=device-width, initial-scale=1">
Then, simply create your HTML file as you normally would, using the Bulma CSS classes. Ensure that you also include the <link> element pointing to your Bulma CDN CSS file as shown above (e.g. <link rel="stylesheet" href="https://cdn.yourwebsite.com/css/bulma.css">)
Benefits of a Bulma CDN setup
Whether you're using the first or second option, speeding up any and all of your static CSS files with a CDN can result in major performance improvements for your website. This is because a CDN will shorten the distance between the client and server. Read our complete content delivery network guide to learn more about the benefits of using a CDN. There also exist many other advantages to users who accelerate their Bulma CSS file and other static content with KeyCDN such as:
- Brotli support for enhanced compression results.
- Access to our strategically placed growing global network of POPs.
- HTTP/2 supported edge servers for optimized content delivery.
- Free SSL certificates with Let's Encrypt integration.