A Lightweight Flex CSS Gird Framework
-
.the-idea {
Finally got around to building my own Simple CSS Framework after becoming too annoyed at the reliance on the likes of a Foundation & Bootstrap. Foundation served me well for years, but it’s too bloated and too contaminated with elements that could be refactored and simplified. Which leads me to this! I now have my simple (under 80kb) responsive flex box grid + components which I’venamed the Cattle Grid
-
.the-implementation {
If you want just the css grid, grab _grid.scss from assets/scss/base (under 25kb) and import it into your stylesheets! The repo for the entire codebase can be found over on GitLab
}
-
.the-implementation {
-
.the-playground {
Below you will find all the elements that are bundled up in the Cattle Grid.
-
.grid {
This is the basis of the entire project! The class styles are based off Bootstrap or Foundation so you dont have to worry about muscle memory taking over!
small-12 medium-6 large-3small-12 medium-6 large-3small-12 medium-6 large-3small-12 medium-6 large-3small-12 large-4small-12 large-4small-12 large-4small-12 large-6small-12 large-6small-12 -
.positioning {
Aligning anything in Cattle Grid is extremly simple
align-self-topalign-self-middlealign-self-bottomalign-all
align-top
align-bottom
horizontal centervertical centerabsolute center -
.headlines {
Headlines are created using a simple mixin to calculate both the size and the style for each, allowing for a simple way to add extra headlines if needed
Cattle Grid | A simple, configurable CSS Flexbox Framework
H1 Headline at 40px desktop & 30px mobile
Cattle Grid | A simple, configurable CSS Flexbox Framework
H2 Headline at 30px desktop & 18px mobile
Cattle Grid | A simple, configurable CSS Flexbox Framework
H3 Headline at 25px desktop & 16px mobile
Cattle Grid | A simple, configurable CSS Flexbox Framework
H4 Headline at 20px desktop & 16px mobile
Cattle Grid | A simple, configurable CSS Flexbox Framework
H5 Headline at 18px desktop & 14px mobile
Cattle Grid | A simple, configurable CSS Flexbox Framework
H6 Headline at 16px desktop & 14px mobile
-
.list {
List items
- This is a list item in the Cattle Grid
- So is this - there could be more
- Make sure to style list items to:
- Not forgetting child list items
- Not forgetting child list items
- Not forgetting child list items
- Not forgetting child list items
- A couple more
- top level list items
- This is an ordered list in the Cattle Grid
- So is this - there could be more
- Not forgetting child list items
- Not forgetting child list items
- A couple more
- top level list items
-
.tables {
A Table
Table Heading Table Heading table data table data table data table data table data table data table data table data -
.quotes_code {
Block Quotes
“A blockquote! I may as well take the time to talk more about what makes the Cattle Grid CSS Framework a worth while choice when starting a new project. If you've ever decided to use a framework and realised just how bloated it is, you will notice files absolutely everywhere - and you know you can't remove them as it will just collapse, but you have no use for them at all, so you're stuck. This is where the Cattle Grid is different, - you can nuke whatever you want! So long as you have your grid, your settings and your config file - the rest is up to you!
Block Quotes with CiteContinuining on from above.. The files I've added into the base folder are just things I think could be useful, but they're not a necessity. If you like how this is organised and structured, just wait until you see the Wordpress theme!
Pre Code#header h1 a { display: block; width: 300px; height: 80px; }
-
.text {
Address Address: Cattle 224, Grid Lane, UK
I am the a tag
I am the abbr tag
I am the b tag
I am the cite tag
I amthe code tag
I amthe del tag
I am the dfn tag
I am the em tag
I am the i tag
I am the ins tag
I am the kbd tag
I amthe q tag
I am the samp tag
I am the small tag
I am the span tag
I am the sub tag
I am the var tag
I am the small class
I am the large class
I am the quiet class
I am the highlight class -
.form_elements {
Inputs
Select Options
Select with icon
Loaders
Text AreaText Area Rounded
Check Boxes
Radio Boxes
Switch
File uploadTo show the file name next to the button after a file has been chosen, sadly you will need some very simple js!
-
.buttons {
-
.images {
Image Filters
Thankyou to Bryan Minear for the amazing image of the Cattle!
Normal
Overlay
Greyscale
Blur
-
.fades {
Hover to hide
hello!goodbye! -
.badges {
Primary Secondary Tertiary Quaternary Success Danger Warning
Instagram Facebook Twiter Pinterest Etsy Buffer Reddit
-
.grid {