Style Guide ‘Parchemin’ v0.2.6

How to use Parchemin

Via Bower

bower install parchemin

Old Fashion Way

Download the all repository !

(or grab the two css files below)

Includes the files

Include parchemin.css

And thats all !

No js required, it's just work !

Work with sass

You can also use the source files in sass format in src/sass/

Dependency

Font awesome

Typography

Headings

H1

Lorem ipsum

H2

Lorem ipsum

H3

Lorem ipsum

H4

Lorem ipsum

H5
Lorem ipsum

Other Copy

Paragraph

Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste. Ptolomaeo enim rege foederato nobis et socio ob aerarii nostri angustias iusso sine ulla culpa proscribi ideoque hausto veneno voluntaria morte deleto et tributaria facta est et velut hostiles eius exuviae classi inpositae in urbem advectae sunt per Catonem, nunc repetetur ordo gestorum. (14px)

Basic Link
BâtB.fr
disclaimer text

Nec piget dicere avide magis hanc

Auto smaller ?

Nec piget dicere avide magis hanc

Auto small ?

Nec piget dicere avide magis hanc

Auto big ?

Nec piget dicere avide magis hanc

Auto bigger ?

Nec piget dicere avide magis hanc

Auto biggest ?

Nec piget dicere avide magis hanc

unordered lists
  • Nec piget dicere avide magis hanc insulam populum
    aomanum invasisse quttam iuste.
  • Ptolomaeo enim rege foederato n proscribi ideoque. (14px)
inline icons ?? Demander a DAvid si l'inclusion est automatique ?? La couleur de l'icone est différente.

Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste.

Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste.

UI Colours

Type
#464646
#f0f0f0
#aeaeae
#5568f4
#a055f4
Badge color
#e31b15
#f0f0f0
#aeaeae
#7adaa3
#aeaeae
#7ad5da;
Gradiant
#5568f4 — #a055f4

Components

Main list

Regular
#5
Urgent Lorem : Neque porro quisquam elorem ipsum.
Nouveau Antoine Bordeau PROJET : Elitis site auteur
Hover
#5
Urgent Lorem : Neque porro quisquam elorem ipsum.
Nouveau Antoine Bordeau PROJET : Elitis site auteur
Current
#5
Urgent Lorem : Neque porro quisquam elorem ipsum.
Nouveau Antoine Bordeau PROJET : Elitis site auteur
Regular without tag
#5
Lorem : Neque porro quisquam elorem ipsum.
Nouveau Antoine Bordeau PROJET : Elitis site auteur

Simple list

Regular
Antoine Bordeau
antoinebordeau@exemple.org
Hover
Antoine Griezmann
antoinegriezmann@exemple.org
Current
Antoine Daniel
antoinedaniel@exemple.org

Timeline

Main date
Aujourd’hui
Event
23/05/2016 - 15:22 Louis Dufil
Nouveau Message Ah zur, les gif sont pas affichés directement.

Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevi grmusw.

Event Rollover
23/05/2016 - 15:22 Louis Dufil
Nouveau Message Ah zur, les gif sont pas affichés directement.

Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevi grmusw.

Notifications

Success
Success : magis hanc insulam populum Romanum invasisse quam iuste.
Error
Error : magis hanc insulam populum Romanum invasisse quam iuste.
Warning
Warning : magis hanc insulam populum Romanum invasisse quam iuste.
Information
Information : magis hanc insulam populum Romanum invasisse quam iuste.

Tags

Urgent
Urgent
Elevé
Elevé
Faible
Faible
Actif
Actif
Inactif
Inactif
Jeton(s)
25 jetons

Avatars

Avatar + ico
?
?
Avatar
?
?

Comments

Comments
?
Louis Duphil 25/05/2016 - 09:27

Pnc mauris enim, sollicitudin sed gravida ac, feugiat quis ipsum. Morbi lacinia sapien quis dui batb.fr, sit amet sodales magna sollicitudin.

Multi comments
?
Louis Philou 25/05/2016 - 09:27

Pnc mauris enim, sollicitudin sed gravida ac, feugiat quis ipsum. Morbi lacinia sapien quis dui batb.fr, sit amet sodales magna sollicitudin.

?
Jeanne d'Arc 25/05/2016 - 09:27
2

Pnc mauris enim, sollicitudin sed gravida ac, feugiat quis ipsum. Morbi lacinia sapien quis dui batb.fr, sit amet sodales magna sollicitudin.

PIECE JOINTE :
?
Louis XIV 25/05/2016 - 09:27
1

Pnc mauris enim, sollicitudin sed gravida ac, feugiat quis ipsum. Morbi lacinia sapien quis dui batb.fr, sit amet sodales magna sollicitudin. Sollicitudin sed gravida ac, feugiat quis ipsum.

Form elements

Title Input

Empty
Filled

Classic Input

Empty

Filled

Error

  • Lorem impsum
  • Lorem impsum

Textarea

Empty

Filled

Dropdown

Select field

Case à cocher

Input radio

Case à cocher

Input checkbox

Cards

Modal

Modal classique
Ouvrir la modal
Modal small
Ouvrir la modal

Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam libero in consectetur vel eius inventore totam similique, harum rerum odit qui commodi, obcaecati eum unde quaerat perferendis ad sequi dolorem temporibus iure. Fuga quod rem impedit vero possimus saepe hic, enim totam doloremque eveniet facere, porro cumque, minus nam! Voluptas sint aut voluptatem voluptates et, aliquid distinctio nostrum totam, possimus ut, eveniet optio dolor pariatur iusto minima corporis! Quaerat sed quidem illum accusantium hic obcant, quia dolorum debitis culpa. Commodi enim, voluptatibus. Numquam quis recusandae, natus ad, voluptatum excepturi amet hic sunt non aperiam fugiat provident cupiditate illo aliquam in.

Dropdown

Dropdown

Tooltip

Tooltip classique
Top
Right
Bottom
Left
Tooltip style
Eponge
Bob
Tortue
Ninja
Paille
Bois
Tooltip Média
Mon-img.jpg
Mon-img.jpg
Mon-img.jpg

Ressources, inspirations

Liens

Basé sur Knacss
https://github.com/alsacreations/KNACSS/tree/master/doc
Styleguide Knacss
http://codepen.io/raphaelgoetter/full/LNwOjz/
Font awesome
http://fontawesome.io/
Bulma
http://bulma.io