Governo do Estado de Mato Grosso do Sul

3. O que é 960gs?

O 960 Grid System (960gs), criado por Nathan Smith é um framework CSS - O conceito de framework é tornar uma parte do código tão comum que possa ser reutilizado, assim tornar o processo de construção de um projeto mais fácil e rápido - Este utiliza um sistema de grade (grid system) técnica adotada em layouts para se organizar o conteúdo de uma página impressa. Por sorte, a técnica também é adotada com sucesso em aplicações web.

3.1. Iniciando o trabalho

O framework 960gs é composto pelos seguintes arquivos 960.css, reset.css e text.css que já vem disponibilizado no pacote “templatesgi.zip” que irá para um diretório da sua aplicação (seja ela feita em PHP, Grails, ASP, ASPX, HTML puro ou qualquer outra linguagem). E em seguida, dentro da tag <head> da sua página, deve-se incluir o código abaixo:

3.2. Entendendo a lógica

A regra é a seguinte: o layout da sua aplicação será organizado em linhas e colunas. Cada linha deverá possuir n colunas, aonde n representa o padrão que foi adotado ao usar o 960gs. É desnecessário, mas se você quiser saber a largura de uma coluna, use a fórmula abaixo, o template SGI está criado em 12 colunas.

largura da coluna = (960 / (número de colunas)) – (margem da coluna * 2)
Como mencionado acima, cada coluna possui duas margens (direita e esquerda), cada uma com 10 pixels de lado. Sendo assim, no nosso exemplo cada coluna terá 60 pixels de largura.

960 Grid System

Como pode ser observado, há 12 colunas de cor rosa, com um espaço entre elas. No padrão 960gs, cada coluna possui 10 pixels de margem tanto esquerda quanto direita.
A classe container_12 define que aquele elemento está adotando uma grade de 960 pixels com 12 colunas. A melhor maneira de explicar o funcionamento da técnica é visualmente. Sendo assim, observe a imagem abaixo, que é o exemplo fornecido com o framework:

Repare que é um layout composto por duas linhas. A primeira ocupa todas as 12 colunas, enquanto o segundo é dividido em dois grupos: um contendo 1 (uma) coluna e outro contendo as 11 restantes. Para obter este resultado, escreve-se o código abaixo:

<div class="container_12">
// Primeira linha
<div class="grid_12"></div>
// Segunda linha
<div class="grid_1"></div>
<div class="grid_11"></div>
</div>

A classe grid_[número de colunas] representa o número de colunas que o elemento deverá ocupar. Sendo assim, na primeira linha usamos a tag grid_12, pois queríamos que toda a largura fosse ocupada.
Já na segunda linha, como queríamos dividir a largura em dois blocos, definiu para o primeiro elemento a tag grid_1 (uma coluna) e grid_11 para o seguinte (11 colunas).
A regra se manteve: cada linha deve possuir 12 colunas.

3.4. O que é jQuery?

jQuery é uma maneira rápida e concisa, Biblioteca JavaScript que simplifica percorrer documentos HTML, manipulação de eventos, animação e interações Ajax para desenvolvimento Web rápido. jQuery é projetado para mudar a maneira que você escreve JavaScript. (http://jquery.com/)

3.5. Introdução com jQuery

A biblioteca jQuery, e praticamente todos os seus plugins, são constrangidos dentro do namespace do jQuery. Como regra geral, "global" objetos são armazenados dentro do namespace do jQuery, bem, então você não deve ter um confronto entre jQuery e qualquer outra biblioteca (como o Prototype, MooTools, ou YUI). Dito isto, há uma ressalva: por padrão, usa jQuery "$"como um atalho para "jQuery".

3.6. Substituindo o $ função

No entanto, você pode substituir esse padrão chamando jQuery.noConflict () a qualquer momento após a biblioteca jQuery e outros têm tanto carregado.

Por exemplo:
<html>
<head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     var $j = jQuery.noConflict();

     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
</head>
<body></body>
</html>

Além disso, há outra opção. Se você quiser ter certeza de que o jQuery não entrará em conflito com outra biblioteca - mas você usar o benefício de atalho de nome, você poderia fazer algo como isto:

<html>
<head>
    src="prototype.js"> <script </ script>
    src="jquery.js"> <script </ script>
    <script>
      var $ j = jQuery.noConflict ();
      / / Use jQuery via $ j (...)
      $ J (documento). Ready (function () {
        . $ J ("div") hide ();
      });
      / / Usa protótipo com $(...), etc
      . $ (Someid) hide ();
    </ Script>
</ head>
<body> </body>
</html>

Você pode definir seus próprios nomes alternativos (por exemplo, jq, $J, awesomeQuery - qualquer coisa que você quiser).
Finalmente, se você não quiser definir uma outra alternativa para o nome do jQuery, então ainda há uma outra solução. Esta é mais freqüentemente utilizada no caso de pretender ainda os benefícios do código jQuery realmente curto, mas não causando conflitos com outras bibliotecas.

<html>
<head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();
     / / Coloque todo o seu código no documento pronto área
     jQuery(document).ready(function($){
       // Do jQuery stuff using $
       $("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
</head>
<body></body>
</html>

Esta é provavelmente a solução ideal para a maioria de seu código, considerando que haverá menos código que você tem que mudar, a fim de alcançar a total compatibilidade. Para saber mais acesso o site http://docs.jquery.com