epfl-elements 1.0.1 → 4.0.0

package/dist/components/pages/research/research.twig

@@ -0,0 +1,83 @@
+{% extends "@templates/base/base.twig" %}
+
+{% block content %}
+
+<div class="container-full">
+  {% include '@organisms/hero/hero.twig' with {
+    title: 'Research',
+    cover_path: 'images/styleguide/cover/cover01_',
+    content: ''
+  } %}
+</div>
+
+<div class="container">
+  <div class="my-4">
+    <p>
+      L'EPFL s'engage dans des projets novateurs alliant recherche fondamentale et recherche appliquée. Cette orientation permet de transformer l'excellence scientifique en compétitivité économique, en emplois et en qualité de vie, grâce au transfert des technologies.</p>
+      <p>L'Ecole dispose d'une organisation unique pour stimuler les recherches transdisciplinaires et favoriser les partenariats avec d'autres institutions.</p>
+      <p>Avec plus de 300 laboratoires et groupes de recherche sur son campus, l'EPFL figure parmi les institutions les plus innovantes et les plus productives sur le plan scientifique.</p>
+    </p>
+  </div>
+</div>
+
+<div class="container-full bg-gray-100 py-5 mt-5">
+  <div class="container">
+    <h2 class="mb-4 mt-4">Key numbers</h2>
+  </div>
+  {% include '@organisms/key-number-group/key-number-group.twig' %}
+</div>
+
+<div class="container-full bg-gray-100 py-5 mb-5">
+  <div class="container">
+    <h2 class="mb-4">The last news</h2>
+    <div class="row">
+      {% for i in 1..2 %}
+        <div class="col-md-6">
+          {% include '@content-types/news/news-basic-teaser.twig' %}
+        </div>
+      {% endfor %}
+    </div>
+    <p class="text-center">
+      <a href="#">See all news</a>
+    </p>
+  </div>
+</div>
+
+<div class="container-full py-5 mb-5 mt-6">
+  <div class="container">
+    <h2 class="mb-4">Explore</h2>
+    <div class="row">
+      {% for i in 1..3 %}
+        <div class="col-md-4">
+          {% include '@content-types/basic-page/basic-page.twig' %}
+        </div>
+      {% endfor %}
+    </div>
+    </p>
+  </div>
+  <div class="container">
+    <h2 class="mb-4">Engage</h2>
+    <div class="row">
+      {% for i in 1..4 %}
+        <div class="col-md-6">
+          {% include '@content-types/basic-page/basic-page.twig' %}
+        </div>
+      {% endfor %}
+    </div>
+    </p>
+  </div>
+</div>
+
+<div class="container">
+  <div class="mb-4">
+    <div class="row">
+      <div class="col-md-6">
+        {% include '@organisms/contact/contact.twig' %}
+      </div>
+      <div class="col-md-6">
+        {% include '@content-types/basic-page/basic-page.twig' %}
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}

package/dist/components/pages/research/research.yml

@@ -0,0 +1,2 @@
+title: Research
+name: research

package/dist/components/pages/study-plan/study-plan.twig

