Bootstrap 4 esta en su fase alpha pero queremos adelantarte lo que debes de conocer de este potente Framework a la hora que comiences a utilizarlo.

Como buen saber Bootstrap es unos de los mas populares HTML, CSS y JavaScript framework para el desarrollo web, con la ideología «mobile first», Bootstrap se a convertido en una completa herramienta para los desarrolladores, ademas ha ayuda a mantener una estética y elegante forma de hacer HTML :D.

Ahora bien la gente que desarrolla este tan buen framework tiene en este momento en versión «Alpha-2″ (no lista para usar en producción aún), lo que sería la versión 4 de este framework, en este contexto nos gustaría darte a conocer tal vez no todas pero si las más principales características que están sonando de esta nueva versión, sin nada mas que agregar te dejamos la lista:

Cambio de LESS a SASS

Al parecer se ha decidido hacer este cambio por las ventajas que tiene SASS sobre LESS.

Archivo reboot.css, para hacer nuestros «reset CSS»

Para hacer el reset de nuestro CSS ahora se cuenta con este archivo reboot.css, el cual trae ya varias propiedades que podemos re-escribir, cabe mencionar que siempre se utiliza Normalize.css, el orden sería 1ro reboot.css, 2do Normalize.css.

No mas soporte para IE8

En esta versión no habrá soporte para IE8, así que si necesitamos soporte para esta versión del IE mejor quedarnos con la versión 3 de Bootstrap.

Se mejoraron los Tooltips y Popovers gracias a la librería JS: Tether

Tether es una librería Javascript y CSS para crear «información sobre herramientas» o mejor dicho los famosos Tooltips.

Soporte para Flexbox

También han agregado el soporte para Flexbox, el cual podremos activar/desactivar con solo cambiar un valor a una variable en nuestro archivo _variables.scss.

Se remplazaron los: well, thumbnails y panels, por los Card

Las «Card» (tarjetas) son un nuevo componente, muy parecidos a los paneles, well y thumbnails, sólo que mejor.

Otras varias:

• Mejoras en el sitema de grid
• Se agrego soporte para Jquery 2
• Como unidades de medida se usaran ahora «rem» y «em»

Enlaces de referencia

• Alpha Doc
• Repositorio en github

La entrada TOP características de Bootstrap 4.0 Alpha aparece primero en Vivir y Aprender Web.

Las hojas de estilo en cascada por sus siglas en inglés CSS (cascading style sheets) es el lenguaje encargado de darle una apariencia a nuestras paginas web (HTML o XHTML), una vez definido nuestro HTML de nuestra pagina web podemos comenzar a trabajar en nuestro CSS para darle una presentación (color, tamaño y estructura) a nuestra pagina web.

Es importante conocer que la entidad encargada de definir las reglas o standares del lenguaje CSS es la W3C (World Wide Web Consortium), estos standares a la vez tienen que ser respetados por todos los diferentes navegadores web, aunque cabe mencionar que algunos navegadores web tal como el Internet Explorer no siguen al 100% estos standares, generando algunos inconvenientes a los desarrolladores web (de esto hablaremos en otro post mas adelante ).

Ahora teniendo en cuenta esta información pasamos a lo siguiente:

Cuál es la sintaxis este lenguaje?

La sintaxis de este lenguaje es bastante sencilla, se compone un selector(es), propiedad(es) y valor(es), expresado nuestro código CSS seria:

1
2
3

selector {
  propiedad: valor;
}

Ahora entramos un poco mas en detalle:

Selector: sera el que haga referencia a la etiqueta HTML a la que le queremos aplicar un estilo (o presentación).

Propiedades: estas propiedades son una seria de palabras en inglés tales como: color, width, height, font, etc. Que como vemos trabajan lo que son colores, anchos y altos del elemento que hemos seleccionado (selector).

Valores: los valores de las propiedades son diferentes según sea su propiedad por ejemplo: color: #ffffff (blanco) el valor es en hexadecimal, otro puede ser width: 10px y así cada propiedad tiene su valor.

Un ejemplo real seria:

1
2
3

p{
color: #ff0000;
}

Las propiedades de CSS que pueden aplicarse a una etiqueta o selector son muchas, pero para ayudarte un poco a conocerlas puedes revisar este Cheat CSS con varias propiedades que te ayudaran para comenzar:

CSS Cheat Sheet

Cómo lo incluimos en nuestras paginas web HTML?

Para incluir nuestro CSS a nuestras paginas web lo podemos hacerlo de tres formas:

1ra Forma

Definiendo una hoja de estilo interna (dentro de nuestro HTML), ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
<head>  
  <title>Mi primera pagina</title>
  <style>
    p{
  color: #f00;
}
  </style>
</head>
  <body>
    <p>hola mundo!</p>
  </body>
</html>

Como podemos ver para esta forma es necesario definir dentro de nuestras etiquetas «head», la etiqueta «style» y dentro colocar nuestro código CSS.

