hernandezblasantonio/pw/documentacion/html/css/bulma

Bulma

Bulma is an open source CSS framework based on Flexbox. - https://bulma.io

Bulma CSS es una herramienta creada por Jeremy Thomas y su principal ventaja es que su modelo de caja está completamente basado en Flexbox. (Sí! No más Floats CSS ni porcentajes!). Bulma dice que sus principales características son: 100% responsivo, modular, moderno y gratis. - Bulma CSS: un framework ligero y poderoso

Uso

Bulma no requiere del uso de jQuery.

  1. Crea el directorio $HOME/www/bulma01 y accede a él:

    alumno@servidor:~ $ mkdir -p $HOME/www/bulma01
alumno@servidor:~ $ cd $HOME/www/bulma01

  2. Accede a https://github.com/jgthms/bulma/releases/latest, descarga el archivo en formato zip ofrecido con nombre bulma-*.zip y descomprimelo:

    alumno@servidor:~/www/bulma01$ unzip $HOME/Downloads/bulma-0.7.1.zip

    En este caso se ha descargado a Bulma en su versión 0.7.1 (bulma-0.7.1.zip) en el directorio $HOME/Downloads.

    El archivo zip ofrecido por Bulma cuenta con varios recursos siendo el directorio css el único a usar.

    alumno@servidor:~/www/bulma01$ pwd && tree -L 3
/home/alumno/www/bulma01
.
└── bulma-0.7.1
    ├── CHANGELOG.md
    ├── LICENSE
    ├── README.md
    ├── bulma.sass
    ├── css
    │   ├── bulma.css
    │   ├── bulma.css.map
    │   └── bulma.min.css
    ├── package.json
    └── sass
        ├── base
        ├── components
        ├── elements
        ├── grid
        ├── layout
        └── utilities

9 directories, 8 files

  3. Restructura los archivos ofrecidos por Bulma:

    alumno@servidor:~/www/bulma01 $ mv bulma-0.7.1/css/ .

  4. Crea los archivos vácios css/main.css y js/main.js:

    alumno@servidor:~/www/bulma01 $ mkdir js
alumno@servidor:~/www/bulma01 $ touch css/main.css js/main.js

  5. Integra a FontAwesome al proyecto accediendo a http://fontawesome.com/get-started/svg-with-js y en la sección Download, Customize, and Serve Yourself obten el archivo en la opción Download Font Awesome Free. En este caso se ha descargado el archivo fontawesome-free-5.0.13.zip de FontAwesome en su versión 5.0.13 en el directorio $HOME/Downloads.

    Descomprime el archivo fontawesome-free-5.0.13.zip y restructura los archivos ofrecidos por FontAwesome:

    alumno@servidor:~/www/bulma01 $ unzip $HOME/Downloads/fontawesome-free-5.0.13.zip
alumno@servidor:~/www/bulma01 $ mv fontawesome-free-5.0.13/svg-with-js/css/* css/
alumno@servidor:~/www/bulma01 $ mv fontawesome-free-5.0.13/svg-with-js/js/* js/

  6. Crea el archivo index.html con el siguiente contenido:

    <!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="css/bulma.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script defer src="js/fontawesome-all.min.js"></script>
  </head>
  <body>
  <!-- CONTENIDO -->
  <!-- /CONTENIDO -->
  <script src="js/main.js"></script>
  </body>
</html>

    Al terminar en el directorio $HOME/www/bulma01 encontrarás la siguiente estructura:

    alumno@servidor:~/www/bulma01 $ pwd && tree -L 2
/home/alumno/www/bulma01
.
├── bulma-0.7.1
│   ├── CHANGELOG.md
│   ├── LICENSE
│   ├── README.md
│   ├── bulma.sass
│   ├── package.json
│   └── sass
├── css
│   ├── bulma.css
│   ├── bulma.css.map
│   ├── bulma.min.css
│   ├── fa-svg-with-js.css
│   └── main.css
├── fontawesome-free-5.0.13
│   ├── LICENSE.txt
│   ├── README.md
│   ├── advanced-options
│   ├── svg-with-js
│   ├── use-on-desktop
│   └── web-fonts-with-css
├── index.html
└── js
    ├── fa-brands.js
    ├── fa-brands.min.js
    ├── fa-regular.js
    ├── fa-regular.min.js
    ├── fa-solid.js
    ├── fa-solid.min.js
    ├── fa-v4-shims.js
    ├── fa-v4-shims.min.js
    ├── fontawesome-all.js
    ├── fontawesome-all.min.js
    ├── fontawesome.js
    ├── fontawesome.min.js
    └── main.js

9 directories, 26 files

  7. Inicia a thttpd y accede a él con el navegador web.

Notas

  • El contenido de tu documento HTML, y que será visualizado por el usuario, quedará dentro de los comentarios CONTENIDO.

  • Si requieres modificar el aspecto visual o estilo de algún elemento HTML lo llevas a cabo en el archivo css/main.css.

    Recuerda que tendrás que hacer uso de selectores de CSS.

  • Los directorios bulma-0.7.1 y fontawesome-free-5.0.13 pueden ser borrados.

Lecturas