Building a Framework

This project is part of the Microverse CSS3 and HTML curriculum!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• About the Project
  • Built With
• Usage
• Automated test
• Live Version
• Author
• Contributing
• Acknowledgements

About The Project

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

Built With

This project was built using these technologies.

• HTML
• CSS3
• SCSS
• Stickler
• VsCode
• Atom
• Notepad++
• Prettier
• Koala

Usage

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.

Automated Test

there are no automated tests for this project yet

Live version

You can see a project built with this framework here: https://euqueme.github.io/framework-demo/

Author

👤 María José Reyes - @majovainilla - [email protected]

👤 María Eugenia Quemé - @MaruKK - @euqueme - [email protected]

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgements

• Microverse
• The Odin Project
• HTML Cheat Sheet
• SASS documentation
• Bootstrap documentation