Bulma es un framework CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
Bulma Content se usa para hacer la tarea de contenido en la web, como si no puedes usar CSS o cuando solo quieres usar etiquetas HTML directamente, usa el contenido como contenedor. Puede manejar casi cualquier etiqueta HTML como HTML <p> , <ul> , <ol> , <dl> , <h1> a <h6> , <blockquote> , <em> , <strong> , <table> , < etiquetas tr> , <th> y <td > .
Variables de contenido de Bulma utilizadas:
- $content-heading-color: esta variable se utiliza para dar color al encabezado del contenido.
- $content-heading-weight: esta variable se utiliza para dar peso al encabezado del contenido.
- $content-heading-line-height: esta variable se utiliza para proporcionar la altura de línea al encabezado del contenido.
- $content-block-margin-bottom: esta variable se utiliza para proporcionar el margen inferior al bloque del contenido.
- $content-blockquote-background-color: esta variable se utiliza para proporcionar color de fondo a la cita en bloque del contenido.
- $content-blockquote-border-left: esta variable se usa para proporcionar un borde izquierdo a la cita en bloque del contenido.
- $content-blockquote-padding: esta variable se usa para proporcionar relleno a la cita en bloque del contenido.
- $content-pre-padding: esta variable se usa para proporcionar relleno previo al contenido.
- $content-table-cell-border: esta variable se utiliza para proporcionar una celda de borde a la tabla de contenido.
- $content-table-cell-border-width: esta variable se utiliza para proporcionar el ancho de la celda del borde de la tabla de contenido.
- $content-table-cell-padding: esta variable se utiliza para proporcionar relleno de celdas a la tabla de contenido.
- $content-table-cell-heading-color: esta variable se utiliza para dar color al encabezado de la tabla.
- $content-table-head-cell-border-width: esta variable se utiliza para proporcionar ancho de borde al encabezado de la tabla.
- $content-table-head-cell-color: esta variable se utiliza para dar color al encabezado de la tabla.
- $content-table-body-last-row-cell-border-bottom-width: esta variable se utiliza para proporcionar el ancho inferior de la última celda de la tabla.
- $content-table-foot-cell-border-width: esta variable se utiliza para proporcionar ancho a la celda de pie de la tabla.
- $content-table-foot-cell-color: esta variable se utiliza para proporcionar color a la celda de pie de la tabla.
Ejemplo 1: en el siguiente código, utilizaremos una de las variables anteriores para demostrar el uso del contenido. El $content-heading-color se usa para configurar el color del párrafo HTML .
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<style>
h2,p
{
text-align:center;
}
</style>
</head>
<body>
<center>
<h1 class="title has-text-centered has-text-success">
GeeksforGeeks
</h1>
<h3 class="subtitle has-text-centered">
A computer science portal for geeks.
</h3>
<div class="has-text-left ml-4">
<div class="content is-small">
<h2>Bulma Content:</h2>
<p>
Bulma is an Open source CSS framework
developed by Jeremy Thomas. This framework
is based on the CSS Flexbox property.
</p>
</div>
</div>
</center>
</body>
</html>
Código SCSS:
$content-heading-color:green;
p{
color:$content-heading-color;
}
Código CSS:
p
{
color: green;
}
Producción:
Ejemplo 2: en el siguiente código, utilizaremos una de las variables anteriores para demostrar el uso del contenido. El $content-heading-weight se usa para configurar el ancho del párrafo HTML .
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<style>
h2, p {
text-align:center;
}
p {
background-color:green;
color:white;
}
body {
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<center>
<h1 class="title has-text-centered has-text-success">
GeeksforGeeks
</h1>
<h3 class="subtitle has-text-centered">
A computer science portal for geeks.
</h3>
<div class="has-text-left ml-4">
<div class="content is-small">
<h2>Bulma Content:</h2>
<p>
Bulma is an Open source CSS framework
developed by Jeremy Thomas. This framework
is based on the CSS Flexbox property.
</p>
</div>
</div>
</center>
</body>
</html>
Código SCSS:
$content-heading-weight:60px;
p{
width:$content-heading-weight;
}
Código CSS compilado:
p
{
width: 60px;
}
Producción:
Referencia: https://bulma.io/documentation/elements/content/