@@ -0,0 +1,97 @@
+
+{% extends "@templates/base/base.twig" %}
+
+{% block header %}
+<header role="banner" class="header header-light">
+  <div class="header-light-content">
+    <a class="logo" href="https://www.epfl.ch">
+      <img src="svg/epfl-logo.svg" alt="Logo EPFL, École polytechnique fédérale de Lausanne" class="img-fluid">
+    </a>
+    <p class="site-title">
+      <a href="#">Plan d'études</a>
+    </p>
+    {% include '@molecules/search/search-mobile.twig' %}
+    {% include '@molecules/search/search.twig' %}
+    {% include '@atoms/nav-lang/nav-lang-short.twig' %}
+    {% include '@atoms/nav-toggle-mobile/nav-toggle-mobile.twig' %}
+  </div>
+</header>
+{% endblock %}
+
+{% block breadcrumb %}
+<div class="breadcrumb-container">
+  <nav aria-label="breadcrumb" class="breadcrumb-wrapper">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item">
+        <a href="#">
+          {% include '@atoms/icon/icon.twig' with { icon: 'icon-home' } %}
+        </a>
+      </li>
+      <li class="breadcrumb-item"><a href="#">Éducation</a></li>
+      <li class="breadcrumb-item"><a href="#">Plans d'études</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Cycle Bachelor</li>
+    </ol>
+  </nav>
+</div>
+{% endblock %}
+
+{% block sideNav %}
+
+<nav id="nav-aside" class="nav-aside" role="navigation" aria-describedby="nav-aside-title">
+  <h2 class="h5 sr-only-xl">Dans la même section</h2>
+  <ul>
+    <li class="active">
+      <a href="#">Bachelor <span class="sr-only">(page courante)</span></a>
+      <ul>
+        <li><a href="#">Architecture</a></li>
+        <li><a href="#">Chimie</a></li>
+        <li><a href="#">Chimie et génie chimique</a></li>
+        <li><a href="#">Génie électrique et électronique</a></li>
+        <li><a href="#">Génie civil</a></li>
+        <li><a href="#">Génie mécanique</a></li>
+        <li><a href="#">Informatique</a></li>
+        <li><a href="#">Mathématiques</a></li>
+        <li><a href="#">Microtechnique</a></li>
+        <li><a href="#">Science et génie des matériaux</a></li>
+        <li><a href="#">Physique</a></li>
+        <li><a href="#">Systèmes de communication</a></li>
+        <li><a href="#">Programme Sciences humaines et sociales</a></li>
+        <li><a href="#">Sciences et ingénierie de l'environnement</a></li>
+        <li><a href="#">Ingénierie des sciences du vivant</a></li>
+        <li><a href="#">Projeter ensemble ENAC</a></li>
+        <li><a href="#">Génie chimique</a></li>
+      </ul>
+    </li>
+    <li><a href="#">Propédeutique</a></li>
+    <li><a href="#">Master</a></li>
+    <li><a href="#">Mineur</a></li>
+    <li><a href="#">École doctorale</a></li>
+  </ul>
+</nav>
+
+{% endblock %}
+
+{% block content %}
+
+<div class="container-full px-5 px-xxl-6 mt-5">
+  <header class="page-header d-xl-flex justify-content-xl-between align-items-xl-center mb-5">
+    <h1 class="mb-4 mb-xl-0">Plan d'études – Cycle Bachelor</h1>
+    <button class="btn btn-sm btn-secondary">
+    {% include '@atoms/icon/icon.twig' with { icon: 'download', icon_classes:'feather' } %}
+    Télécharger le plan d'étude (PDF)
+  </button>
+  </header>
+  {% include '@content-types/study-plan/study-plan-bachelor.twig' %}
+</div>
+
+{% endblock %}
+
+{% block footer_container %}
+<div class="bg-gray-100 pt-5">
+  <div class="container">
+    {% block footer %}
+      {% include '@organisms/footer/footer-light.twig' %}
+    {% endblock %}
+  </div>
+</div>
+{% endblock %}

package/dist/components/pages/study-plan/study-plan.yml

@@ -0,0 +1,2 @@
+name: study-plan
+title: Study Plan

package/dist/components/pages/study-plan-course/study-plan-course.twig

