Passos para construir a sua capacidade de resposta

drupal 7 tema

1) Entenda o projeto e decidir sobre os pontos de interrupo.

2) Comece com o seu tema arquivo de informaes

name = RoboSmart
description = Um mvel-primeiro layout responsivo para um site corporativo.
version = VERSO
core = 7.x
stylesheets [all] [] = css / style.css <

3) Criar pginas HTML5 para cada pgina exclusiva em seu site.

Com base no sistema de rede e da natureza do seu projeto, grades de download de
http://960.org . No caso do tema RoboSmart ns usamos uma rede nica de 600 que
fluido e funciona para qualquer resoluo de tela maior do que 600px.
Comece com o projeto mvel e mova o caminho para todos os pontos de interrupo.
Converter as pginas HTML5 para arquivos de modelo. Este passo similar ao de
qualquer tema geral drupal excepto que o mesmo modelo aplicvel a vrios pontos de
interrupo. Se voc estiver usando HTML5 certifique-se de comear com a declarao
em seu arquivo html.php.tpl.
Validar o esboo sua pgina gera usando um delineador. Estruturar as tags HTML5 e
tags de cabealho para alcanar o contorno desejado. Sua maneira de trabalhar a partir
do menor para o maior ponto de interrupo, ou seja, a partir do projeto mvel, um
aspecto importante da primeira abordagem mvel.
4) Separe os estilos para os diferentes pontos de interrupo usando as perguntas da
mdia. Detalhado abaixo as opes para o uso de consultas de mdia.
Opo Multifile: Incorporar consultas de mdia no arquivo .info

folhas de estilo [todos] [] = css / style.css

folhas de estilo [Imprimir] [] = css / print.css
estilo [tudo e (min-width: 600px)] [] = css / grid-600.css
estilo [tudo e (min-width: 600px)] [] = css / style-600.css
estilo [tudo e (min-width: 480px)] [] = css / style-480.css

estilo [tudo e (min-width: 960px )] [] = css / style-960.css

stylesheets [all] [] = css / fonts.css

Opo de um nico arquivo: Escrever consultas de mdia embutidos em

arquivos CSS

mdia e todos (min-width: 461px) e (com largura mx: 900px) {

// estilos incorporar aqui
}

5) Incorporar viewport e outros meta tags especficas de dispositivos mveis / portteis

no arquivo html.php.tpl

<Meta content = nome "" width = "MobileOptimized" />

<meta content = nome "verdadeiro" = "HandheldFriendly" />
<content = "width =-largura do dispositivo" meta name = "viewport" />
<meta content = "on" http-equiv = "ClearType" />

6) Para ativar o suporte IE, adicionar arquivos Html5shiv, Respond.js e Selectivizr.js a

seu tema.
7) Teste o seu tema em uma instalao padro do Drupal. Voila! Aqui temos um tema
Drupal 7, que sensvel.

Por trs das sceens ...

Consultas de mdia

Consultas de mdia CSS3 permitem verificar tipo de mdia e mdia caractersticas e

condicionalmente folhas de estilo de carga. Isto comumente usado para distinguir
entre 'tela' e 'print'. O tipo de mdia de impresso usado para definir os estilos para
impresso.
print media {
// incorporar impresso de estilo

}
A consulta de mdia abaixo define a folha de estilo para todos os tipos de mdia. Tambm
demonstra o uso do recurso de mdia largura. Nos permite definir estilos para larguras

de tela entre 461px e 960px

media tudo e (min-width: 461px) e (com largura mx: 900px) {

// estilos incorporar aqui

}
Recursos de mdia so usados
para definir as propriedades do agente do usurio. Alguns
dos outros recursos de mdia incluem altura, orientao e proporo de tela.

Mveis meta tags amigveis para o html.tpl.php

<Meta name = "MobileOptimized" content = "width" />

Use para configurar o layout estreita em dispositivos, introduzido pela Microsoft.

<Meta name = contedo "HandheldFriendly" = "true" />

A meta-tag HandheldFriendly foi utilizado inicialmente pela Palm mais velhos e

modelos Blackberry.
<Content = "width =-largura do dispositivo" meta name = "viewport" />

Certos dispositivos navegador exibir as pginas da web por auto de zoom. Para substituir
esse recurso de zoom automtico para pginas j otimizados, a meta tag viewport
usado. No nosso caso, a propriedade largura usado. Aqui, a propriedade "width"
definido como o visor do dispositivo. As outras propriedades de viewport inclui a
propriedade escala inicial, que controla o nvel de zoom quando a pgina carregada
pela primeira vez, a escala mxima, em escala mnima, e propriedades escalvel pelo
usurio que controlam como o usurio aumentar o zoom dentro e fora da pgina. A meta
tag viewport amplamente apoiada por smartphones modernos e no se limitando a,
iOS e dispositivos Android.
<Meta http-equiv = contedo "ClearType" = "on" />

Permite tipo claro para dispositivos mveis Windows. Para mais detalhes sobre os
mveis amigveis
meta tags referem clich mvel no github. "Placa de caldeira Mobile
a melhor linha de base prtica para o seu aplicativo web mvel". (
https://github.com/h5bp/mobile-clich )

Otimizao para o IE

Para ativar o suporte IE adicionar arquivos Html5shiv, Respond.js e Selectivizr.js a seu

tema.
O que html5shiv.js fazer?
IE9 suporta HTML5 em parte, IE8 e abaixo no suportam HTML5. O html5shiv.js usa o
document.createElement ("tag") para criar novos elementos e fora IE para tornar os
estilos CSS para estas tags HTML5 gerados. ( http://code.google.com/p/html5shiv )
O que selectivizr fazer?
"Selectivizr um utilitrio que emula JavaScript CSS3 pseudo-classes e seletores de
atributo no Internet Explorer 6-8. Basta incluir o script em suas pginas e selectivizr
far o resto. "( http://selectivizr.com ) Selectivizr faz cerca de 25 elementos de estilo
CSS3 funciona no IE 6-8.
O que Respond.js fazer?
"O objetivo deste roteiro fornecer um roteiro rpido e leve para permitir projetos web
responsivas em navegadores que no suportam CSS3 consultas de mdia - em particular,
o Internet Explorer 8 ou menos. escrito de tal forma que ele provavelmente ir corrigir
suporte para outros navegadores no apoiar tambm "(
https://github.com/scottjehl/Respond )