A Lightweight Flex CSS Gird Framework

.zip file     git repo    
  • .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

      }
    }
  • .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-3
      small-12 medium-6 large-3
      small-12 medium-6 large-3
      small-12 medium-6 large-3
      small-12 large-4
      small-12 large-4
      small-12 large-4
      small-12 large-6
      small-12 large-6
      small-12
      }
    • .positioning {

      Aligning anything in Cattle Grid is extremly simple

      align-self-top
      align-self-middle
      align-self-bottom
       

      align-all

      align-top

      align-bottom

      horizontal center
      vertical center
      absolute 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
      Ordered lists
      1. This is an ordered list in the Cattle Grid
      2. So is this - there could be more
        1. Not forgetting child list items
        2. Not forgetting child list items
      3. A couple more
      4. 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 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 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 Cite

      Continuining 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 !


      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 am the code tag
      I am the 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 am the 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
      15%
      15%
      15%
      15%
      Text Area
      Text Area Rounded
      Check Boxes
      Radio Boxes
      Switch
      File upload

      To 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 for the amazing image of the Cattle!


      Cattle Grid CSS Framework - image filter

      Normal

      Cattle Grid CSS Framework - image filter

      Overlay

      Cattle Grid CSS Framework - image filter

      Greyscale

      Cattle Grid CSS Framework - image filter

      Blur

      }
    • .fades {

      Hover to hide

      hello!

      Hover to show

      goodbye!
      }
    • .badges {
      Primary Secondary Tertiary Quaternary Success Danger Warning
      Instagram Pinterest Etsy Buffer Reddit
      }
    }