@@ -0,0 +1,166 @@
+{% set isSpecial = true %}
+
+{% extends "@templates/base/base.twig" %}
+
+{% block header %}
+<header role="banner" class="header header-light">
+  <div class="header-light-content">
+    <a class="logo" href="#">
+      <img src="svg/epfl-logo.svg" alt="Logo EPFL, École polytechnique fédérale de Lausanne" class="img-fluid">
+    </a>
+    <p class="site-title">
+      <a href="#">Plan d'études</a>
+    </p>
+    {% include '@molecules/search/search-mobile.twig' %}
+    {% include '@molecules/search/search.twig' %}
+    {% include '@atoms/nav-lang/nav-lang-short.twig' %}
+    {% include '@atoms/nav-toggle-mobile/nav-toggle-mobile.twig' %}
+  </div>
+</header>
+{% endblock %}
+
+{% block breadcrumb %}
+<div class="breadcrumb-container">
+  <nav aria-label="breadcrumb" class="breadcrumb-wrapper">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item">
+        <a href="#">
+          {% include '@atoms/icon/icon.twig' with { icon: 'icon-home' } %}
+        </a>
+      </li>
+      <li class="breadcrumb-item"><a href="#">Éducation</a></li>
+      <li class="breadcrumb-item"><a href="#">Plans d'études</a></li>
+      <li class="breadcrumb-item"><a href="#">Cycle Bachelor</a></li>
+      <li class="breadcrumb-item"><a href="#">Architecture</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Art et architecture</li>
+    </ol>
+  </nav>
+</div>
+{% endblock %}
+
+{% block content %}
+
+<div class="container mt-5">
+  <header class="page-header d-xl-flex justify-content-xl-between align-items-xl-center mb-5">
+    <h1 class="mb-4 mb-xl-0">Art et architecture</h1>
+    <button class="btn btn-sm btn-secondary">
+    {% include '@atoms/icon/icon.twig' with { icon: 'download', icon_classes:'feather' } %}
+    Télécharger la fiche de cours (PDF)
+  </button>
+  </header>
+  <div class="alert-container mb-4">
+    {% include "@atoms/alert/alert.twig" with {
+      type: "info",
+      content: "Attention, ce contenu correspond à la fiche de cours de l'année passée."
+    } %}
+  </div>
+  <div class="row">
+    <div class="course-details col-xl-7">
+      <div class="course-summary mb-5">
+        <p>AR-153 / <strong>10 crédits</strong></p>
+        <p><strong>Enseignant‧es:</strong> <a href="#">Gargiani Roberto</a>, Profs divers</p>
+        <p><strong>Langue(s):</strong> Français</p>
+        <p><strong>Retrait:</strong> Il n’est pas autorisé de se retirer de cette matière après le délai d’inscription.</p>
+        <p><strong>Remarques:</strong> Inscription faite par la section.</p>
+      </div>
+      <hr>
+      <div class="mt-5">
+        <h2 class="h5">Résumé</h2>
+        <p>Le cours vise à approfondir les principales questions liées aux processus créatifs, aux matériaux et aux technologies expérimentés par les artistes et les architectes depuis les années soixante jusqu’à aujourd’hui.</p>
+      </div>
+      <div class="mt-5">
+        <h2 class="h5">Contenu du cours</h2>
+        <div class="collapse collapse-partial" id="course-content" aria-expanded="false">
+          <p>Les expériences des ateliers, des chantiers et des laboratoires d'art et d'architecture seront analysées afin de mettre en évidence l'impact des nouvelles technologies audiovisuelles, la nature des matériaux et des idées, les figures et les espaces qui se cristallisent en eux et grâce à eux. La connaissance de la concrétisation physique des oeuvres permettra à  l'étudiant d'identifier les trajectoires créatives suivies par les artistes et les relations avec les expériences menées par les architectes.</p>
+          <p>Pendant le cours, l'on considérera des sujets tels que:</p>
+          <ul class="list-bullet">
+            <li>Vers une architecture pop. Des recherches pop de l'independant Group à l'architecture de la consommation de Smithsons et Banham</li>
+            <li>ARTIGRAM. L'oeuvre d'Archigram entre le plasticisme New Bowellism et l'esthétique pop de la société de la consommation</li>
+            <li>Sous les pavés la plage. De l'espace d'engagement de Leonardo Savioli aux performances militantes des étudiants florentins</li>
+            <li>Le Centre Pompidou comme oeuvre d'art totale. Expériences pop, op, cinétiques et audiovisuelles dans le projet de Piano+Rogers Architects.</li>
+            <li>Constructions, figures archaïques et arte povera, de Hooks à André, Pistoletto, Boetti, Zorio, Anselmo, Penone, Takamatsu, Oiticica, jusqu'à la construction économique des bâtiments.</li>
+            <li>Formes du Land Art, de De Maria à Smithson, Heizer, Oppenheim, Aycock, Turrell, à l'architecture radicale.</li>
+          </ul>
+        </div>
+        <button
+          class="collapsed btn btn-light btn-block btn-sm mt-3"
+          data-toggle="collapse"
+          data-target="#course-content"
+          aria-hidden="true"
+          aria-controls="course-content"
+        >
+          Lire la suite
+          {% include '@atoms/icon/icon.twig' with {icon: 'icon-triangle'} %}
+        </button>
+      </div>
+      <div class="mt-5">
+        <h2 class="h5">Mots-clés</h2>
+        <p>Architecture, Arts, Matériel, Immatériel, Contemporain</p>
+      </div>
+      <div class="mt-5">
+        <h2 class="h5">Acquis de formation </h2>
+        <p>A la fin de ce cours l’étudiant doit être capable de:</p>
+        <ul class="list-bullet">
+          <li>Interpréter de façon critique les processus créatifs communs à l’art et à l’architecture de la seconde moitié du Novecento jusqu’à aujourd’hui</li>
+          <li>Evaluer les différents aspects qui caractérisent les formes artistiques analysées</li>
+          <li>Reconnaitre le contexte culturel de la période historique concernée</li>
+        </ul>
+      </div>
+      <div class="mt-5">
+        <h2 class="h5">Méthode d’enseignement</h2>
+        <p>Cours ex-cathedra, séminaires</p>
+      </div>
+      <div class="mt-5">
+        <h2 class="h5">Méthode d’évaluation</h2>
+        <p>L’examen consiste en une épreuve orale pour vérifier les connaissances acquises par l’étudiant durant les cours et par l’étude de la bibliographie obligatoire. Les conditions sine qua non pour réussir l’examen sont que l’étudiant démontre qu’il a étudié parfaitement la bibliographie et qu’il a acquis une connaissance critique des thèmes abordés dans les cours.</p>
+      </div>
+      <div class="mt-5">
+        <h2 class="h5">Ressources</h2>
+        <h3 class="h6">Ressources en bibliothèque:</h3>
+        <ul class="list-bullet">
+          <li><a href="#">Superarchitecture / Rouillard</a></li>
+          <li><a href="#">The Art-architecture Complex / Foster</a></li>
+          <li><a href="#">Art since 1900 / Foster</a></li>
+        </ul>
+        <h3 class="h6">Sites web:</h3>
+        <ul class="list-bullet">
+          <li><a href="#">https://epfl.zoom.us/…</a></li>
+        </ul>
+        <h3 class="h6">Liens Moodle:</h3>
+        <ul class="list-bullet">
+          <li><a href="#">https://moodle.epfl.ch/course/view.php?id=xxxxx</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="course-infos col-xl-4 offset-xl-1 mt-5 mt-lg-0">
+      <div class="study-plans">
+        <h2 class="h5">Dans les plans d'études</h2>
+
+        {% include '@content-types/coursebook/coursebook-program.twig' %}
+
+      </div>
+
+      <div class="course-schedule mt-5">
+        <h2 class="h5">Semaine de référence</h2>
+
+        {% include '@content-types/coursebook/coursebook.twig' %}
+
+      </div>
+
+    </div>
+
+  </div>
+</div>
+
+{% endblock %}
+
+{% block footer_container %}
+<div class="bg-gray-100 pt-5">
+  <div class="container">
+    {% block footer %}
+      {% include '@organisms/footer/footer-light.twig' %}
+    {% endblock %}
+  </div>
+</div>
+{% endblock %}

