In this project, built my own simple 12 column grid-based framework, using a combination of HTML, CSS and JavaScript. Documentation for the framework can be found down below.
I recreated the Microsoft.com website using the Custom Built Framework.
- HTML5, CSS
- JavaScript
A 12-column Grid based responsive system.
Breakpoints for Screen Sizes:
- Small = 720px width and below,
- Medium = 721px width to 1023px width
- Large = 1024px width and above
Three (3) Main classes: .container, .row and .col-*-m*-*
The .container class sets the element at a specified max width with 5% paddings on the left and right sides. It also removes wrapping and hides overflown content.
The .row class which can be placed as a child of a container, returns the wrapping of contents and is a relative positioned element and takes up 100% of the view width space.
There are two variations of the .row class, .row-flex and .row-flex-auto
The .row-flex class turns the element into a flex-box that spans the entire width of its parent element
The .row-flex-auto class turns the element into a flex-box that has an auto expanding width(width of element is relative to its children's width).
The .col-*-m*-* class has a few variations to: .col-*, .col-*-md, .col-*-sm.
The .col-* variant sets the column size for the element to one value for all screen sizes. The * is replaced with one of the numbers from 1 - 12.
The .col-*-md variant sets the column size for the element to the given value (ranging from 1-12) as the column size for medium screens.
The .col-*-sm variant sets the column size for the element to the given value (ranging from 1-12) as the column size for small screens.
Example combining the 3 variants : <div class="col-2 col-3-md col-4-sm"></div>
The .col-*-m*-* variant takes all three variables into one class-name as .col-lg-m(md)-sm. The first variable addresses the column size for large screens, the second variable addresses the column size for medium screens and the last variable addresses the column size for the small screens.
Example : <div class="col-2-m3-12"></div>
<body>
<div id="navOverlay" class="hide"></div>
</body>
Add id="#mobileNav" to which ever element will be used as a button to open up the mobile responsive navigation bar
In this example the id is placed on a div containing a bars icon provided by font-awesome.
<div id="mobileNav" class="col px-1"><a href="#"><i class="fas fa-bars size-26"></i></a></div>
The anchor links will be added as child elements within this created div.
<div id="navDropDownMenu" class="hide">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
The navigationbar icon is automatically changed within NavMenu.js. If you wanted to choose a different icon you would have to edit lines 5 and 6.
...
const navOpen = '<a href="#"><i class="fas fa-times size-34"></i></a>';
const navClose = '<a href="#"><i class="fas fa-bars size-26"></i></a>';
...
At the moment the framework only allows for one working slider per page. The variables for the slider are changed and accessed by creating these custom CSS variables in your own custom CSS file:
:root {
--slideTimer: 5;
--slideTitle-1: Honor Hispanic Heritage Month;
--slideTitle-2: Up to $300 off;
--slideDesc-1: From September 15 - October 15, join us as we celebrate Latinx culture and community with inspirational stories from Latinx employees, in-store events, and more;
--slideDesc-2: Save on select ultra-light and versatile Surface Pro 6;
}
Of course the values given in these CSS variables are just for example purposes.
This variable controls the amount of time in seconds it takes each slider image to rotate.
This variable contains text which is shown as the title of the first slide.
This variable contains text which is shown as the title of the second slide.
This variable contains text which is shown as the description of the first slide.
This variable contains text which is shown as the description of the second slide.
Slider background images are supplied using the classes 'bg-slide-1' and 'bg-slide-2'. Media responsive queries should be used to determine if alternate background images are given based on the screen size.
Classes found in CSS file
/* SLIDER */
.bg-slide-1 { background-image: url(../images/slide1.webp); }
.bg-slide-2 { background-image: url(../images/slide2.webp); }
Example slider code in HTML :
<div id="slideBG" class="col-12 bg-jumbo bg-slide-1">
<div class="container">
<div class="col-6">
<h class="slideTitle">Honor Hispanic Heritage Month</h>
<p class="slideDesc">From September 15-October 15, join us as we celebrate Latinx culture and community with inspirational stories from Latinx employees, in-store events, and more</p>
<div class="slideButtons row m-t-15">
<a href="#" class="col button">LEARN MORE</a>
</div>
</div>
</div>
</div>
This class contains any html coding related to the buttons available in each slide. However, for now, in-order to change the information in this class the ChangeSlide() function found within the slide.js file must be edited.
Includes 5 pre-made animations: grow, grow:hover, slideUp, slideLeft, slideLeft:hover
animate-grow - selected element grows and shrinks in a pulsating fashion
animate-grow-hover - selected element grows on hover and shrinks when not hovered over
animate-slideUp - element slides up from bottom of screen
animate-slideLeft - element slides from the right to left
animate-slideLeft-hover - element slides from the righ to left on hover
For screen size references refer to Features section above on section related to Breakpoints.
.hide - element is hidden
.hide-sm - block element is hidden on small screens
.hide-sm-inline - inline-block element is hidden on small screens
.hide-sm-flex - flex-box element is hidden on small screens
.hide-md - block element is hidden on medium screens
.hide-md-inline - inline-block element is hidden on medium screens
.hide-md-flex - flex-box element is hidden on medium screens
.hide-lg - block element is hidden on large screens
.hide-lg-inline__ - inline-block element is hidden on large screens
.hide-lg-flex - flex-box element is hidden on large screens
.show-sm-only - element is hidden on both large and medium screens
.show-sm-only-inline - inline-block element is hidden on both large and medium screens
.show-sm-only-flex - flex-box element is hidden on both large and medium screens
.inline-block { display: inline-block; }
.underline { text-decoration: underline; }
.uppercase { text-transform: uppercase; }
.smallcaps { font-variant: small-caps; }
.text-strikeout { text-decoration: line-through; }
.bold { font-weight: 700; }
.bold-100 { font-weight: 100; }
.bold-200 { font-weight: 200; }
.bold-300 { font-weight: 300; }
.bold-400 { font-weight: 400; }
.bold-500 { font-weight: 500; }
.bold-600 { font-weight: 600; }
.bold-800 { font-weight: 800; }
.bold-900 { font-weight: 900; }
.italic { font-style: italic; }
.size-6 { font-size: 0.375em; }
.size-8 { font-size: 0.5em; }
.size-10 { font-size: 0.625em; }
.size-12 { font-size: 0.75em; }
.size-13 { font-size: 0.8125em; }
.size-14 { font-size: 0.875em; }
.size-15 { font-size: 0.9em; }
.size-16 { font-size: 1em; }
.size-18 { font-size: 1.125em; }
.size-20 { font-size: 1.25em; }
.size-22 { font-size: 1.375em; }
.size-24 { font-size: 1.5em; }
.size-26 { font-size: 1.625em; }
.size-28 { font-size: 1.75em; }
.size-30 { font-size: 1.875em; }
.size-32 { font-size: 2em; }
.size-34{ font-size: 2.125em; }
.size-36 { font-size: 2.25em; }
.size-38 { font-size: 2.375em; }
.size-40 { font-size: 2.5em; }
.size-46 { font-size: 2.875em; }
.size-50 { font-size: 3.125em; }
.lineH-1-2 { line-height: 1.2; }
.lineH-1-3 { line-height: 1.3; }
.lineH-1-4 { line-height: 1.4; }
.lineH-20 { line-height: 20px; }
.lineH-30 { line-height: 30px; }
.lineH-70 { line-height: 70px; }
.text-black { color: #000; }
.text-white { color: #fff; }
.text-mute { color: #aaa; }
.text-gray { color: #6f6f6f; }
.text-dark { color: #555; }
.text-red { color: #ff4d4d; }
.text-blue { color: #0073e6; }
.text-green { color: #11af11; }
.text-yellow { color: #efa611; }
.text-orange { color: #f71; }
.bg-none { background: transparent; }
.bg-white { background-color: #fff; }
.bg-black { background-color: #000; }
.bg-gray { background-color: #aaa; }
.bg-darkgray { background-color: #333; }
.bg-red { background-color: #a11; }
.bg-lightgray { background-color: #f2f2f2; }
.bg-jumbo - non-repeating background image, that covers the entire element width and height while centered which resizes depending on the view width of the browser.
.width-max { width: 100%; }
.height-30 { min-height: 30px; }
.height-50 { min-height: 50px; }
.height-100 { min-height: 100px; }
.height-250 { min-height: 250px; }
.height-300 { min-height: 300px; }
.height-500 { min-height: 500px; }
.height-max { height: 100%; }
.border { border: 1px gray solid; }
.border-2 { border: 2px gray solid; }
.border-3 { border: 3px gray solid; }
.border-r-0 { border-right: none; }
.border-l-0 { border-left: none; }
.border-t-0 { border-top: none; }
.border-b-0 { border-bottom: none; }
.border-circle { border-radius: 50%; }
.border-rad-10 { border-radius: 10px; }
.border-white { border-color: #fff; }
.border-black { border-color: #000; }
.border-red { border-color: #c00; }
.m-t-1 { margin-top: 1em; }
.m-t-2 { margin-top: 2em; }
.m-t-3 { margin-top: 3em; }
.m-t-4 { margin-top: 4em; }
.m-t-10 { margin-top: 10px; }
.m-t-15 { margin-top: 15px; }
.m-t-20 { margin-top: 20px; }
.m-b-1 { margin-bottom: 1em; }
.m-b-2 { margin-bottom: 2em; }
.m-b-3 { margin-bottom: 3em; }
.m-b-10 { margin-bottom: 10px; }
.m-l-1 { margin-left: 1em; }
.m-l-2 { margin-left: 2em; }
.m-l-3 { margin-left: 3em; }
.m-l-20 { margin-left: 20px; }
.m-r-1 { margin-right: 1em; }
.m-r-2 { margin-right: 2em; }
.m-r-3 { margin-right: 3em; }
.margin-l-auto { margin-left: auto; }
.margin-r-auto { margin-right: auto; }
.p-0 { padding: 0 !important; }
.p-5 { padding: 5px; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.p-5-child div { padding: 5px; }
.p-5-child-md div { padding: 5px; }
.p-10-child div { padding: 10px; }
.p-15-child div { padding: 15px; }
.p-l-1 { padding-left: 1em; }
.p-l-2 { padding-left: 2em; }
.p-l-3 { padding-left: 3em; }
.p-l-5 { padding-left: 5px !important; }
.p-r-1 { padding-right: 1em; }
.p-r-2 { padding-right: 2em; }
.p-r-3 { padding-right: 3em; }
.p-t-1 { padding-top: 1em; }
.p-t-2 { padding-top: 2em; }
.p-t-3 { padding-top: 3em; }
.p-t-10 { padding-top: 10px; }
.p-t-15 { padding-top: 15px; }
.p-t-20 { padding-top: 20px; }
.p-b-1 { padding-bottom: 3em; }
.p-b-2 { padding-bottom: 3em; }
.p-b-3 { padding-bottom: 3em; }
.p-b-3px { padding-bottom: 3px !important; }
.p-b-10 { padding-bottom: 10px; }
.p-b-15 { padding-bottom: 15px; }
.p-b-20 { padding-bottom: 20px; }
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }
.width-auto { width: auto; }
.center { margin: auto; }
.center-text { text-align: center; }
.vert-mid, .vert-mid * { vertical-align: middle; align-self: center; }
.vert-top, .vert-top * { vertical-align: top; align-self: flex-start; }
.vert-btm, .vert-btm * { vertical-align: bottom; align-self: flex-end; }
.vert-stretch, .vert-stretch * { vertical-align: middle; align-self: stretch; height: 100%; }
.vert-middle { top: 50%; transform: translateY(-50%); }
- Convert grid system to a flex-box based system
👤 Aaron Rory
- GitHub: @Aaron-RN
- Twitter: @ARNewbold
- Linkedin: Aaron Newbold
Contributions, issues and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
This project is MIT licensed.