Bulma provides a structured and intuitive system for managing typography and spacing, offering developers a set of classes that simplify the styling of text elements and spacing within their web layouts.
Typography :
* Base Typography : Bulma establishes a consistent baseline typography across the site, ensuring uniformity in font sizes, line heights, and other typographic properties.
* Heading Styles : Bulma includes classes (
title,
subtitle,
is-size-1 to
is-size-6, etc.) that define various heading sizes. These classes allow developers to easily set the size of headings according to their hierarchy.
* Text Styling : It provides classes for styling text elements, including bold (
has-text-weight-bold), italic (
is-italic), underlined (
has-text-underlined), etc., allowing for quick text modifications.
* Responsive Typography : Bulma's responsive typography classes (
is-size-,
is-family-, etc.) enable developers to set different font sizes or font families based on screen sizes, ensuring readability across devices.
Spacing :
* Padding and Margin Utilities : Bulma offers a comprehensive set of classes (
padding,
margin,
is-marginless,
is-paddingless, etc.) that allow precise control over spacing within elements. These classes can be applied to add or remove padding and margins around elements.
* Spacing Scale : Bulma follows a consistent spacing scale (
e.g., is-1, is-2, up to is-7) to define different levels of spacing. Developers can easily apply these classes to elements to maintain consistent and aesthetically pleasing spacing throughout the layout.
* Vertical Rhythm : Bulma's vertical rhythm classes (
is-desktop,
is-mobile, etc.) help maintain consistent vertical spacing between elements at different breakpoints, ensuring readability and a harmonious layout across various screen sizes.
* Box Elements : Bulma includes classes for creating box elements (
box,
notification,
message, etc.) with predefined padding and margins, offering consistent styling and spacing for these components.
Example Usage :
<!-- Typography -->
<h1 class="title">This is a title</h1>
<p class="subtitle">This is a subtitle</p>
<p class="is-size-5">This text has a custom font size</p>
<!-- Spacing -->
<div class="box has-text-centered is-paddingless is-marginless">
<p>This box has no padding or margin</p>
</div>
<div class="container is-6">
<p>This container has Bulma's default spacing</p>
</div>​
Bulma's typography and spacing utilities simplify the process of styling text elements and managing spacing within layouts, providing developers with a structured and consistent approach to create visually appealing and well-organized content.
