Bedrock CSS Micro-Framework

A small CSS framework that gets you started with minimal effort. It follows the B.E.M. model.

Grid

Default

1
11
2
10
3
9
4
8
5
7
6
6
-
-
-
-
-
-
-
-



  

    
1

    
11

  

  

    
2

    
10

  

  

    
3

    
9

  

  

    
4

    
8

  

  

    
5

    
7

  

  

    
6

    
6

  

  

    
-

    
-

    
-

    
-


    
-

    
-

    
-

    
-

Push/Pull

1
2
1
2



  

    
1

    
2

  


  

    
1

    
2

Typography

Headings

Heading 1 Sub Heading
Heading 1 Sub Heading

Heading 2 Sub Heading
Heading 2 Sub Heading

Heading 3 Sub Heading
Heading 3 Sub Heading

Heading 4 Sub Heading
Heading 4 Sub Heading

Heading 5 Sub Heading
Heading 5 Sub Heading
Heading 6 Sub Heading
Heading 6 Sub Heading


Heading 1 Sub Heading


Heading 2 Sub Heading


Heading 3 Sub Heading


Heading 4 Sub Heading


Heading 5 Sub Heading


Heading 6 Sub Heading

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



...

Lead Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



...

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sed aut, ipsum maxime sapiente neque iste illum commodi laudantium alias! Molestias alias, qui non debitis numquam inventore rem neque tempore!

John Wayne 



  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sed aut, ipsum maxime sapiente neque iste illum commodi laudantium alias! Molestias alias, qui non debitis numquam inventore rem neque tempore!

  John Wayne

Code

#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}


#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}

Common

Normal Link
Marked Text
Deleted Text
Strike-through Text
Inserted Text
Underlined Text
Small Text
Bold Text
Italic Text
Abbreviation
Code
Keyboard Defined Input
Quatations


Normal Link
Marked Text
Deleted Text
Strike-through Text
Inserted Text
Underlined Text
Small Text
Bold Text
Italic Text
Abbreviation
Code
Keyboard Defined Input
Quatations

Alignement Classes

Left Aligned

Center Aligned

Right Aligned

Justified Text

No Wrap



Left Aligned


Center Aligned


Right Aligned


Justified


No Wrap

Transformation Classes

LOWERCASE

uppercase

capitalize



LOWERCASE


uppercase


capitalize

Lists

Unorderered/Ordered Lists

Ordered List
  1. List Item
  2. List Item
    • List Item
    • List Item
    • List Item
    • List Item
    • List Item
  3. List Item
  4. List Item
Unordered List
  • List Item
  • List Item
    • List Item
    • List Item
    • List Item
    • List Item
    • List Item
  • List Item
  • List Item
Ordered List nested inside Unstyled List
  1. List Item
  2. List Item
    1. List Item
    2. List Item
    3. List Item
    4. List Item
    5. List Item
  3. List Item
  4. List Item


    
  
  1. List Item
    2. 
  
  2. 
    List Item
    
      
      
    • List Item
      • 
      
    • List Item
      • 
      
    • List Item
      • 
      
    • List Item
      • 
      
    • List Item
      • 
    
    
  
    3. 
  
  3. List Item
    4. 
  
  4. List Item
    5. 




    
  
  • List Item
    • 
  
  • 
    List Item
    
      
      
    • List Item
      • 
      
    • List Item
      • 
      
    • List Item
      • 
      
    • List Item
      • 
      
    • List Item
      • 
    
    
  
    • 
  
  • List Item
    • 
  
  • List Item
    • 




    
  
  1. List Item
    2. 
  
  2. 
    List Item
    
      
      
    1. List Item
      2. 
      
    2. List Item
      3. 
      
    3. List Item
      4. 
      
    4. List Item
      5. 
      
    5. List Item
      6. 
    
    
  
    3. 
  
  3. List Item
    4. 
  
  4. List Item
    5.

Inline Lists

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item


    
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    • 




    
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    • 




    
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    • 




    
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    • 




    
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    • 
  
  • List Item
    •

Definition Lists

Definition list
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



  
Definition list

  
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  
Lorem ipsum dolor sit amet

  
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Forms

Inputs

Textarea

Select

Checkbox




  
    
    
    • 
    
    • 
    
    •

Radio




  
    
    
    • 
    
    • 
    
    •

Toggle

Checkbox Toggles
Radio Toggles



  
Checkbox Toggles

  
    
    
  • 
      
    
        
        
      
    
    
    • 
    
  • 
      
    
        
        
      
    
    
    • 
    
  • 
      
    
        
        
      
    
    
    • 
  






  
Radio Toggles

  
    
    
  • 
      
    
        
        
      
    
    
    • 
    
  • 
      
    
        
        
      
    
    
    • 
    
  • 
      
    
        
        
      
    
    
    •

Horizontal Form

Tables

Table Stripe

ID Name Alias Email
1 Steve Rogers Captain America captainamerica@test.com
2 Tony Starks IronMan ironman@test.com
3 Bruce Banner The Hulk hulk@test.com

Table Condense

ID Name Alias Email
1 Steve Rogers Captain America captainamerica@test.com
2 Tony Starks IronMan ironman@test.com
3 Bruce Banner The Hulk hulk@test.com

Table Border

ID Name Alias Email
1 Steve Rogers Captain America captainamerica@test.com
2 Tony Starks IronMan ironman@test.com
3 Bruce Banner The Hulk hulk@test.com

Table Hover

ID Name Alias Email
1 Steve Rogers Captain America captainamerica@test.com
2 Tony Starks IronMan ironman@test.com
3 Bruce Banner The Hulk hulk@test.com 



  

    
      

        ID
        Name
        Alias
        Email
      

    
    
      

        1
        Steve Rogers
        Captain America
        captainamerica@test.com
      

      

        2
        Tony Starks
        IronMan
        ironman@test.com
      

      

        3
        Bruce Banner
        The Hulk
        hulk@test.com