Idle is designed to be a simple CSS library that you can drop in to start with some alright looks.

Idle is not layout-focused like many other libraries and if that's something you are looking for then you can go use one of the many available. That said, Idle provides minimal layout functionality for very basic use cases. One great option is to use Idle for apperance and write your own CSS for laying things out.

Check out what it offers and take it for a spin!

Showcase

Headings

              
Heading 1
              
Heading 2
              
Heading 3
              
Heading 4
              
Heading 5
              
Heading 6
            

                
Heading 1
                
Heading 2
                
Heading 3
                
Heading 4
                
Heading 5
                
Heading 6
            

Paragraphs and links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel egestas magna, nec dictum ipsum. Fusce a cursus augue. Fusce pellentesque consectetur mauris, ac varius ligula ultrices eget. Phasellus consequat nisi ac dolor egestas semper nec in ligula. Vestibulum tempus arcu sit amet nisi cursus mattis. Cras vitae mollis metus. Quisque id blandit felis. Suspendisse lorem tellus, molestie vitae vestibulum id, mollis ac elit. Proin neque nibh, imperdiet vitae felis at, faucibus porttitor ipsum. Morbi malesuada facilisis magna et pharetra. Maecenas vitae aliquet lectus, imperdiet elementum nibh. Maecenas malesuada porta mauris, vel tempus metus elementum eu. Proin ante nunc, ultrices id purus ut, scelerisque finibus eros. Phasellus imperdiet mattis magna et sollicitudin. Vestibulum vitae laoreet mi. Integer mi nisl, laoreet eget nulla eget, aliquet mollis risus.

Sed laoreet aliquet nibh, sed rhoncus sapien imperdiet a. Sed pharetra nunc risus, nec volutpat nisi laoreet non. Suspendisse rutrum lacinia mattis. Pellentesque vitae justo dictum, venenatis massa vel, vehicula odio. Mauris fermentum velit rutrum metus tempor, sed tempor ex aliquam. Ut vulputate tempor ultrices. Proin at enim quam. Cras gravida dolor dictum nunc vulputate, sit amet elementum lorem imperdiet. Proin vitae tincidunt dui. Donec sapien turpis, pulvinar sed lobortis eu, rutrum non ipsum. Suspendisse vel convallis elit.

      
Lorem ipsum dolor sit amet, consectetur adipiscing elit... 
      
Sed laoreet aliquet...
  
    

List

• This is a list item
  • Subitem
• This is another one
• And another one

1. This is a list item
   1. Subitem
2. This is another one
3. And another one

        

            
This is a list item
              

                
Subitem
              
            
            
This is another one
            
And another one
          
      
          

            
This is a list item
              

                
Subitem
              
            
            
This is another one
            
And another one
          
    

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel egestas magna, nec dictum ipsum. Fusce a cursus augue. Fusce pellentesque consectetur mauris, ac varius ligula ultrices eget. Phasellus consequat nisi ac dolor egestas semper nec in ligula. Vestibulum tempus arcu sit amet nisi cursus mattis. Cras vitae mollis metus. Quisque id blandit felis. Suspendisse lorem tellus, molestie vitae vestibulum id, mollis ac elit. Proin neque nibh, imperdiet vitae felis at, faucibus porttitor ipsum. Morbi malesuada facilisis magna et pharetra. Maecenas vitae aliquet lectus, imperdiet elementum nibh. Maecenas malesuada porta mauris, vel tempus metus elementum eu. Proin ante nunc, ultrices id purus ut, scelerisque finibus eros. Phasellus imperdiet mattis magna et sollicitudin. Vestibulum vitae laoreet mi. Integer mi nisl, laoreet eget nulla eget, aliquet mollis risus.

        

            
Lorem ipsum...
        
    

Form Elements

        

        

        

        

  
         Radio 1

         Radio 2

  
         Check 1

         Check 2

  
        
          Option 1
          Option 2
          Option 3
        

  
        

        
      

Buttons

Default
      Danger
      Success
      Warning
      Info
      Inverted

  
      
      Disabled

Tables

        

          

            
Name
            
Age
            
Notes
          
        
        

          

            
Bob
            
18
            
Has an interesting persona
          
          

            
Josh
            
21
            
The best guy around
          
          

            
Jen
            
19
            
Loves kiwi fruit
          
        
      

Table with .full-width

      

        

          

            
...
          
        
        

          

            
...
          
        
      
    

Table with .full-width and .striped

        

          

            

              
...
            
          
          

            

              
...
            
          
        
      

Table with .full-width and .bordered

        

          

            

              
...
            
          
          

            

              
...
            
          
        
      

Code

{
  "name": "idle-css",
  "homepage": "https://github.com/jf908/idle-css",
  "author": {
    "name": "jf908"
  }
}

  
  
...

No syntax highlihting is included in this library, it is provided by highlight.js

Navigation

Alert

        This is the default alert! Boring! Dull!
      
      

          This is the inverted alert! Dark! Mysterious!
        
      

        This is a danger alert! Beware! Danger!
      
      

        This is a success alert! Good! Victory!
      
      

        This is a warning alert! Warning! Caution!
      
      

        This is an info alert! Informational! Educative!
      

Card

        

            
Lorem ipsum dolor sit amet....
            

              Nested cards!
            
            
Sed laoreet aliquet...
    
        
    

Titled Card

        

            

              Lorem Ipsum
            
            

              
Lorem ipsum dolor sit amet...
              
Sed laoreet aliquet...
    
            
          
    

      

          

            Lorem Ipsum
          
          

            
Lorem ipsum dolor sit amet...
            
Sed laoreet aliquet...