CSS | gEEK tHE pLANET

Apr 8, 2008 0

CSS Naked day 2008

CSS Naked Day

En exactamente 7h y 7m, se llevará acabo la 3 versión del CSS Naked Day 2008, como en los 2 años anteriores este evento es liderado por Dustin Diaz. La idea detrás de este evento es promover los estándares Web. Así de simple. Esto incluye el uso adecuado de (x)html, del marcado semántico, una buena estructura de la jerarquía. Es hora de mostrar tu <body>... Para agilizar el proceso de desnudación Dustin nos proporciona una función en PHP que nos cambia el estilo facilmente.

TEXTO PLANO

PHP:

<?php
function is_naked_day($d) {
$start = date('U', mktime(-12, 0, 0, 04, $d, date('Y')));
$end = date('U', mktime(36, 0, 0, 04, $d, date('Y')));
$z = date('Z') * -1;
$now = time() + $z;
if ( $now>= $start && $now <= $end ) {
return true;
}
return false;
}
?>

Y se usa así:

TEXTO PLANO

HTML:

<head>
...
<?php
if ( is_naked_day(9) ) {
echo '';
} else {
echo '<link rel="stylesheet" type="text/css" href="styles.css" />';
}
?>
...
</head>

Leer Más: CSS Naked Day

Apr 5, 2008 0

Top 12 CSS Frameworks

Tags: CSS Framework

Hace un par días hice 2 posts sobre los CSS Frameworks (I, II), hable de sus ventajas y desventajas, al parecer muy pocas personas son partidarias de su uso ya que esto limita de alguna manera sus trabajos, por mi parte soy user CSS Framework, esto me ha ayudado enormemente a mejorar mi trabajo, por esa razón me traigo este post directamente de kabytes, un top de los mejores CSS Frameworks.

Leer Más: Top 12 CSS Frameworks and How to Understand Them

Mar 21, 2008 1

CSS Frameworks II

Bueno, continuare hablando un poco más acerca de los CSS Frameworks, hablaré en un principio sobre Global Reset y por último mostraré un par de Frameworks CSS ya desarrollados.

Como hablaba en el post anterior, el Global Reset es necesario para para que nuestro sitio web luzca de alguna manera parecida en varios navegadores, ya que por defecto los navegadores vienen con valores diferentes para la margin, el padding, el line-height, etc. El Global Reset se asegura que en un principio tengamos las mismas reglas de juego para empezar a diseñar.

Personalmente me gusta usar el CSS Reset Reloaded de Eric Meyer:

TEXTO PLANO

CSS:

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Sin embargo existen muchos otros:

[Leer mas]

Mar 21, 2008 2

CSS Frameworks I

Tags: CSS Framework

Sonará muy extraño esto de CSS frameworks, pero creo que es el nombre mas adecuado, según la definición de Wikipedia:

En el desarrollo de software, un framework es una estructura de soporte definida en la cual otro proyecto de software puede ser organizado y desarrollado. Típicamente, un framework puede incluir soporte de programas, bibliotecas y un lenguaje interpretado entre otros software para ayudar a desarrollar y unir los diferentes componentes de un proyecto.

Apenas me dí cuenta esta que también podiamos tener frameworks para CSS, es curioso porque yo ya venia utilizando esto de alguna manera en mi proyecto actual (el theme de este blog), lo que estaba haciendo era simplemente separar el style.css en 2 partes, una parte que contenia las reglas generales, el layout, las reglas tipográficas y las reglas para los forms, la otra parte contenia los colores e imagenes, con esto lo que esta haciendo era dejar el Style.css intacto y cada vez que quisiera tener un nuevo diseño basado en la misma estructura, simplemente creaba una nueva hoja de estilo en la que modificada un par de líneas de CSS y ya.

Rebujando en unas de las páginas con mas recusos que conozco, me encontré con un post que me dejo mal parado porque ya lo habian descubierto primero que yo :S, y pues me puse a ver y era algo lógico que debí haber hecho hacia muchisimo tiempo, cada vez que inicio un nuevo proyecto toca iniciar con una hoja de estilos en blanco (lo que no es muy alentador) y empezar a repetir muchas líneas que antes también me habia tocado digitar.

Al grano, no es necesario ser grandes expertos para crear nuestros propios CSS Frameworks, es tan simple como aplicar un poco de lo que yo hice y un poco más de habilidad, podemos en vez de tener 1 hoja de estilos con n-mil líneas de código, tener varias divididas así por ejemplo:

reset.css: Estoy segurisimo que muchos no saben que es necesario tener esto del reset, es fundamental para que nuestro sitio web luzca de alguna manera parecido en varios navegadores. Por defecto los navegadores vienen con valores diferentes para la margin, el padding, el line-height, etc, por esta razón es necesario un Reset Global.
general.css: Algunas normas generales.
layout.css o grid.css: Reglas para los layouts.
form.css: Para el estilo de nuestro formularios.
ie.css: Donde indicaria los cambios que son necesarios para este problematico "navegador".

Este es un pequeño ejemplo de como podria crear su propio framewok, sin embargo puede ir mucho mas allá y crear muchas otras hojas de estilo, por ejemplo una print, una para dispositivos móviles, entre otras.
[Leer mas]

gEEK tHE pLANET

CSS Naked day 2008

Top 12 CSS Frameworks

CSS Frameworks II

CSS Frameworks I

Subscribe

Categorias

Comentarios Recientes

Tags

Posts Recientes

Blogroll

Archivo

Antes de irte