Estilos CSS

En esta parte el objetivo es agregar la librería Bootstrap al proyecto, gracias a la cual vamos a tener estilos CSS que dejen un poco más prolija la aplicación.

1. Agregamos una gem para usar Bootstrap

Agregamos una línea en el archivo Gemfile para incluir la gem bootstrap-sass en nuestro proyecto:

# Gemfile

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
 
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# <<<<<<<<<
gem 'bootstrap-sass'
# >>>>>>>>>

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platform: :mri
end

Corremos el comando para efectivamente incluir la gema:

$ bundle install

A partir de ahora vamos a poder usar estilos escritos con SASS y también apoyarnos en lo que nos brinda la librería Bootstrap.

2. Cargamos estilos

Necesitamos renombrar el archivo app/assets/stylesheets/application.css a app/assets/stylesheets/application.scss

Reemplazamos el contenido de ese archivo con el siguiente código:

// app/assets/stylesheets/application.scss


@import "bootstrap-sprockets";
@import "bootstrap";

Nota: Es importante que se borre todo el contenido que tenía ese archivo, o bien asegurarnos de que el archivo app/assets/stylesheets/scaffolds.scss esté eliminado (es un archivos de estilos que agrega el generador de scaffold, que no lo queremos seguir usando o referenciando en nuestra aplicación).

3. Agregamos estilos propios

Vamos a ponerle un poco de color a nuestra aplicación agregando código SASS propio. Debemos copiar este código y pegarlo en un nuevo archivo en la carpeta donde están los archivos de estilo: app/assets/stylesheets/trello-theme.scss

Luego, debemos importar ese archivo en el archivo principal donde deben incluirse todos los estilos:

// app/assets/stylesheets/application.scss

@import "bootstrap-sprockets";
@import "bootstrap";
@import "trello-theme";

Como agregamos una nueva gema, debemos reiniciar el servidor antes de probar los cambios en el browser. Luego de hacer eso podemos probar como cambió la aplicación.

Commit en Git

git add -A
git commit -m "Estilos CSS"

---

Siguiente: 1.4. Barra de Navegación y Layout