OmbuShop Crea Tu Tienda Online

Artículos con la etiqueta: ‘css’

Ejemplos de Liquid

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Todas las tiendas sobre OmbuShop pueden modificar las partes más importantes de su diseño. Pueden administrar el CSS y el HTML de toda la tienda.

Las únicas páginas que no se pueden modificar son las del carrito de compras y las de checkout.

Para modificar el HTML de alguna página, es necesario administrar los templates en la sección de Diseño y seguir las instrucciones que figuran en nuestra API para diseñadores.

Aquí voy a mostrar algunos ejemplos de cosas que se pueden hacer con el lenguaje de templates que utilizamos: Liquid.

(más…)

Centrado vertical con CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Muchas de las técnicas que utilizamos diariamente con CSS no son intuitivas. En principio, son resultado de experimentos técnicos de desarrolladores web y diseñadores que intentan empujar este lenguaje presentacional hacia nuevos territorios.

Casi todos sabemos cómo centrar un elemento dentro de otro, horizontalmente; por lo general basta con indicar márgenes izquierdo y derecho en auto. El problema surge cuando queremos centrar una caja dentro de otra, de forma vertical.

Veremos a continuación una técnica para realizar centrado vertical con CSS con amplio grado de compatibilidad con navegadores (Chrome, Firefox, Safari, IE8-10). La técnica necesita del posicionamiento absoluto para funcionar, por ende, necesitaremos que la caja contenedora tenga indicado algún posicionamiento diferente a static, por ejemplo: position: relative.

Veamos el ejemplo:

 


#contenedor {
position: relative;
}
#contenido {
height: 60px; /* <– debe estar definida */
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

/* —————————- */
/* Detalles cosméticos */

* {
box-sizing: border-box;
}
body {
background: #fff;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
font-size: 20px;
}
#contenedor {
background: #9f0;
width: 70%;
height: 150px;
margin: 1em auto;
border: 4px solid #000;
}
#contenido {
background: #000;
color: #fff;
font-weight: bold;
text-transform: uppercase;
text-align: center;
width: 95%;
padding: 1em;
}

See the Pen IwJjf by Lucas Mourelle (@lucasmourelle) on CodePen.
0

¡Esperamos que les sirva!

10 frameworks front-end para probar!

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Aquí una lista de las 10 frameworks más populares entre desarrolladores front-end.

FRONT-END FRAMEWORKS

Se ha vuelto muy común trabajar el HTML y CSS de nuestros sitios con la ayuda inicial de frameworks front-end, especialmente cuando se trabaja en aplicaciones web. Se trata de librerías de CSS y en muchos casos también JS que nos ayudan a empezar sin tener que hacer todo desde cero.

Por otra parte, trabajar sobre la base de una framework establecida y con cierto nivel de popularidad en la comunidad también nos asegura la estructuración coherente de las diferentes partes de nuestro código, compartiendo un patrón de diseño común con muchos otros diseñadores y desarrolladores.

A continuación veremos algunas de las opciones más conocidas:

  • Bootstrap
    Muy probablemente, la más conocida entre todas las frameworks front-end que están en nuestro ecosistema. Fue creada originalmente por el equipo de Twitter, como guía de estilos interna. Las últimas versiones tienen funcionalidades responsive de muchísima utilidad.
  • Foundation
    Otra framework front-end responsive muy popular. Sin dudas ocupa el segundo puesto, luego de Bootstrap, en cuanto a popularidad.
  • UIkit
    Una librería de componentes de UI. Liviana y modular.
  • Semantic UI
    Otra librería liviana. Tiene debugger incluido y un diseño limpio y agradable.
  • Ionic
    Framework especialmente pensada para desarrollar aplicaciones híbridas para dispositivos móviles.
  • Pure
    Framework bien limpia y con fácil posibilidad de customización a través de SkinBuilder.
  • Mozilla Brick
    Colección de elementos de UI creados por el talentoso equipo de Mozilla. Carece de CSS estético para el look & feel inicial: no hace falta contradecir código previo.
  • Chocolate Chip UI
    Imita el look & feel de iOS 7. Facilita la creación de aplicaciones universales para iOS, desde la Web
  • 99lime HTML KickStart
    Otra interesante framework de HTML y CSS
  • Cascade Framework
    Framework liviana, atómica y modular.

Para una comparativa entre estas y otras frameworks: CSS Front-end Frameworks with comparison

Navegación off-screen utilizando sólo CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Cómo ocultar y mostrar una botonera de navegación off-screen utilizando sólo CSS, sin una sola línea de JavaScript!

Muy de vez en cuando se encuentra una idea realmente reveladora, una técnica maravillosa hecha con las herramientas que estaban al alcance de todos, pero cuya utilización de aquella manera particular no se nos había ocurrido.

Es exactamente lo que ocurre en este caso. Me topé, por suerte, con el código de Austin Wulf, en donde muestra de forma magistral cómo generar una interacción con un click, sin la necesidad de utilizar JavaScript. En resumen: el uso de un checkbox, el pseudo-selector :checked y el selector para siblings.

¡La maravilla!

See the Pen Pure CSS Off-Screen Navigation Menu by SitePoint (@SitePoint) on CodePen.0

Artículo original de Austin Wulf: Pure CSS Off-screen Navigation Menu.

Atomic CSS en el BAFrontend Meetup

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Lucas Mourelle —nuestro líder de diseño en OmbuShop & OmbuLabs— y Alejandro Vizio —director creativo de Aerolab— hablaron en la tercera edición de Buenos Aires Front-end Meetup.

Aquí les dejamos el video de ambas charlas. Arrancan en el minuto 11:40. Una es muy técnica: cómo generar código CSS fácil de mantener con OOCSS, Sass y Atomic CSS; la otra sobre Onboarding & Storytelling.

(Empieza en el minuto 11:40)

 

A continuación dejamos las slides de la charla sobre Atomic CSS: