Tag Archives: css

diseño

Incorporar SASS en Vue.js

Comenzar un proyecto usando Vue.js es bien fácil. A través del vue-cli tenemos lo básico para arrancar de inmediato. Una de las opciones que incluye esta configuración es la habilidad de poder utilizar SASS o SCSS en tu proyecto. En resumen, SASS/SCSS es el siguiente paso, una vez nos sintamos cómodos con CSS, para poder construir hojas de estilo manejables y de fácil mantenimiento. Para poder aprovechar dicho funcionamiento debes añadir los módulos: npm install sass-loader node-sass –save-dev.

En el siguiente ejemplo, hemos incorporado elementos escritos en SASS de la librería Bulma a un componente de Vue.js.

<template>
  <div id="app">
    <a class="button is-active">Hello</a>
    <a class="button is-primary">Primary button</a>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss" scope>
  @import '../node_modules/bulma/sass/utilities/_all.sass';
  @import '../node_modules/bulma/sass/elements/button.sass';
</style>

Utilizando el atributo lang le estamos indicando a Webpack que procese los archivos .sass y los compile a CSS. Si te preguntas cual es la diferencia entre SASS y SCSS… pues la primordial es la sintaxis como se escriben las reglas de estilo. SASS utiliza espacios e indentación para organizar las reglas (similar a HAML) y SCSS es más expresivo, la sintaxis es similar a vanilla CSS.

Recuerda, utilizar SASS en tu proyecto es opcional. Pero cualquier opción que ayude a mejorar la claridad de código y aporte al mantenimiento del mismo debe ser considerado.

micro notas

Micro notas #7

En la siguiente micro nota hablamos rápidamente de CSS y SASS.

Introducing SASS Guidelines – El francés Hugo Giraudel ha creado una tremenda guía para organizar propiamente nuestro SASS. Tomando como inspiración la guía para CSS de Harry Roberts, Hugo hizo lo propio pero para el metalenguaje SASS.

The 2014 CSS Report – Este reporte es el producto de un arduo estudio en donde se analiza el uso de CSS en los websites más populares de Internet. Para que tengamos una idea, se examinaron 28,000 archivos CSS repartidos entre un total de 10,400 dominios. Ejemplo de información derivada de este análisis: Los selectores Top 5 fueron body, textarea, h1, pre, h2. El 99.6% de los colores se trabaja utilizando la unidad de Hex y la adopción del formato .png es de un 77.7%. Y la conclusión diría que muy positiva:

  1. La gente es descuidada con su CSS
  2. Una hoja de diseño bien mantenida puede manejar muchos de los problemas que se ven comúnmente
  3. La características de un CSS modernos son ampliamente utilizadas

Me parece que el trabajo realizado por Alex McPherson ha sido muy brillante.

diseño

Crear menú fijo al tope usando CSS y jQuery

Hay un efecto bastante práctico que podemos aplicar a nuestros menús cuando hacemos scroll hacia abajo. A través del siguiente ejemplo puedes crear fácilmente una barra de menú que quede estática al tope de la página web. Además tiene algunos elementos de transparencia que hacen que el efecto sea fluido y elegante.

See the Pen Menu stays on top by Jaime Olmo (@jamespr) on CodePen.4734