2da Forma

Definiendo nuestro estilo dentro de una etiqueta HTML (esta forma se conoce como inline)

1
2
3
4
5
6
7
8

<html>
<head>  
  <title>Mi primera pagina</title>
</head>
  <body>
    <p style="color: #ff0000;">hola mundo!</p>
  </body>
</html>

De esta forma vemos que nuestro código CSS esta dentro de la etiqueta «p».

3ra Forma

La tercera forma es manejando nuestro código CSS en un archivo externo con extensión «css», por ejemplo:

Vamos a crear el archivo style.css con las siguientes lineas:

1
2
3

p{
  color: #ff0000;
}

Luego vamos a tener nuestro archivo HTML con el siguiente nombre: mi-primera-pagina.html y tendrá el siguiente código:

1
2
3
4
5
6
7
8
9

<html>
<head>  
  <title>Mi primera pagina</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
  <body>
    <p>hola mundo!</p>
  </body>
</html>

Usando la etiqueta «link» y el atributo href=»style.css» incluimos nuestro archivo style.css a nuestra pagina HTML.

El resultado de nuestro ejemplo puede verse a continuación:

See the Pen Simple html by Ramón (@viviryaprenderweb) on CodePen.

Bueno hasta aquí con esta pequeña introducción a CSS, espero que haya sido de ayuda y posteriormente estaremos publicando otros post para ampliar tu conocimiento en CSS.

Saludos y hasta pronto

La entrada Introducción a CSS – Hoja de estilo en cascada aparece primero en Vivir y Aprender Web.

CSS	Resultado
Sin line-height: .boton-yellow{ color: #fff; width: 80px; height: 30px; font-size: 14px; font-weight: bold; text-align: center; background: #ffb515; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); cursor: pointer; }
Con line-height: .boton-yellow{ color: #fff; width: 80px; height: 30px; line-height: 30px; font-size: 14px; font-weight: bold; text-align: center; background: #ffb515; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); cursor: pointer; }

Para obtener el centrado correcto tenemos que tener en cuenta nuestro height de nuestro elemento (div), para nuestro ejemplo podemos ver que nuestro height tiene 30px por lo tanto nuestro line-height también será de 30px, esto logra el efecto deseado.

height: 30px;
line-height: 30px;

De esta manera como podemos ver el texto queda centrado verticalmente utilizando esta propiedad de CSS, por lo tanto nos ahorramos estar trabajando con los padding y el height para lograr el efecto deseado.

Puede descargar este ejemplo en el siguiente enlace: line-height.zip

La entrada Centrar texto verticalmente con propiedad line-height de CSS aparece primero en Vivir y Aprender Web.

Ejemplo 1

El diseño de la página requiere de dos columnas: del lado izquierdo se despliega el contenido principal y del lado derecho se lista el menú principal.

1
2
3

<style type="text/css">
  div.clear { clear: both; }
</style>

1
2
3
4
5
6
7
8
9

<div id="content">
  <div id="left">
    Este contenido se despliega en el lado izquierdo
  <div>
  <div id="right">
    Este contenido se despliega en el lado derecho
  </div>
  <div class="clear"></div>
</div>

1
2
3
4
5

<style type="text/css">
  .cleaner { *display: inline-block; }
  * html .cleaner { height: 1%; }
  .cleaner:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; }
</style>

1
2
3
4
5
6
7
8
9

 
<div id="content" class="cleaner">
  <div id="left">
    Este contenido se despliega en el lado izquierdo
  <div>
  <div id="right">
    Este contenido se despliega en el lado derecho
  </div>
</div>

La entrada Cómo Limpiar elementos flotantes (float) en CSS aparece primero en Vivir y Aprender Web.

Bueno sin nada más que agregar aqui dejo mi reset CSS que ocupo ya desde hace mucho y me ha funcionado bastante bien pueden ocuparlos en sus proyectos y modificarlo a su antojo:

body,
h1, h2, h3, h4, h5, h6,
p,
form{
    border:        0;
    margin:        0px;
    padding:        0px;
}
 
body,
form, input, textarea{
    font-family:     arial,verdana,sans-serif;
    font-size:         12px;
}
 
body{
    color: #000;
}
 
h1{ font-size: 28px; }
h2{ font-size: 23px; }
h3{ font-size: 19px; }
h4{ font-size: 16px; }
h5{ font-size: 14px; }
h6{ font-size: 12px; }
 
a:link {
  color: #000088;
  outline: none;
}
a:visited{     color: #000088; }
 
a:hover{
    color: #000000;
    text-decoration: none;
}
 
p {line-height: 18px; }

Bueno también les dejo el reset CSS de Eric Meyer (considerado el gurú de css) que está más completo

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

La entrada Reset CSS la mejor forma de comenzar tu hoja de estilos CSS aparece primero en Vivir y Aprender Web.