Às vezes o que precisamos é simplesmente de uma grid. Há diversas soluções para isso. Dá para se usar o Bootstrap apenas com o módulo de grid ou usar outra biblioteca de grid. Para se usar o Bootstrap somente com o módulo de grid, você precisa fazer o download do bootstrap completo ou usar esse CSS. Você pode fazer o download direto pelo site, através deste link. Ou usar algum dos gerenciadores de pacote. npm install bootstrap@4.0.0-beta para o NPM, gem install bootstrap -v 4.0.0.alpha6 para RubyGems, composer require twbs/bootstrap:4.0.0-beta para Composer ou bower install bootstrap#v4.0.0-beta para Bower.

Ao fazer o download do Bootstrap completo, você perceberá que o número de pastas é incrivelmente maior do que na versão de produção. Abaixo você poderá ver a lista de pastas da versão compilada versus a versão para desenvolvimento.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.js
    └── bootstrap.min.js

vs versão de desenvolvimento

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── docs/
│   └── examples/
├── js/
└── scss/

Dentro da pasta /dist/ ficam os códigos prontos para colocar em seu site. Dentro de /scss/ ficam os códigos-fonte dos estilos. Estão escritos em SASS (uma espécie de complemento para o CSS que é muito interessante, inclusive). Abaixo o código do arquivo bootstrap.scss, responsável por carregar todos os módulos do Bootstrap.

/*!
 * Bootstrap v4.0.0-beta (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "print";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "utilities";

Baixar o código completo é mais útil do que fazer o download apenas da Grid por N razões. Inclusive a possibilidade de alterar as configurações padrões da Grid, algo que com o CSS gerado fica bem mais complicado. Abaixo está o arquivo _grid.scss. Você pode ver o quanto ele é pequeno. Tudo isso graças ao SASS.

// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

@if $enable-grid-classes {
  .container {
    @include make-container();
    @include make-container-max-widths();
  }
}

// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but with 100% width for
// fluid, full width layouts.

@if $enable-grid-classes {
  .container-fluid {
    @include make-container();
  }
}

// Row
//
// Rows contain and clear the floats of your columns.

@if $enable-grid-classes {
  .row {
    @include make-row();
  }

  // Remove the negative margin from default .row, then the horizontal padding
  // from all immediate children columns (to prevent runaway style inheritance).
  .no-gutters {
    margin-right: 0;
    margin-left: 0;

    > .col,
    > [class*="col-"] {
      padding-right: 0;
      padding-left: 0;
    }
  }
}

// Columns
//
// Common styles for small and large grid columns

@if $enable-grid-classes {
  @include make-grid-columns();
}

Digamos que você queira somente a Grid do Bootstrap. O código que você vai executar é o seguinte.

/*!
 * Bootstrap v4.0.0-beta (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "grid";

Para quem não está “disposto” a usar o Bootstrap, pode usar algumas ferramentas desenvolvidas especialmente para construção de Grids. Como o Neat, Profound Grid, RWD Grid ou Simple Grid. Esses dois últimos usam CSS puro.

Leave a Reply

Your email address will not be published. Required fields are marked *