Usando Bootstrap 3 con Sass

Bootstrap viene con Rejillas receptivas y algunos componentes web comunes que podemos recoger para crear rápidamente un sitio web receptivo . Si ha visto nuestras publicaciones anteriores en Bootstrap, probablemente sepa que los estilos de Bootstrap están compuestos por LESS.

Mientras que LESS se ha vuelto más poderoso con las nuevas características introducidas en la versión 1.5, algunos de ustedes estarán más familiarizados con Sass / SCSS. También puede haber algunas características en Sass que no puedes vivir sin ellas, pero no están presentes en LESS (aún). Si quieres trabajar en Boostrap y con Sass, gracias a Thomas McDonald, puedes hacerlo porque Bootstrap ha sido portado a Sass / SCSS .

Instalación

Hay algunas formas de comenzar a usar Bootstrap + Sass . En primer lugar, dado que se ha incluido como una gema Ruby, puede instalarlo a través de Terminal con la siguiente línea de comando:

 joya instalar bootstrap-sass 

También puede usarlo junto con Compass con este comando a continuación. Es lo mismo que la forma en que instalamos la Fundación Zurb. Sin embargo, tenga en cuenta que de esta forma solo se incluirán las variables _variables.less que contienen variables de Bootstrap y styles.less en las que coloca sus propias reglas de estilo.

 brújula crea mi-nuevo-proyecto -r bootstrap-sass --usando bootstrap 

Alternativamente, simplemente puede descargarlo desde el repositorio de Github.

Qué hay de nuevo en Bootstrap 3

Aquí hay algunas características nuevas que se encuentran en Bootstrap 3.

Diseño plano

El cambio que puede ver de inmediato en la nueva versión, Bootstrap 3, es que ahora abarca el diseño plano. Los degradados y las sombras que encontramos en los componentes de la versión anterior ya no están.

Cuadrícula en Bootstrap 3

Bootstrap también presenta un conjunto de nuevas clases y nuevas construcciones de grillas. En la versión 3, existen grillas grandes, medianas, pequeñas y extrapequeñas para adaptarse a diferentes tamaños de ventanas. Veamos el siguiente ejemplo de HTML:

Columna izquierda
Columna media
Columna derecha

Tenemos tres columnas. Cada columna tiene un ancho igual cuando se ve en un tamaño de ventana grande (en una pantalla de escritorio u orientación horizontal en la tableta). El tamaño se aplica con la clase col-md-4 .

Luego, cuando el tamaño de la pantalla se col-sm-*, la división del ancho de la columna se ajustará con la clase col-sm-*, de modo que el ancho de la columna pueda permanecer en la proporción correcta en lugar de simplemente apilarse, como en la versión anterior de Bootstrap.

Nuevos componentes

También se agregaron algunos Componentes nuevos en la versión 3. Esto incluye Buscapersonas (usado para construir el tipo de navegación Siguiente y Anterior), Grupo de Lista, Paneles y Encabezado de Página .

Utilizando funciones Sass

Técnicamente, podemos agregar clases Bootstrap a los elementos HTML para hacer el diseño del sitio web, como lo hicimos en el ejemplo anterior. Pero, al usar CSS Preprocesadores, como Sass, podemos utilizar algunas de las funciones para lograr una estructura de HTML más limpia y semántica en lugar de estar llenos de nombres de clase sin sentido.

Dado el ejemplo anterior, podemos cambiar la estructura y los nombres de las clases a algo como esto:

Este es el contenido.
Esta es la barra lateral.
Esta es la navegación.

Dentro de la hoja de estilo, podemos usar la directiva Sass @extend para construir el diseño. Usar @extend los selectores que comparten las mismas reglas de estilo.

 .main-area {@extend .row; } .column {@extend .col-md-4; } .content {@extend .col-xs-6; @extend .col-sm-6; } .sidebar {@extend .col-xs-4; @extend .col-sm-4; } .side-nav {@extend .col-sm-2; @extend .col-sm-2; } 

Alternativamente, también puede usar Sass @include que copiará e incluirá las reglas de estilo de mixins en nuestros selectores de clase.

 .main-area {@include make-row; } .content {@include make-xs-column (6); @include make-sm-column (6); } .sidebar {@include make-xs-column (4); @include make-sm-column (4); } .side-nav {@include make-xs-column (2); @include make-sm-column (2); } .column {@include make-md-column (4); } 

Ahora, visualícelo en el navegador y obtendrá un diseño receptivo.

Conclusión

Bootstrap y Sass definitivamente hacen un gran combo. Con Bootstrap, puede crear un sitio web receptivo y funcional en solo unas pocas horas . Y las características en Sass como @extend y @include pueden ayudarnos a escribir CSS más simple, programable y mantenible . Para obtener más información sobre Sass, puede consultar este artículo: Introducción a Sass: instalación y conceptos básicos.

Entonces, ¿has probado Bootstrap + Sass?

20 cosas organizadas de forma ordenada y creativa [PICS]

Hay un hashtag en Instagram llamado #ThingsOrganizedNeatly. Bajo el hashtag, encontrarás una plétora de imágenes que los usuarios tomaron de cosas ordenadas, casi obsesivas compulsivamente incluso.Si no conocía el hashtag, es posible que haya encontrado un blog de Tumblr que recopila todas estas imágenes. Lo

(Consejos de tecnología y diseño)

Encuentra combinaciones de fuentes perfectas con este generador de fuentes web

El texto juega un papel importante en el diseño de calidad. Esto definitivamente incluye la web donde la tipografía afecta la legibilidad. Con el auge de las webfonts, es más fácil que nunca variar el texto de su página y destacar entre las masas.Si puede encontrar los combos de fuentes perfectos para sus encabezados, texto de página, navegación y otras áreas, estará cerca de un diseño de diseño excelente.Brandmark

(Consejos de tecnología y diseño)