Artemis CSS library

A nice css library to provide pastel elements to include in your website.

version 0.1.5

CSS class available

Declinaison of color

Once you know which class you want to use you can add the following ending work to change the color

Here are the color

Term | color | value --- | --- | --- -primary | | #F3D250 -secondary | | #90CCF4 -secondary-dark | | #5DA2D5 -danger | | #F78888 -warning | | #ffb347 -success | | #77dd77 -white | | #ECECEC -black | | #000000

Buttons

• gamer (ex: gamer, gamer-danger, gamer-secondary, ...)
• flat (ex: flat,flat-danger, flat-secondary, ...)
• reverse-flat (ex: reverse-flat, reverse-flat-danger, reverse-flat-secondary, ...)
• neon (ex: neon, neon-danger, neon-secondary, ...)

Inputs

• artemis-input (ex: artemis-input, artemis-input-danger, artemis-input-secondary, ...)

Highlight

work with some span

• highlight (ex: highlight, highlight-danger, highlight-secondary, ...)
• important (ex: important, important-danger, important-secondary, ...)
• show (ex: show, show-danger, show-secondary, ...)

Link

• link (ex: link, link-danger, link-secondary, ...)

Container

• artemis-container
• artemis-container-shadow

inside the container, you can also define a title inside a p tag with the class artemis-container-title, like that:

<p class="artemis-container-title">

To change the the position of the title (which is left by default), you can add the class right or center to the container ex:

<div class="artemis-container right">
    <p class="artemis-container-title"> test de titre</p>
    <p>test</p>
</div>

Alert

• artemis-alert (ex: artemis-alert, artemis-alert-danger, artemis-alert-secondary, ...)
• artemis-alert-shadow (ex: artemis-alert-shadow, artemis-alert-danger-shadow, artemis-alert-secondary-shadow, ...)

How to use it?

npm install artemis-css

It will create a node module package. If you are using a scss file you can directly import it like that

@import "../node_modules/artemis-css/artemis.min.css";

Or if you prefer to include it in the head of your html file.

<link href="./node_modules/artemis-css/artemis.min.css" rel="stylesheet">

Last solution, you can use the cdn.jsdelivr link (don't forget to change the version on this link):

<link href="https://cdn.jsdelivr.net/npm/[email protected]/artemis.min.css" rel="stylesheet">

You can now use all the classes provided by the library

In the next release

• Propose other style for different form components

Other