Frameworks CSS
03/11/2011 12:25
1
Olá, pessoal.

Estou concluindo um sistema em Grails e fiz todo o CSS dele à mão, somando aos default do grails (layout + CSS). Mas ainda gasto um tempo grande para acertar muitos problemas e ajustar divs... O que é muito chato de gerenciar e trás diferenças sutis entre as páginas.

Basicamente, meu grid de página é único e se repete durante todo o fluxo do sistema (um cabeçalho, um corpo principal com uma sidebar à direita e um rodapé). Inicialmente fiz o layout com o YUI mas ele é bem básico, não tem muitas opções.

Queria saber a opinião de quem já utilizou frameworks CSS baseado em GRID, como BluePrint ou o 960.gs em algum projeto Grails. Tenho algumas dúvidas se a utilização desses frameworks não vão me trazer mais dores de cabeça e desconfigurar minhas telas em jQuery que usam muito CSS... E aí, alguém teve boas experiências que queiram discutir?

Valeu!

Tags: css, framework, blueprint, 960.gs, grails layout


1
Oi Carlos,

recentemente iniciei um projeto usando o twitter bootstrap. Achei fantástico, porque além de me fornecer um grid básico (basicamente igual ao do 960.gs), também me fornece uma série de funcionalidades pra criar aplicações com aquela carinha de loja de doces típica da "web 2.0".

Então, com isto acabei abandonando o 960.gs e partindo pro bootstrap, porque ele me fornece tudo o que o 960 me dava mais uma série de adendos bem mais interessantes.


0
Nossa! Parece ser super bacana mesmo!!! Estou lendo agora e me apaixonando!

O projeto no qual vc utilizou foi em Grails? A integração foi simples ou vc fez a partir do zero?

Abraços!
03/11/2011 13:20


1
Oi Carlos, é um projeto em Grails mesmo e a integração foi banal.
Tudo o que tive de fazer foi copiar os arquivos para os diretórios css e js da pasta web-app.

Ah... se não me engano, existe também um plugin Grails que faz isto pra você, mas nunca usei.


0
Já conseguiu colocar o "dropodown" para funcionar em algum projeto?

Não consigo aqui nem por nada... :-(
04/11/2011 14:23


1
Opa, consegui sim.

No caso, você precisa incluir o javascript do dropdown na sua página e também incluir o jQuery.
O dropdown não é feito só com CSS como fica parecendo na documentação inicial, você precisa chamar alguns métodos javascript.


0
O meu container, a partir de um exemplo da documentação, está assim:

<ul class="nav">
<li class="active"><a href="${createLink(uri: '/')}">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
<li class="dropdown" data-dropdown="dropdown" >
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu" >
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider" ></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>


No header, a referência ao jquery está direto para o github, dessa forma:

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">

Como não funcionou, colei o js do Bootstrap na pasta do meu projeto e fiz a referência no meu html assim:

<g:javascript src="bootstrap-dropdown.js" />


Não funciona nem por nada... Sabe apontar onde estou errando?

Obrigado!!
04/11/2011 17:08


0
Eu comecei a usar o twitter bootstrap ontem, tive alguns problemas também para colocar o dropdown para funcionar depois percebi que era apenas a ordem que eu chamava os java scripts.
Segue a ordem que coloquei:
  <script type="text/javascript" src="${resource(dir:'js',file:'bootstrap-transition.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'bootstrap-alert.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'bootstrap-modal.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'bootstrap-dropdown.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'bootstrap-scrollspy.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'bootstrap-tab.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'bootstrap-tooltip.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'bootstrap-popover.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'bootstrap-button.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'bootstrap-collapse.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'bootstrap-carousel.js')}"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'bootstrap-typeahead.js')}"></script>


Kico, eu percebi que o paginate fica com problemas você consegue usar sem maiores configurações?
28/02/2012 14:03



Ainda não faz parte da comunidade???

Para se registrar, clique aqui.


Aprenda Groovy e Grails com a Formação itexto!

Newsletter Semana Groovy

Assinar

Envie seu link!


Livro de Grails


/dev/All

Os melhores blogs de TI (e em português) em um único lugar!

 
Creative Commons
RSS Grails Brasil é mantido por itexto Consultoria.
Em caso de problemas contacte Henrique Lobo Weissmann (Kico) por e-mail: kico@itexto.com.br
Todo o conteúdo presente neste site adota o Creative Commons como licença padrão.
Ver: 4.14.0
itexto