JarCasting
JarCasting JarCasting

css-avatars

WebJar for css-avatars

License

License

MIT
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

css-avatars
Last Version

Last Version

0.4.0
Release Date

Release Date
Type

Type

jar
Description

Description

css-avatars
WebJar for css-avatars
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/rmhdev/css-avatars

Download css-avatars

Filename Size
css-avatars-0.4.0.pom
css-avatars-0.4.0.jar 153 KB
css-avatars-0.4.0-sources.jar 22 bytes
css-avatars-0.4.0-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/css-avatars/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>css-avatars</artifactId>
    <version>0.4.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/css-avatars/
implementation 'org.webjars.bower:css-avatars:0.4.0'
// https://jarcasting.com/artifacts/org.webjars.bower/css-avatars/
implementation ("org.webjars.bower:css-avatars:0.4.0")
'org.webjars.bower:css-avatars:jar:0.4.0'
<dependency org="org.webjars.bower" name="css-avatars" rev="0.4.0">
  <artifact name="css-avatars" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='css-avatars', version='0.4.0')
)
libraryDependencies += "org.webjars.bower" % "css-avatars" % "0.4.0"
[org.webjars.bower/css-avatars "0.4.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

CSS avatars

Minimalistic avatars based on css. Color + letter = visual identification.

Avatar letter C

Possible combinations: 216 colors * 26 letters * 2 versions (default, inverted): 11232

Installation

The easiest way is using bower:

bower install css-avatars

Other options:

  • Download the latest release.
  • Clone the repo:git clone https://github.com/rmhdev/css-avatars.git

How to use

<i class="avatar avatar-color-95 avatar-letter-c"></i>
  • avatar: base class
  • avatar-color-*: color number, from 0 to 215. Read more about web-safe colors
  • avatar-letter-*: (optional) letter, from a to z
  • avatar-*: (optional) size: sm, md, lg
  • avatar-inverse: (optional) inverted colors
  • avatar-plain: (optional) remove text shadow

You can also create avatars with special letters. Just don't use the avatar-letter-* class and write the letter in the tag.

<i class="avatar avatar-color-201">ü</i>

Examples

View an online demo. There's also a raw demo with all the colors and sizes.

Avatar examples

Do it yourself

Creating your customized CSS avatars is easy. You'll need npm, the nodejs package manager; check it before continuing.

Clone the repo:

git clone https://github.com/rmhdev/css-avatars.git

Install the dependencies:

cd css-avatars
npm install

That's it! Now edit the less/css-avatars.less and then run one of the following grunt tasks:

  • grunt less-compile: compiles the less file, creating the default css version.
  • grunt dist-css: generates the css files (default and minified versions).
  • grunt compile: compresses the css folder in a zip.
  • grunt: this task will watch for changes in the less source, compiling it and generating the css file automatically.

Code

I started this project with some goals in mind:

  • Play with Less
  • Learn more about CSS + fonts.

Change log

  • 0.0.1 (May 18, 2014): initial release.
  • 0.1.0 (May 18, 2014): added inverse mode.
  • 0.2.0 (May 18, 2014): letter class is optional (for adding special characters).
  • 0.3.0 (May 25, 2014): add text shadow (enhance readability). Files with consistent naming.
  • 0.4.0 (Jul 8, 2015): increase font size. Add bower support.

Copyright and license

Code and documentation copyright 2015 Rober Martín. Code released under MIT license. Docs released under Creative Commons CC BY 4.0.

This project is inspired in default avatars used in Google's Gmail Android App. CSS is based on Glyphicons (awesome project!). I started working on this project after reading Switch from Gravatar to HTML/CSS letters for no-avatar users.

Author

My name is Rober Martín (@rmhdev). I'm a developer from Donostia / San Sebastián.

Versions

Version
0.4.0