Skip to content

cmaddux/littlebox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

littlebox

Super simple to use, CSS-only icons

littlebox

littlebox explained

A demo of littlebox icons in use.

Using littlebox

Step 1: Install littlebox through Bower or download littlebox and reference it in your project (along with Bootstrap, if not already initialized):
bower install littlebox

or

<link rel="stylesheet" type="text/css" href="lib/littlebox.min.css" />
<link rel="stylesheet" type="text/css" href="lib/bootstrap.min.css" />
Step 2: Add a littlebox icon to your project. The same structure is used for any littlebox:
<div class="lb-icon lb-*"></div>

Each littlebox icon is made up of three or fewer elements, but can be called with as a single element with class .lb-icon followed by the .lb-* class associated with the requested icon.

Customization

Each littlebox icon is built using borders, so an icon's color (or even individual elements within an icon) can be styled in your CSS:

.lb-*, .lb-*::before, .lb::after {
  border-color: /*YOUR COLOR HERE*/
}

Compatibility

Compatibility is still being reviewed.

Contributing

Suggestions, feedback and contributions to the icon library or compatibility would be greatly appreciated.

ToDo

  • Make icons scalable with EM units
  • Clean up jagged Firefox edges by setting transparent borders to 'inset'
  • Compatibility testing
  • Add to icon library
  • Improve animation compatibility
  • Make usable as button groups and input addons

About

Super simple to implement, CSS-only icons.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published