2009-05-01 19 views
21

Quiero construir una plantilla CSS de mi imaginación: esto significa desde SCRATCH.Cómo construir una plantilla CSS desde cero

Quiero hacerlo como si lo hiciera con un bolígrafo, pero solo con el mouse. No tengo idea sobre este campo (css), es por eso que estoy preguntando. Muchos desarrolladores han hecho fantásticas plantillas que se mecen.

Quiero saber cómo se crean las plantillas de CSS? (si lo hiciste) ¿Empiezas desde cero, usando un marco, usando una aplicación? ¿Es eso difícil o fácil?

¿Cómo lo haces?

+5

Oh, Dios mío, los traficantes de preguntas ya están aquí. El OP quiere CSS generado dinámicamente, si no puede ver eso, lee demasiado rápido. Esto no es un síntoma de que la abstracción hace que los conceptos básicos sean demasiado fáciles, si se deshace de esas herramientas ... no tiene idea. Más bien, es un síntoma de no aprender o apreciar lo que esas herramientas hacen por ti, y estar perdido sin ellas. –

Respuesta

21

Todo y todo lo que siempre haya querido aprender sobre css se puede encontrar en a list apart. También te puede interesar css garden. Grandes ejemplos del mundo real que puedes separar y piratear.

+0

Gracias por sus ideas, el problema conmigo no es crear la plantilla de CSS en sí, he hecho algunos temas de CSS simples con blueprint. Quiero saber cómo crear un "fantástico" muy, muy bueno y ajustarlo muy fácilmente, voy a buscar qué plantilla de motor es, gracias de nuevo: D –

1

Es posible que desee leer en CSS.

0

que empezar desde cero mío, sólo tiene que escribir usando VS o Aptana etc.

Trabajo fuera el diseño básico, por ejemplo, la columna 3.

Luego uso el estilo en línea para crear el diseño básico, agregando el marcado y html hasta que lo tenga como me gusta. Luego continúo de esta manera hasta que tenga el esqueleto básico de mi sitio web.

Desde aquí puse el CSS en un archivo externo y comencé a agregar mis elementos, diseñando sobre la marcha.

Antes de que te des cuenta, tendrás algo que parece dulce, ¡sucede sorprendentemente rápido!

6
* 
{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    border-collapse: collapse; 
} 

Cue imaginación

+2

+1 ¡Esto apesta a puro brillo! –

+1

¿Cómo es útil? ¿Cómo puede el OP aplicar esto a su pregunta? Ya sabes, las personas tienen que empezar __ en alguna parte__ .. -1 –

+0

La imaginación de las visitas funciona bien si __ ya sabes CSS. –

4

No reinventar la rueda, encontrar una buena base css establecido y construir sobre ella.

12

Mi curso típico de acción:

  1. Aplicar una CSS reset
  2. Encuentra una layout template
  3. Encuentra una color scheme
  4. ???
  5. ¡Ganar!
+0

Gracias, esos son los mejores consejos hasta ahora, aunque no te votaron :) –

+0

cómo usar el esquema de colores? –

+0

Esto me recuerda a los gnomos de calzoncillos de Southpark – qwertymk

2

Supongo que va a volver a utilizar esto, ya que lo ha llamado una plantilla, así que me aseguraré de organizar/agrupe sus elementos CSS de una manera lógica (texto, diseño, etc.) Querrá algo que pueda leer rápidamente y personalizar más tarde.

Definitivamente márgenes predeterminados claros y juntas, ya que los diferentes navegadores (tos IE) tienen sus propias ideas de lo márgenes y rellenos varios elementos deben tener.

Finalmente, haga uso de porcentajes y ems. Esto reducirá considerablemente tu duplicación. Por ejemplo...

body { font-size: 12px }; 
.wrapper { width: 800px; } 

Ahora usted tiene una base a la que todo lo demás puede referirse. Por lo que podía hacer cosas como esta:

h1 { font-size: 2em; } 
.content { font-size: 1.2em; } 
.sidebar { font-size: 1em; } 

.content { width: 70%; } 
.sidebar { width: 30%; } 

Si decide 800px es algo viejo, puede cambiar su ancho de uno a 900px, y todo va a seguir trabajando.

1

Totalmente depende de la situación. Si tengo que crear una plantilla para una página existente que usa CSS, a menudo generada por un editor o algo así, la usaría como punto de partida y cambiaría partes y elementos hasta que hiciera lo que quisiera. Esto iría para WordPress y ese tipo de aplicaciones también.

Cuando no tengo un CSS para empezar, trabajo desde 'Cuerpo' y sigo bajando hasta los hijos de los niños, etc. De grande a pequeño.

Me gusta utilizar una herramienta que muestra una representación visual de la etiqueta css que estoy editando para que pueda ver cómo se ve. Me gusta Expression Web porque puede navegar a los estilos muy fácilmente y me muestra cómo se ve.

1

¿Dijiste en tu comentario al this reply que quieres poder modificarlo fácilmente?

Recomiendo algunas de las extensiones de Firefox para este fin. Firebug es fantástico para ver rápidamente el CSS detrás de algo o para ajustar css. Si pasas el cursor sobre algo en firebug, se mostrará el css, y podrás desactivar las líneas de css individuales y ver cómo lo renderiza el navegador.

Cuestiones relacionadas