lit
littlebox
npm i littlebox
lit

littlebox

Super simple to implement, CSS-only icons.

by Cabell Maddux

0.1.0 (see all)License:MITTypeScript:Not Found
npm i littlebox
Readme

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 reveiwed.

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

Downloads/wk

2

GitHub Stars

535

LAST COMMIT

6yrs ago

MAINTAINERS

1

CONTRIBUTORS

6

OPEN ISSUES

5

OPEN PRs

0
VersionTagPublished
0.1.0
latest
8yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate