AcadCMS Version 3

Texte secondaire (description)

En savoir plus Documentation

Avantages

Intuitif

Son interface d'administration est encore plus simple à utiliser pour fabriquer un site Web moderne.

Sécurisé

Se reposant sur des technologies solides et éprouvées, AcadCMS utilise des outils fiables...

Ergonomique

Habillage personnalisable, élégant et accessible fonctionnant sur mobile, tablette, ordinateur, etc.

Offres de services

L’académie de Grenoble a engagé une refonte technique et éditoriale de l'ensemble des sites internet et intranet. L’offre de service proposé par la DSI de l’Académie de Grenoble est un service clé en main. Le choix du socle pour cette refonte est la solution open source DRUPAL.

Ce site web clé en main permettra la publication d’informations publiques ou privées. Ces dernières étant accessibles après authentification.

Cette offre de service favorisera une harmonisation des sites entre les établissements, un design en accord avec la charte de l’académie de Grenoble est mis en place avec une accessibilité sur mobile et tablette.

Un Accompagnement, une assistance et de la formation en ligne seront proposés aux utilisateurs.Cette offre de service permettra une simplification de la maintenance, avec une gestion des incidents et des problèmes techniques. Nous mettons en place un hébergement en garantissant le maintien en conditions opérationnelles et la sécurité comprenant des montées de versions applicatives de l’outil Drupal.

Pour connaître la démarche à suivre pour demander l'ouverture d'un site avec la solution académique AcadCMS, merci de cliquer sur l'image ci-dessous correspondant à votre situation.

Parallax

L'équipe

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae odio ipsum. Aliquam consectetur pulvinar tellus, sed efficitur urna gravida in.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae odio ipsum. Aliquam consectetur pulvinar tellus, sed efficitur urna gravida in.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae odio ipsum. Aliquam consectetur pulvinar tellus, sed efficitur urna gravida in.

AcadCMS 3.3 (démo)

