BASE es un framework, el cual, podría definirse de manera muy sencilla como un esquema para el desarrollo y/o la implementación de una aplicación.

Transcripción

1 BASE por Carlos Lobo Qué es? BASE es un framework, el cual, podría definirse de manera muy sencilla como un esquema para el desarrollo y/o la implementación de una aplicación. En el caso de BASE, ellos mismos definen como Un framework semántico, ligero y extensible para potenciar la próxima generación de sitios web responsive, que sean visibles adecuadamente en todo dispositivo desde PC hasta teléfonos móviles. Cómo se usa? BASE es una hoja de estilos base para construir a partir de este nuestros proyectos. Cuenta con estilos que podemos personalizar como encabezados, tablas, formularios, citas y más. Es fácil de consultar pues el código contiene comentarios indicativos. Se compone de una estructura de CSS de 12 columnas 960px grid (max) que contiene todo lo que necesita para ponerse en marcha rápidamente. Contiene una plantilla HTML5 mínima (incluyendo jquery), una hoja de estilos con estilos básicos (para tipografía, blockquotes, código, elementos de formulario, tablas...), un archivo JavaScript por defecto con mejoras de base y, finalmente, un archivo.less para personalizar fácilmente su hoja de estilos. Ejemplo: // Site Layout // body { h1, h2, h3, h4, h5, h6 { { // kept as a basic utility class.container(); margin: 0 auto;.intro {.column(10, 1);.feature {.column(4);.try {.column(8, 2);.editor {.column(12);

2 article {.column(8,2); Archivo.less de capas // Base CSS File - Standard Desktops & CSS Default ~960px // // Grid Variables // 100%; // Type Variables // 1.4; // Base Styles // "_menus.less"; // Custom Styles // clear { clear: both; height: 0;.masthead { margin-bottom: -5.5em; nav { ul:before { display: block; border-top: 1px width: 70%; content: ''; margin: 30px auto -20px;

3 .intro { padding: 2.5% 0 0;.slogan { font-size: 2.125em; line-height: 1.375; margin: 1em 0 2em; p { margin: em; font-size: 0.95em;.download-button { font-size: 1.25em; font-weight: 600; border-radius: 5px; padding: 0.625em 2em; box-shadow: 0 2px 0 darken(@primarycolor, 7%); &.grey { box-shadow: 0 2px 0 darken(@textcolor, 7%); &:hover { background: darken(@textcolor, 3%); &:active { background: darken(@textcolor, 6%);.logo { border-top: 5px { color: lighten(@textcolor, 30%); a { color: lighten(@textcolor, 10%); font-weight: 400; &:hover { text-decoration: none; main { width: 100%;

4 .try { clear: both; padding: 8em 0 5em; overflow: hidden;.arrow { width: 100%; padding-top: 100%; height: auto;.transform( rotate(45deg) ); display: none;.arrow-left { left: -100%; top: -68%;.arrow-right { right: -100%; top: -68%;.csstransforms.arrow { display: block;.editor { border-radius: 5px; background: white; height: 400px; position: relative; margin-top: 4em;.pane {.label { width: 50%; height: 100%; top: 0;.box-sizing(border-box); &.layout { left: 0; border-right: 1px solid lighten(#1d1f21, 40%); &.grid { right: 0; border-left: 1px solid lighten(#1d1f21, 40%); top: -1.9em;

5 .tabs { left: 2em; span { background: white; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 4px 15px; font-weight: 700; font-size: 0.9em;.inline-block(); em { font-size: 0.825em; padding: 2px 10px;.inline-block(); color: lighten(@textcolor, 10%); top: -2em; right: 2em; a { color: white; background: lighten(#1d1f21, 30%);.inline-block(); padding: 7px 10px 5px; font-size: 1.25em; border-top-left-radius: 5px; border-top-right-radius: 5px; min-width: 20px; &.active, &.active:hover { background: #1D1F21; &:hover { background: lighten(#1d1f21, 20%);.code-editor { top: 0; right: 0; bottom: 0; left: 0; font-size: 15px;.layout.code-editor { border-top-left-radius: 5px; border-bottom-left-radius: 5px;.grid.code-editor { border-top-right-radius: 5px; border-bottom-right-radius: 5px;

6 .components { margin-bottom: 2em;.component { background: white; padding: 1em; margin: em; border-radius: 5px; h3 { margin-top: 0; margin-bottom: 1em;.get-started {.button { margin-top: 1em; footer { padding: 1em 0; color: white; a { color: darken(#ffffff, 30%); Archivo.css de capas Qué ventajas aporta? BASE es una manera muy sencilla de configurar páginas totalmente responsive partiendo de una base de código muy simple. Hoy en día los dispositivos móviles es el método de consulta más utilizado para navegar y cada vez hay más modelos con diferentes tamaños de pantalla, sistemas operativos, navegadores Qué tu página se vea perfectamente en todos ellos viene a ser indispensable para una buena promoción. Qué puntos débiles tiene? BASE aunque partiendo de una web sencilla es muy fácilmente configurable. Para aquellos que busquen un acabado más profesional, requerirán de conocimientos más avanzados de compilación y para crear diseños más complejos.

7 Ejemplos de web usados con BASE:

8

9 Instrucciones de cómo usarlo Para empezar, accederemos a la página web BASE y descargaremos el archivo.zip con la plantilla base. A partir de ahí, podremos ir configurando los estilos y los diferentes contenedores que tendrá nuestra página web. El archivo base.less, desktop.less, mobiles.less y tablet.less contendrán la configuración de las retículas y tamaños según el dispositivo, siendo respectivamente para escritorios normales, escritorios grandes, móviles y tablets. En ellos se configuran el tamaño de pantalla y el número de retículas siendo 1 para dispositivos móviles. _layout.less contiene la configuración para las diferentes contenedores de la web. _button.less contiene los estilos de los botones. _form.less contiene los estilos de los formularios. _mixin.less contiene estilos CSS3, animaciones, gradientes y varios efectos más. _menus.less contiene los estilos para menú horizontal y vertical. _type.less contiene las tipografías que se van a usar. _variables.less controla los colores y fuentes que se van a usar en cada caso mediante variables. Web creada con BASE Página web sencilla creada con BASE