How to migrate from Bulma CSS framework to Stylify CSS

This guide is here to help you quickly compare the features and syntax of the Bulma component framework with those of Stylify’s utility-first CSS, and give you an idea of how to migrate from Bulma to Stylify.

If you find any incorrect or missing information, please contact <a href="mailto:dev@stylifyccss.com">dev@stylifycss.com</a> or edit this page on Github.

Introduction

Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

Stylify CSS is a library that uses native CSS-like selectors color:blue, width:640px, margin:0_auto along with variables, components, custom selectors to generate optimized CSS dynamically based on what you write.

Selectors and CSS Utilities

Bulma provides CSS utilities for properties like color, spacing, typography, visibility, etc:

<div class="
	has-text-white
	mb-4 px-1
	is-capitalized
"></div>

Stylify uses CSS-like utilities, that can be used directly within the class attribute. There are no shortcuts by default and selectors cannot contain a space because of the further optimization:

<div class="
	color:blue
	font-weight:bold
	md:color:red
	md&&landscape:font-size:32px
	minw123px:font-size:123px
"></div>

When some selectors have the same pseudo-class or even media query, you can group them like this:

<div class="
	hover:{color:blue;text-decoration:underline}
	md:hover:{transform:scale(1.1);left:4px}
"></div>

Global Selectors

I could not find any information suggesting that Bulma provides something like dynamic Global Selectors.

Stylify provides custom selectors with which you can style elements globally. These selectors can be defined directly within the class attribute or in the global config or in a file where they are used using content options.

Example with the class attribute:

<div class="[.button_.icon]{font-size:14px}">
	<button class="
		[.icon]{color:#fff;border-radius:12px}
		[&+button]{margin-left:24px}
	">
		<i class="icon"></i>
	</button>
	<button></button>
<div>

The syntax pattern in the class attribute looks like this:

[css selectors]{stylify selectors split by ;}

The _ (underscore) is used instead of space in both CSS and Stylify selectors and the & character always refers to the current element.

The same code but in the global config would look like this:

const compilerConfig = {
	customSelectors: {
		'.buttons-wrapper .button .icon': 'font-size:14px',
		'.button': `
			.icon { color:#fff border-radius:12px }
			& + button { margin-left:24px }
		`,
	}
}

When defining `customSelectors` in the global config on through content options, the syntax lets you use a nesting feature. The & characters refers to the upper level like in the SCSS.

Usage of the global config:

<div class="buttons-wrapper">
	<button class="button">
		<i class="icon"></i>
	</button>
	<button></button>
<div>

Components

Bulma is a framework based on components. Therefore, there are plenty of components, such as buttons, badges, forms, tables, menus, etc:

<input class="input is-primary">
<aside class="menu">
	<p class="menu-label">General</p>
	<ul class="menu-list">
		<li><a>Dashboard</a></li>
	</ul>
</aside>

Stylify doesn't provide any predefined CSS Components by default. However, it provides two ways to define them and there is a set of copy&paste Headless Components you can use in your project.

Components can be configured in a file (using content options), where they are used, or globally within a $projectConfig.

Example with the configuration within a file. The content between stylify-components expects javascript object without surrounding brackets:

<!--
stylify-components
	title: 'color:blue font-weight:bold md:color:red'
/stylify-components
-->
<h1 class="title"></h1>

Example in a global compiler config:

const compilerConfig = {
	components: {
		title: 'color:blue font-weight:bold md:color:red'
	}
};

Usage:

<h1 class="title"></h1>

When defining component, you can also use nesting syntax like in SCSS. This works in a global config and also in the content options:

const compilerConfig = {
	components: {
		button: `
			color:black font-weight:bold
			&:hover { color:grey }
			&--red {
				color:red
				&:hover { color: darkred }
			}
		`
	}
};

Configuration, Customization and Variables

Bulma is configured through SCSS variables within an import file and the theme is generated during a build process:

// Set your brand colors
$purple: #8A4D76;
// ...

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
// ...

// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
// ...

// Import only what you need from Bulma
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
// ...

In Stylify, there is nothing like a "theme", neither extend section in $projectConfig. There are only variables.

Variables can be defined in two ways in Stylify. In a global config or within a file where they are used via content options.

Example with global config:

const compilerConfig = {
	variables: {
		primary: '#000',
		secondary: '#eee',
		titleFontSize: '24px',
		shadow: '0 2px 3px #000'
	}
}

Variables can also be defined based on media query:

const compilerConfig = {
	variables: {
		dark: { blue: 'lightblue' },
		md: { fontSize: 24px },
		'minw640px': { fontSize: 32px },
		// When screen is not found, it falls back to a random custom selector
		'.dark': { blue: 'lightblue' },
		':root[data-theme="dark"]': { blue: 'lightblue' }
	}
}

Example with content options:

<!--
stylify-variables
	primary: '#000',
	secondary: '#eee'
	titleFontSize: '24px',
	shadow: '0 2px 3px #000'
/stylify-variables
-->
<div class="color:$primary"></div>

Integrate Stylify into your favorite tool

Stylify can be used in various tools. Pick your favorite tool and start using Stylify CSS in a minute.

Get Started

Speed up development with prepared Headless CSS Components

Copy&Paste, unstyled components inspired by the Material Design V3.