This project is part of the Microverse CSS3 and HTML curriculum!
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
This is a custom framework based on some of the bootstrap classes.
Here are some of the specification of the framework:
- Column based responsive design with 12 units based on percentages and not pixels to provide a better performance.
- Included a 1% gutter to the right of the columns.
- We created five different breakpoints:
- -xs > 0
- -sm > 576px
- -md > 768px
- -lg > 992px
- -xl > 1200px
- We match the classes' name to those used in Bootstrap to facilitate the usage of the framework.
- Some of the most important classes we included:
- .col-*
- .row
- .container
- .d-* (flex, block, none)
- p-* & m-* (includes 10 different sizes)
- Border colors and background colors (different than Bootstrap)
- Widths and heights (multiples of 10)
- Flex classes (justify-content and align-content)
- Basic font styles (color, font-weight and italic)
This is also part of the Odin project curriculum https://www.theodinproject.com/courses/html5-and-css3/lessons/design-your-own-grid-based-framework
If you want to use our framework you can clone our repository or use this link in your HTML file: https://github.com/majovainilla/framework/blob/grid-branch/SCSS/main.css
If you want to edit or improve the framework you will need SASS installed in your computer (you do it here) and edit the files contained in the SCSS folder.
If you want to contribute to the repo, you can open an issue with your github user name and after being added as a contributo, upload your changes by submiting a pull request.
This project was built using these technologies.
- HTML
- CSS3
- SCSS
- Stickler
- VsCode
- Atom
- Notepad++
- Prettier
- Koala
You can see a project built with this framework here: https://euqueme.github.io/framework-demo/
María José Reyes - @majovainilla - maria_reyes@me.com
María Eugenia Quemé - @MaruKK - @euqueme - euqueme@gmail.com
Project Link: [https://github.com/majovainilla/framework)