This assignment consists of building a grid-based framework (similar to bootstrap) that includes some basic functionality to speed up the building process of a website.
Try the button to toggle the FUN!
Built for column/row composition, really minimal grid system. In our opinion is a good thing to know when there are constrains using flex or grid (like coding for IE less than IE11), but a grid system dont beat grid or flexbox (maybe mixing grid+flex+grid system?). On the other side it was fun to make!
You must have a parent with wrapper class, where you put elements to form a row:
<main class="wrapper">
<div id="element_1">
<div id="element_2">
<section id="element_3">
<!-- Your rows here -->
</main>You can specify the width of the row using a container_<number>, where <number> is an integer from 1 to 12.
The grid have 12 columns, and the sum of all <number>s must be equal or less than 12; Then you have made a row:
<main class="wrapper">
<div class="container_6" id="element_1 row_1">
<div class="container_6" id="element_2 row_1">
<section id="element_3 row2">
<!-- Your rows here -->
</main>As the containers just make the columns you can add classes to style to your heart desire, thus achieving Separation of concerns:
<main class="wrapper">
<div class="style-me container_6" id="element_1 row_1">
<div class="container_6" id="element_2 row_1">
<section id="element_3 row2">
<!-- Your rows here -->
</main>Note that
element_1have a new class calledstyle-me!
.style-me {
background-color: blue;
height: 100px;
}You can also define your own width but you will not align with the grid, so beware.
Try to change the sizes from 760px to 1200px and note that the columns, the overlay and the grid system is working fine.
- Flex and float
- BEM Naming convention
- SASS precompiler
- HTML5
- JS (for the demo only)
This project is licensed under the MIT License - see the LICENSE.md file for details