Skip to content

Latest commit

 

History

History
138 lines (115 loc) · 5.19 KB

README.md

File metadata and controls

138 lines (115 loc) · 5.19 KB
Raw

Contributors Forks Stargazers Issues


Logo

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

Product Name Screen Shot

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

Instalation

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.

Built With

This project was built using these technologies.

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

Live version

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

Contact

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

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

Project Link: [https://github.com/majovainilla/framework)

Acknowledgements