CSS Grid Frame Work

8 Dec 2020

Yes i dont have an cool names for it, I just wanted something fairly light that can replace the bootstrap and foundation grid and basic components that i use so often, some of these frameworks have so much bloat that i dont use so i thought i would try and create something my self. 

Mission is to keep it small and bloat free while still including some nice styles and colour schemes. Will see how i go with that. ;)

Basic Reset

The basic reset just sets all margin and padding to 0 and then some default fonts, i like the ones included with bootstrap, and due to size will try and not use google fonts and see how it looks. 

Margin and Padding

Some classes to add easy margins and paddings to things. 

Margin:

  • m# : margin pixels number, set all margins of an element
  • mt# : margin top pixels
  • mb# : margin bottom pixels
  • ml# : margin left pixels
  • mr# : margin right pixels

Padding:

  • p# : padding pixels number, set all padding of an element
  • pt# : padding top pixels
  • pb# : padding bottom pixels
  • pl# : padding left pixels
  • pr# : padding right pixels

m0 all the way to m50 in increments of 5px, so you can add things like

<div class='p20 mt10 mb10'>Padding 20px and margin top and bottom 10px</div>

Grid and Wrap

This will cover the col row and grid-x elements of foundation and bootstrap. 

CSS

/* Basic Reset */
:root {
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
*,body,html
{
  font-family: var(--font-family-sans-serif), sans-serif;
  box-sizing: border-box;
  transition: all 0.2s;
  scroll-behavior: smooth;
  margin:0;
  padding:0;
}
pre,code
{
  font-family: var(--font-family-monospace), monospace;
}
html {
  overflow-x:hidden;
}
ul {
  margin-left: 20px;
}
/* Basic Reset */

/* Margin Padding - 0px to 50px */
.m0{margin:0px}.mr0{margin-right:0px}.ml0{margin-left:0px}.mt0{margin-top:0px}.mb0{margin-bottom:0px}.p0{padding:0px}.pr0{padding-right:0px}.pl0{padding-left:0px}.pt0{padding-top:0px}.pb0{padding-bottom:0px}.m5{margin:5px}.mr5{margin-right:5px}.ml5{margin-left:5px}.mt5{margin-top:5px}.mb5{margin-bottom:5px}.p5{padding:5px}.pr5{padding-right:5px}.pl5{padding-left:5px}.pt5{padding-top:5px}.pb5{padding-bottom:5px}.m10{margin:10px}.mr10{margin-right:10px}.ml10{margin-left:10px}.mt10{margin-top:10px}.mb10{margin-bottom:10px}.p10{padding:10px}.pr10{padding-right:10px}.pl10{padding-left:10px}.pt10{padding-top:10px}.pb10{padding-bottom:10px}.m15{margin:15px}.mr15{margin-right:15px}.ml15{margin-left:15px}.mt15{margin-top:15px}.mb15{margin-bottom:15px}.p15{padding:15px}.pr15{padding-right:15px}.pl15{padding-left:15px}.pt15{padding-top:15px}.pb15{padding-bottom:15px}.m20{margin:20px}.mr20{margin-right:20px}.ml20{margin-left:20px}.mt20{margin-top:20px}.mb20{margin-bottom:20px}.p20{padding:20px}.pr20{padding-right:20px}.pl20{padding-left:20px}.pt20{padding-top:20px}.pb20{padding-bottom:20px}.m25{margin:25px}.mr25{margin-right:25px}.ml25{margin-left:25px}.mt25{margin-top:25px}.mb25{margin-bottom:25px}.p25{padding:25px}.pr25{padding-right:25px}.pl25{padding-left:25px}.pt25{padding-top:25px}.pb25{padding-bottom:25px}.m30{margin:30px}.mr30{margin-right:30px}.ml30{margin-left:30px}.mt30{margin-top:30px}.mb30{margin-bottom:30px}.p30{padding:30px}.pr30{padding-right:30px}.pl30{padding-left:30px}.pt30{padding-top:30px}.pb30{padding-bottom:30px}.m35{margin:35px}.mr35{margin-right:35px}.ml35{margin-left:35px}.mt35{margin-top:35px}.mb35{margin-bottom:35px}.p35{padding:35px}.pr35{padding-right:35px}.pl35{padding-left:35px}.pt35{padding-top:35px}.pb35{padding-bottom:35px}.m40{margin:40px}.mr40{margin-right:40px}.ml40{margin-left:40px}.mt40{margin-top:40px}.mb40{margin-bottom:40px}.p40{padding:40px}.pr40{padding-right:40px}.pl40{padding-left:40px}.pt40{padding-top:40px}.pb40{padding-bottom:40px}.m45{margin:45px}.mr45{margin-right:45px}.ml45{margin-left:45px}.mt45{margin-top:45px}.mb45{margin-bottom:45px}.p45{padding:45px}.pr45{padding-right:45px}.pl45{padding-left:45px}.pt45{padding-top:45px}.pb45{padding-bottom:45px}.m50{margin:50px}.mr50{margin-right:50px}.ml50{margin-left:50px}.mt50{margin-top:50px}.mb50{margin-bottom:50px}.p50{padding:50px}.pr50{padding-right:50px}.pl50{padding-left:50px}.pt50{padding-top:50px}.pb50{padding-bottom:50px}
/* Margin Padding */

Other Items in framework
Page Views

This page has been viewed 100 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
In this case my anchor this week becomes driving almost 2hrs outside of Atlanta to one of my favorite hard core gyms in the world.. MetroFlex aka The Dungeon. The gym owners turn the heat way up so it becomes a fun sweat box and the gym members just watch from afar and leave me alone. I happily drive myself long distances to find MY ANCHOR. Our anchor allows us to have balance, focus and be as productive as possible. And if you're in the middle of a heavy set and your headphones start to fall off your head, like mine did here.. well.. f*ck the headphones. Let em break and fall. You can always get a new pair, but the iron ain't ever gonna lift itself.
Unknown