Semantic Grid System

[victor2dm 2]

alguém sabe como transformar o container do Semantic Gs de 960 para 1170px?

Ou qualquer outro sistema de grid semântico que trabalhe com Sass.

[victor2dm 2]

Cheguei a conclusão de que trabalhar com Layout flúido é a melhor solução.

Apenas setei 100% de width no arquivo do grid e 12 colunas no meu container e fica da seguinte forma:

 

 

Aplicando o CSS reset de margin e padding, ele fica com esse espaçamento nas bordas, em qualquer resolução.

Acredito que para diminuir o tamanho do container, é só diminuir o numero de colunas e alterar a margem padrao do grid, certo?

 

Ainda acho algo meio confuso .. pois nao irei trabalhar exatamente com o mockup que fiz no PS com um grid de 1170px.

Sei lá, estou achando meio estranho ... Enfim, quem puder dar dicas sobre uso desse e outros grids,

tem meu obrigado desde já.

[Joao22666 0]

Olá Victor, você já trabalhou com o http://getskeleton.com/ .

Sou novo em programação HTML+CSS, estou estudando este grid e me parece bem legal de trabalhar. Tem um demo dele muito bom no site, ensinando como fazer e tudo mais.

Abraço

[victor2dm 2]

Olá, João.

Ouvi falar sobre essa ferramenta, porém, no que mais foco é o grid, já que tenho um projeto com base de 1170px.

Pelo o que vi, o grid do Skeleton é de 960. Não há como trocar esse container?

[victor2dm 2]

Acho que encontrei a solução para que eu tenha um layout com 1170px e ainda sim flúido.

Usei o ProfoundGrid, coloquei o container-width em 100% e um max-width em 1170px.

 

O resultado foi:

 

/* Código do container no arquivo Scss do ProfoundGrid */ 

@mixin container(){
	width: container_width();
    max-width: 1170px;
	margin: 0 auto;
}


/* Folha de estilo Scss do site */

.container {
  @include container;
  background: #000;
}

.section {
  @include column(10);
  background: #cccccc;
}



/* CSS Compilado */ 

.container {
  width: 98%;
  max-width: 1170px;
  margin: 0 auto;
  background: #000;
}

.section {
  width: 83.17%;
  background: #cccccc;
}

Bom, ainda espero mais dicas sobre Grids Systems ..

[angelorubin 142]

Temos algumas opções - http://usablica.github.io/front-end-frameworks/compare.html