Make the grid fluid or fixed and add per-media layouts as needed. Change the column and gutter widths and remove or add columns as needed.
The SCSS/ CSS is the best grid light system so you won’t have to worry about adding to page load times. Fast render on any operating system.
Best Grid uses negative margins to calculate columns. Unlike with other grid systems, fluid layouts will look exactly the same in every browser.
Best Grid System is a 12-column, responsive, lightweight, mobile first fluid grid system. Each column is contained within rows, which are contained within a container. The container is set to a maximum width of 100%, but you can edit without having to break anything. Best responsive Grid System scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. One of the best complement for a custom web design is a custom-made responsive grid system.
<div class="container">
<div class="row">
<div class="col-3">
<!-- This content will take up 3/12 (or 1/4) of the container -->
</div>
<div class="col-3">
<!-- This content will take up 3/12 (or 1/4) of the container -->
</div>
<div class="col-6">
<!-- This content will take up 6/12 (or 1/2) of the container -->
</div>
</div>
</div>
You can customize everything as per your requirement that's includes the number of columns, the size of columns and gutters and even the breakpoints you change your layouts at. Simply state the number of columns you want your content to occupy in the .col class. For example, If you need 2 column, 4 column or any layout in mobile. You simply takes up 4 columns (out of 12), simply give your content the class .col-sm-4. The Best grid is built mobile-first reponsive grid system. If you don’t want columns to expand on mobile devices and small screens, simply add -sm after col- of your column class name.
<div class="container">
<div class="row">
<div class="col-sm-3">
<!-- This content will take up 3/12 (or 1/4) of the container -->
</div>
<div class="col-sm-3">
<!-- This content will take up 3/12 (or 1/4) of the container -->
</div>
<div class="col-sm-6">
<!-- This content will take up 6/12 (or 1/2) of the container -->
</div>
</div>
</div>
Best Grid uses Roboto from Google Fonts as a base font-family. Firstly, it’s extremely important to have a default font-size defined in your CSS. Most browsers will default to 16px, but if your project requires something different, make sure that your CSS knows about it. Font-size is based on root rem units. You can choose style any of the headers or paragraph font-weights, simply add the class .font-light, .font-regular, or .font-heavy to your markup.
There are 6 types of buttons: Primary, Secondary, Warning, Info, Danger & Disable. Each button style has up to 6 states, including: normal, hover, active, loading and disabled. Note: All CSS shown is for guiding purposes, it's not absolute. It's intended to help designers foster a greater understanding of both CSS and the specifications.