package/dist/components/pages/study-plan-course/study-plan-course.yml

@@ -0,0 +1,2 @@
+name: study-plan-course
+title: Study Plan – Course

package/dist/components/templates/base/base.twig

@@ -0,0 +1,56 @@
+<div class="site">
+{% include '@molecules/access-nav/access-nav.twig' %}
+
+{% block fullintro %}{% endblock %}
+
+{% block header %}
+  {% include '@organisms/header/header.twig' %}
+{% endblock %}
+
+<div class="main-container">
+  {% block breadcrumb %}
+    {% if not isSpecial %}
+    <div class="breadcrumb-container">
+      <div>{% include '@atoms/nav-toggle/nav-toggle.twig' %}</div>
+      {% include '@molecules/breadcrumb/breadcrumb-tagged.twig' %}
+    </div>
+    {% endif %}
+  {% endblock %}
+
+  <div{% if not isSpecial %} class="nav-toggle-layout nav-aside-layout"{% endif %}>
+
+    {% block nav %}
+      {% include '@organisms/nav-main/nav-main.twig' %}
+    {% endblock %}
+
+    <div class="w-100 pb-5">
+
+      {% block main %}
+        <main id="main" role="main" class="content {% block grid %}container-grid{% endblock %}">
+          {% block content %}{% endblock %}
+        </main>
+      {% endblock %}
+
+    </div>
+
+    {% if not isSpecial %}
+    <aside class="nav-aside-wrapper">
+      {% block sideNav %}
+        {% include '@organisms/nav-aside/nav-aside.twig' %}
+      {% endblock %}
+    </aside>
+    {% endif %}
+  </div>
+
+  {% block footer_container %}
+  <div class="bg-gray-100 pt-5">
+    <div class="container">
+      {% block footer %}
+        {% include '@organisms/footer/footer-dark.twig' %}
+      {% endblock %}
+    </div>
+  </div>
+  {% endblock %}
+  </div>
+</div>
+</div>

package/dist/components/templates/base/base.yml

@@ -0,0 +1,2 @@
+title: Base
+name: base