A clone of The Odin Project built with a custom CSS framework. Think bootstrap, but bootleg

Demo

• HTML
• CSS
• Personal Framework

• The framework separates CSS files by to function to make it easier to maintain:
  -cssreset.css to homologate style irrespective of browser
  -layout.css has general containers
  -grid.css has the grid elements and classes
  -style.css has padding, margins, borders and other stylistic choices
  
• Assets and css folders are exclusive to the framework files, project assets should be stored in p_assets

• Clone the project and start building on html_template.html.
• Custom CSS should be linked after framework CSS in html_template.html
• Framework includes Google's Material Design Icons files, you can use them as images (*.png, *.svg, *.eps)
• Lint css with Stylelint, recommenden config included in repo.

This framwrok is flex grid-based, with 12 columns.

• Start with the smallest column use classes: .col-1 thru .col-12
• At screen width 576px: col-sm-1 thru col-sm-12
• At screen width 768px: col-md-1 thru col-md-12
• At screen width 992px: col-lg-1 thru col-lg-12
• Rows should use .row class

Classes for

• .navbar Use for your nav bar
• .nav-item Use for items inside the nav bar
• .container-fluid Use for wraping content
• .d-none, d-sm-none, d-md-none, d-lg-none and d-sm-flex, d-md-flex, d-lg-flex to hide and show elements at different breakpoints with only css

• Padding and Margin: Class name is constructed as follows:

Prefix: (.ma for margin)
.pa (Padding all)
.pt (Padding top)
.pr (Padding Right)
.pb (Padding Bottom)
.pl (Padding Left)
.px (Padding x Axis)
.py (padding y Axis)

Followed by -1 thru -10 sufix for the number of pixels

Example: .mx-5 for marging left and right (x axis) of 5 px per side.

• Maintainability: Each css file has a single responsability: reset, grid, layout or style
• Mobile first: Aiming for percentage based mobile first responsive design
• Open Source: Built with open source tech, following an open source course, and
  open for forking and customization
• Clean Code: Linted with stylelint + stickler and validated with WW3 CSS validator

• Eduardo Gutierrez

• Abdul-samii Ajala

• Microverse
• TOP
• VS Code

@eduardogpulido