À noter que le thème peut avoir une couleur primaire variable (configurable au niveau de l'administration du thème).
Par contre, le thème possède une couleur "principale" ("main" en anglais), par défaut, qui est #000091 (couleur officielle du système de Design de l'État).

Accordéons

Accordéon unique

Exemple de code "accordéon simple"

<div class="acadcms-accordion-simple">
  <div class="accordion-head">
    <button class="accordion"></button>          
    Titre
  </div>
  <div class="accordion-body">
    ...
  </div>
</div>

Accordéon multiple

Exemple de code "accordéon multiple"

<div class="acadcms-accordion-multiple">
  <div class="accordion-level-1">
    <div class="accordion-head-level-1">
      <button class="accordion-level-1"></button>          
      Titre
    </div>
    <div class="accordion-body-level-1">
      ...
    </div>
  </div>
</div>

Alertes (notifications)

Exemple de code "message"

<div class="message is-info" role="contentinfo" aria-label="Information">
  <div class="message-body">
    <div class="message-icon"></div>
    <div class="message-content">
      
      Info message: ...           
      <p>...</p>
    </div>
  </div>

Pour laisser à l'usager le soin de fermer la notification, il faut ajouter la classe ".notification" et ajouter le bouton (ce dernier n'apparaîtra pas si la précèdente classe n'est pas ajoutée):

Exemple de code "notification" (peut être fermée)

<div class="message notification is-info" role="contentinfo" aria-label="Information">
  <div class="message-body">
    <div class="message-icon"></div>
    <div class="message-content">
      <button class="delete"></button>
      <div class="message-text">
        Info message: "message is-info". 
        <p>...</p>
      </div>
    </div>
  </div>
</div>

À noter que le script de fermeture ne prévoit pas de cookie ou d'autres systèmes d'enregistrement (ce script devra être ajouté selon le type de projet).

Bannières (hero)

Les sections bannières prennent toute la large disponible du "container" de la page.

La classe ".is-small" permet de les compacter.

Code "Bannières"

<section class="hero">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>
<section class="hero is-ghost">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>
<section class="hero is-info">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>
<section class="hero is-success">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>
<section class="hero is-warning">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>
<section class="hero is-danger">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>
<section class="hero is-gold">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>
<section class="hero is-grey">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>
<section class="hero is-pink">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>
<section class="hero is-violet">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>
<section class="hero is-white">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>
<section class="hero is-black">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>
<section class="hero is-light">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>
<section class="hero is-dark">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>
<section class="hero is-main">
  <div class="hero-body">
    <div class="container">
      Lorem ipsum...
  </div>
</section>

Couleur primaire et variable du thème : Lorem ipsum...

.is-ghost (surcharge, aucune couleur) : Lorem ipsum...

.is-info (ou .is-blue) : Lorem ipsum...

.is-success (ou .is-green) : Lorem ipsum...

.is-warning (ou .is-orange) : Lorem ipsum...

.is-danger (ou .is-red) : Lorem ipsum...

.is-gold : Lorem ipsum...

.is-grey : Lorem ipsum...

.is-pink : Lorem ipsum...

.is-violet (ou .is-main) : Lorem ipsum...

.is-white (ne change pas en mode sombre): Lorem ipsum...

.is-black (ne change pas en mode sombre) : Lorem ipsum...

.is-light (ne change pas en mode sombre) : Lorem ipsum...

.is-dark (ne change pas en mode sombre) : Lorem ipsum...

.is-main (couleur sombre principale de , ne change pas en mode sombre) : Lorem ipsum...

Boutons

À noter que le bouton "couleur primaire" (.is-primary) est variable et prend la valeur définie dans l'administration du thème.

Exemple de code "Boutons"

<div class="buttons">
  <button class="button is-primary">Primary</button>
  <button class="button is-link">Link</button>
  <button class="button is-info">Info</button>
  <button class="button is-success">Success</button>
  <button class="button is-warning">Warning</button>
  <button class="button is-danger">Danger</button>
</div>
<div class="buttons">
  <button class="button is-white">Blanc</button>
  <button class="button is-light">Clair</button>
  <button class="button is-ghost">Ghost</button>
  <button class="button is-black">Noir</button>
  <button class="button is-dark">Sombre</button>
  <button class="button is-text">Texte</button>
</div>
<div class="buttons">
  <button class="button is-blue">Bleu</button>
  <button class="button is-main">Main</button>
  <button class="button is-gold">Or</button>
  <button class="button is-orange">Orange</button>
  <button class="button is-pink">Rose</button>
  <button class="button is-green">Vert</button>
  <button class="button is-violet">Violet</button>
</div>

Cartes verticales avec image

Utilisables en ajoutant la classe "cards" à la classe "columns" (prend alors la propriété de ".is-multiline", c'est-à-dire ajustable selon l'écran).
La hauteur s'adapte automatiquement.

Si la classe ".card-link" est présente, la carte devient cliquable en prenant le premier lien présent.

Exemple de code "Cartes avec une image"

<div class="columns cards">
  <div class="column is-12-mobile is-6-tablet is-3-desktop">
    <div class="card card-link">
      <div class="card-image">
        <figure class="image">
          <img src="https://dummyimage.com/290x150/cccccc/000000" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">
        <div class="media">
          <div class="media-content">
            <p class="title is-4"><a href="https://acadcms.web.ac-grenoble.fr/">Version 3.2</a></p>
            <time datetime="2023">2023, janvier</time>
          </div>
        </div>
        <div class="content">
          ...
        </div>
        <div class="card-arrow"></div>
      </div>
    </div>
  </div>
  ...
</div>

Version 3.2

2023, janvier

Nouveau thème,
compatible v3 :

Accessibilité améliorée
Charte d'État respectée²
Mode sombre
Composants redesignés

Version 3

2020

Basée sur Drupal 8 et Bulma, la v3 propose une meilleure accessibilité, un design plus flexible et une mise en page via l'éditeur Gutenberg.

Version 2

2018-2022

Basée sur Drupal 8 et Bootstrap, la v2 devient une distribution de sites Web indépendants.

Version 1

2016-2020

Basée sur Drupal 7 et Bootstrap, la v1 est une usine à sites Web, créée par l'Académie de Grenoble.

Cartes sans image (tuiles surlignées)

Utilisables en ajoutant la classe "cards-tile" (ou une classe avec une couleur enregistrée comme "cards-tile-pink") à la classe "columns". Ces cartes se différencient par un bord coloré en bas du composant.

Il est possible de surcharger une tuile individuellement, en ajoutant par exemple la classe "card-tile-orange" à la classe "card".

Exemple de code "Tuiles surlignées"

<div class="columns cards-tile">
  <div class="column is-12-mobile is-6-tablet is-3-desktop">
    <div class="card">
      <div class="card-content">
        <div class="media">
          <div class="media-content">
            <p class="title is-4">Titre ...</p>
          </div>
        </div>
      <div class="content">
        ...
      </div>
    </div>
  </div>                  
  ...
</div>

.card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.card

.card.card-tile-orange

Étiquettes (Tags)

Élément servant à donner une indication secondaire. À noter que le tag "couleur primaire" (.is-primary) est variable et prend la valeur définie dans l'administration du thème.

Exemple de code "Tags"

<span class="tag">Par défaut</span>
<span class="tag is-primary">Primaire</span>
<span class="tag is-link"><a href="#">Lien</a></span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Succès</span>
<span class="tag is-warning">Attention</span>
<span class="tag is-danger">Danger</span>
<span class="tag is-new">Nouveau !</span>
<span class="tag is-white">Blanc</span>
<span class="tag is-light">Clair</span>
<span class="tag is-black">Noir</span>
<span class="tag is-gold">Or</span>
<span class="tag is-orange">Orange</span>
<span class="tag is-main">Principal</span>
<span class="tag is-pink">Rose</span>
<span class="tag is-red">Rouge</span>
<span class="tag is-dark">Sombre</span>
<span class="tag is-green">Vert</span>
<span class="tag is-violet">Violet</span>

Par défaut Primaire Lien Info Succès Attention Danger Nouveau ! - Blanc Clair Noir Or Orange Principal Rose Rouge Sombre Vert Violet

Listes

Code "Listes"

<ul class="liste-simple">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
<ul class="liste-liens mt-3">
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
</ul>
<ul class="liste-liens-dates mt-3">
  <li>
    <a>
      <time datetime="2023-01-01">01-01-2023</time>  
      <span>Item</span>
    </a>
  </li>
  <li>
    <a>
      <time datetime="2023-01-01">01-01-2023</time>  
      <span>Item</span>
    </a>
  </li>
  <li>
    <a>
      <time datetime="2023-01-01">01-01-2023</time>  
      <span>Item</span>
    </a>
  </li>
</ul>

Item
Item
Item

14-02-2024 Item
14-02-2024 Item
14-02-2024 Item

Mises en avant (callout)

Le contenu de ce composant est obligatoire, le titre (h2 à h6) est facultatif.

Exemple de code "mise en avant"

<div class="fr-callout">
  <h4 class="fr-callout__title">Titre...</h4>
  <p class="fr-callout__text">
    ...
  </p>
</div>

Titre mise en avant

.fr-callout

.fr-callout + .has-icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non ligula vel purus imperdiet porta scelerisque in turpis. Nunc eu ullamcorper nisi. Suspendisse ultricies dui varius, consectetur lectus vitae, malesuada odio. Donec mollis leo a nunc vestibulum lobortis. Aenean et nisl vehicula, tincidunt tellus euismod, egestas nibh. Vivamus pulvinar nibh non ultrices commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus libero et lacus commodo pulvinar. Quisque ultrices semper vestibulum.

Titre mise en avant

.fr-callout-info

Titre mise en avant

.fr-callout-info + .has-icon

Titre mise en avant

.fr-callout-success (ou, .fr-callout-advice)

Titre mise en avant

.fr-callout-success (ou, .fr-callout-advice) + .has-icon

Titre mise en avant

.fr-callout-warning

Titre mise en avant

.fr-callout-warning + .has-icon

Titre mise en avant

.fr-callout-pink

Titre mise en avant

.fr-callout-pink + .has-icon

Titre mise en avant

.fr-callout-danger

Titre mise en avant

.fr-callout-danger + .has-icon

Mises en exergue (highlight)

Ce composant n'a pas de titre.

Exemple de code "Mise en exergue"

<div class="fr-highlight">
  <p>Texte...</p>
</div>

.fr-highlight

+ .fr-highlight-blue-cumulus

+ .fr-highlight-green-bourgeon

+ .fr-highlight-orange-terre-battue

+ .fr-highlight-pink-macaron

+ .fr-highlight-red-marianne

Intertitres

Il est possible de mettre un style globalement ou individuellement sur les Intertitres (exemple : h2) :

Le style global ne fonctionne que s'il n'est pas surchargé par un éditeur de texte comme Gutenberg par exemple.

Cette instance d' contient les paramètres de thème "global" :

.logo-font-default
.h1-font-default
.h1-style-none
.h2-position-left
.h2-font-default
.h2-style-none
.h3-font-default
.h3-position-left
.h3-style-none

Titre H2 (global)

Titre H3 (global)

Titre H2 (surchagé ".title-style-square")

Titre H3 (surchargé ".title-style-line-green")

Titre H3 (surchargé ".title-style-fluo-orange")

Titre H3 (surchagé ".title-style-vertical")

Titre H3 (surchagé ".title-style-line-up-pink")

Titre H3 (surchargé ".title-position-right")

Héritage AcadCMS 3.1

La documentation AcadCMS version 3.1 vous indiquera les composants disponibles.

Simple icône

.icone-ok

.icone-erreur

.icone-ampoule

Liste d'icônes (.liste-pointeurs)

Adresse
Adresse
Adresse
Adresse

Liste alternée

La liste est désormais compatible en dark mode.

.liste-alternee
.liste-alternee-inversee

Héritage Bulma

se repose sur le moteur graphique Bulma.

À noter que les éléments 3.2 et 3.1 sont des "surcharges" de Bulma (c'est-à-dire qu'ils prennent le dessus), notamment pour le mode sombre, les boutons ou les cartes par exemple.

Exemple d'une notification "basique" de Bulma :

Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.