JarCasting
JarCasting JarCasting

palette-js

WebJar for palette-js

License

License

ISC
Categories

Categories

JavaScript Languages
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

palette-js
Last Version

Last Version

1.0.3
Release Date

Release Date
Type

Type

jar
Description

Description

palette-js
WebJar for palette-js
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/jotavejv/palette-js

Download palette-js

Filename Size
palette-js-1.0.3.pom
palette-js-1.0.3.jar 682 KB
palette-js-1.0.3-sources.jar 22 bytes
palette-js-1.0.3-javadoc.jar 22 bytes
Browse

How to add to project

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

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.

Palette-js

Are you building a Design System or just a style guide? So, palettejs may help you!

Add a beautiful palette colors to your project with a single line of code.

This JS source code is a modern es2015, so keep it in mind for browser support.

How to install

npm install palette-js

OR

Just import the CDN source code

<script src="https://cdn.rawgit.com/jotavejv/palette-js/d482cf3/dist/palette.min.js"></script>

How does it work

The JS code will inject to your project the required CSS style for the list of colors that you will add to the plugin. Then it will create a list of colors inside of the parent selector that you need especify. The JS handle copy to clipboard for you too! Just click at any color and it will add that especific color to your clipboard :)

How to use

You need especify a array of colors and the especific parent selector that will wrap these colors.

const colors = [
"aquamarine",
"pink",
"darkturquoise",
"steelblue",
"cadetblue",
"lightblue",
"lightsalmon",
"teal",
"darkseagreen",
"khaki",
"lightcoral",
"lightgray",
"coral",
"slategray",
"gray",
"lightseagreen"
];

palette(colors, document.querySelector(".example"));

Codepen link Demo

demo

demo

Versions

Version
1.0.3