Skip to content

Latest commit

 

History

History
120 lines (81 loc) · 4.02 KB

README.md

File metadata and controls

120 lines (81 loc) · 4.02 KB
Raw

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, ...)

button

Inputs

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

Input

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, ...)

hightlighted text

Link

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

link

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>

container

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, ...)

alert

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

Rate on Openbase