epfl-elements 1.0.0 → 4.0.0

package/dist/docs/design/typography.html

@@ -0,0 +1,225 @@
+<div class="container">
+  <h1 class="my-2">Typography</h1>
+
+  <p class="mt-5">
+    Element use the <strong>Suisse Int'l</strong> (see <a href="https://www.epfl.ch/campus/services/communication/wp-content/uploads/2019/03/EPFL-brand-guidelines.pdf">Brand Guidelines</a>), has nine weights and is suitable for all uses, from titles to legends. If you do not have access or wish to use an authorized alternative, you must use Arial. On office materials, Arial is used exclusively, because it is available as a system font on all computers, making it easy to share editable documents.
+  </p>
+
+  <div class="row my-5">
+    <div class="col-lg-6">
+      <p><strong>Paragraph</strong> <small>— <strong>18px</strong> (1.125rem) / line-height 1.5</small></p>
+      <p>
+        The ship landed in a medley of noises. There was the far-off hiss of the atmosphere cutting and sliding past the metal of the ship. There was the steady drone of the conditioners fighting the heat of friction, and the slower rumble of the engines enforcing deceleration. There was the human sound of men and women gathering in the debarkation rooms and the grind of the hoists lifting baggage, mail, and freight to the long axis of the ship, from which they would be later moved along to the unloading platform.
+      </p>
+
+      <p><strong>Lead</strong> <small>— <strong>22px</strong> (1.375rem) / line-height 1.5</small></p>
+      <p class="lead">
+        Gaal felt the slight jar that indicated the ship no longer had an independent motion of its own.
+      </p>
+    </div>
+    <div class="col-lg-6">
+      <p><strong>Quotes</strong> <small>— <strong>24px</strong> (1.5rem) / line-height 1.3</small></p>
+
+      <small>.blockquote</small>
+
+      <blockquote class="blockquote mt-3">
+        <p class="mb-0">Reality is that which, when you stop believing in it, doesn't go away.</p>
+        <footer class="blockquote-footer"><cite title="Philip K. Dick">Philip K. Dick</cite>, in “I Hope I Shall Arrive Soon”, 1985</footer>
+      </blockquote>
+
+      <small>.blockquote.blockquote-fr</small>
+
+      <blockquote class="blockquote blockquote-fr mt-3">
+        <p class="mb-0">La réalité, c'est ce qui continue d'exister lorsqu'on a cessé d'y croire.</p>
+        <footer class="blockquote-footer"><cite title="Philip K. Dick">Philip K. Dick</cite>, dans “Le Souvenir qui venait du froid”, 1985</footer>
+      </blockquote>
+
+      <p class="mt-5"><strong>Image caption</strong> <small>— 0.883rem / line-height 1.266</small></p>
+      <figcaption class="figure-caption">A caption for the above image.</figcaption>
+    </div>
+  </div>
+
+  <div class="row my-5">
+    <div class="col-lg-6">
+      <p><strong>Titles</strong></p>
+
+      <small>h1 — <strong>48px</strong> (3rem) / line-height 1.1</small>
+      <h1 class="mb-5">The Story of Typewriters</h1>
+
+      <small>h2 — <strong>38px</strong> (2.375rem) / line-height 1.2</small>
+      <h2 class="mb-5">In the Country of the Last Things</h2>
+
+      <small>h3 — <strong>30px</strong> (1.875rem) / line-height 1.35</small>
+      <h3 class="mb-5">Standardizing perovskite aging measurements</h3>
+
+      <small>h4 — <strong>24px</strong> (1.5rem) / line-height 1.35</small>
+      <h4 class="mb-5">The Swiss Team has won the Solar Decathlon competition</h4>
+
+      <small>h5 — <strong>20px</strong> (1.25rem) / line-height 1.4</small>
+      <h5 class="mb-5">The strength of the Swiss team consists in its multidisciplinary cohesion</h5>
+
+      <small>h6 — <strong>18px</strong> (1.125rem) / line-height 1.5</small>
+      <h6>This project also provided the students with a unique, unforgettable, and inspirational learning opportunity</h6>
+    </div>
+    <div class="col-lg-6">
+      <p><strong>Inline text elements</strong></p>
+
+      <p>You can use the mark tag to <mark>highlight</mark> text.</p>
+      <p><del>This line of text</del> is meant to be treated as deleted text.</p>
+      <p><s>This line of text</s> is meant to be treated as no longer accurate.</p>
+      <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+      <p><u>This line of text will render as underlined</u></p>
+      <p><small>This line of text is meant to be treated as fine print.</small></p>
+      <p><strong>This line rendered as bold text.</strong></p>
+      <p><em>This line rendered as italicized text.</em></p>
+      <p><abbr title="Abbreviation">Abbr</abbr title="attribute"> is a solution to propose extra information about a term</p>
+
+      <p class="mt-5"><strong>Sidenotes</strong></p>
+      <article>
+        <div class="row">
+          <div class="col-sm-7">
+            <p>If you want to know more about this <a href="#topic" aria-describedby="sidenote-label" id="topic-ref">topic</a> or if you want to read additional information in the sidebar, please use the sidenotes.</p>
+          </div>
+          <div class="col-sm-4 ml-auto">
+            <aside>
+              <h2 class="sr-only" id="sidenote-label">Sidenotes</h2>
+              <ol>
+                <li id="topic">Topic: a matter dealt with in a text, discourse, or conversation; a subject.</li>
+              </ol>
+            </aside>
+          </div>
+        </div>
+      </article>
+
+      <p class="mt-5"><strong>Footnotes</strong></p>
+      <article>
+        <p>If you want to know more about this <a href="#topic" aria-describedby="footnote-label" id="topic-ref">topic</a> or if you want to read the full study about this research, please refer to the note at the end of the article.</p>
+
+        <footer>
+          <h2 class="sr-only" id="footnote-label">Footnotes</h2>
+          <ol>
+            <li id="topic">Topic: a matter dealt with in a text, discourse, or conversation; a subject. Synonyms:	subject, subject matter, theme, issue, matter, point, talking point, question, concern, argument, discussion, thesis, text, concept, field, area, keynote, leitmotif. <a href="#topic-ref" class="back-to-content" aria-label="Back to content">&#8617;</a></li>
+          </ol>
+        </footer>
+      </article>
+
+    </div>
+  </div>
+
+  <hr>
+  <p class="mt-5"><strong>Links</strong></p>
+
+  <div class="row">
+    <div class="col-sm-2 pb-1">
+      <small>Unvisited (:link)</small><br>
+      <a class="link-pretty" href="http://bit.ly/2DLIPLo">Teaching & PhD</a>
+    </div>
+    <div class="col-sm-2 pb-1">
+      <small>Visited (:visited)</small><br>
+      <a class="link-pretty" href="#" class="visited">Teaching & PhD</a>
+    </div>
+    <div class="col-sm-2 pb-1">
+      <small>Hover (:hover)</small><br>
+      <a class="link-pretty" href="#" class="hover">Teaching & PhD</a>
+    </div>
+    <div class="col-sm-2 pb-1">
+      <small>Focus (:focus)</small><br>
+      <a class="link-pretty" href="#" class="focus">Teaching & PhD</a>
+    </div>
+    <div class="col-sm-4 pb-1">
+      <small>Active (always + focus) (:active, :focus)</small><br>
+      <a class="link-pretty" href="#" class="active focus">Teaching & PhD</a>
+    </div>
+  </div>
+
+  <div class="row bg-dark mt-3 mb-5">
+    <div class="col-sm-2 py-4">
+      <a class="text-white link-pretty" href="http://bit.ly/2DLIPLo">Teaching & PhD</a>
+    </div>
+    <div class="col-sm-2 py-4">
+      <a class="text-white link-pretty" href="#" class="visited">Teaching & PhD</a>
+    </div>
+    <div class="col-sm-2 py-4">
+      <a class="text-white link-pretty" href="#" class="hover">Teaching & PhD</a>
+    </div>
+    <div class="col-sm-2 py-4">
+      <a class="text-white link-pretty" href="#" class="focus">Teaching & PhD</a>
+    </div>
+    <div class="col-sm-4 py-4">
+      <a class="text-white link-pretty" href="#" class="active focus">Teaching & PhD</a>
+    </div>
+  </div>
+  <hr>
+
+  <p class="mt-5"><strong>Lists</strong></p>
+
+  <div class="row mb-5">
+    <div class="col-sm-6">
+      <small>Bulleted multi-level</small>
+
+      <p class="mt-3">
+        The École polytechnique fédérale de Lausanne (EPFL) is a research institute and university in Lausanne, Switzerland, that specializes in natural sciences and engineering.
+      </p>
+
+      <ul class="list-bullet">
+        <li>History</li>
+        <li>Admission and education</li>
+        <li>Rankings</li>
+        <li>
+          Campus
+          <ul>
+            <li>Buildings</li>
+            <li>Facilities</li>
+            <li>Satellite campuses</li>
+            <li>Language Centre</li>
+          </ul>
+        </li>
+        <li>Students and traditions</li>
+        <li>EPFL Alumni network</li>
+        <li>Scientific partners</li>
+        <li>Organization</li>
+        <li>Notable affiliates</li>
+        <li>Gallery</li>
+        <li>External links</li>
+      </ul>
+      <p>
+        It is one of the two Swiss Federal Institutes of Technology, and it has three main missions: education, research and technology transfer at the highest international level.
+      </p>
+      </p>
+    </div>
+    <div class="col-sm-6">
+      <small>Ordered multi-level</small>
+
+      <p class="mt-3">
+        The École polytechnique fédérale de Lausanne (EPFL) is a research institute and university in Lausanne, Switzerland, that specializes in natural sciences and engineering.
+      </p>
+
+      <ol class="list-numbered">
+        <li>History</li>
+        <li>Admission and education</li>
+        <li>Rankings</li>
+        <li>
+          Campus
+          <ol>
+            <li>Buildings</li>
+            <li>Facilities</li>
+            <li>Satellite campuses</li>
+            <li>Language Centre</li>
+          </ol>
+        </li>
+        <li>Students and traditions</li>
+        <li>EPFL Alumni network</li>
+        <li>Scientific partners</li>
+        <li>Organization</li>
+        <li>Notable affiliates</li>
+        <li>Gallery</li>
+        <li>External links</li>
+      </ol>
+      <p>
+        It is one of the two Swiss Federal Institutes of Technology, and it has three main missions: education, research and technology transfer at the highest international level.
+      </p>
+      </p>
+    </div>
+  </div>
+
+</div>

package/dist/docs/index.html

@@ -0,0 +1,162 @@
+<div class="container text-center mt-5 mb-5">
+  <h1>Elements</h1>
+  <p class="lead">EPFL Web styleguide</p>
+  <hr>
+</div>
+
+<div class="container my-5">
+  <h2>Dive in</h2>
+  <p>
+    The following pages will <b>introduce you to the styleguide</b> and <b>explain how you can use it</b>.
+  </p>
+  <div class="card-deck">
+    <a href="#/doc/design--index.html" class="card link-trapeze-horizontal">
+        <div class="card-body">
+          <picture class="card-img-top">
+            <img src="./images/styleguide/illustrations/design-principles-teaser.png" class="img-fluid" title="Design Principles" alt="3 Geometric shapes that inspired the Design Principles" />
+          </picture>
+            <h3 class="card-title">Design principles</h3>
+          <p class="card-text">Guiding principles for our design decisions</p>
+        </div>
+    </a>
+    <!-- <a href="#/doc/how it works.md" class="card link-trapeze-horizontal">
+      <div class="card-body">
+        <picture class="card-img-top">
+          <img src="./images/styleguide/illustrations/how-it-works-teaser.png" class="img-fluid" title="How Elements work " alt="The shape of an atom to depict our design approach" />
+        </picture>
+        <h3 class="card-title">How it works</h3>
+        <p class="card-text">A tour on how Elements is design and build</p>
+      </div>
+    </a> -->
+    <a href="#/doc/user%20documentation--index.md" class="card link-trapeze-horizontal">
+      <div class="card-body">
+        <picture class="card-img-top">
+          <img src="./images/styleguide/illustrations/how-to-start-teaser.png" class="img-fluid" title="Start using Elements" alt="Read to play with Elements?" />
+        </picture>
+        <h3 class="card-title">How to start</h3>
+        <p class="card-text">A step-by-step guide to start using Elements</p>
+      </div>
+    </a>
+  </div>
+</div>
+
+<div class="container my-5">
+  <h2>Visual design</h2>
+  <p>
+    Elements is about <b>digital communication and design</b>. Here is visual guidance for our styleguide.
+  </p>
+  <div class="card-deck">
+    <a href="https://go.epfl.ch/identity" class="card link-trapeze-horizontal">
+      <div class="card-body">
+        <picture class="card-img-top">
+          <img src="./images/styleguide/illustrations/brand-identity-teaser.png" class="img-fluid" title="Brand Identity" alt="EPFL corporate branding is at the heart of the styleguide" />
+        </picture>
+        <h3 class="card-title">Brand Identity</h3>
+        <p class="card-text">EPFL logo, brand guidelines and how to use them</p>
+      </div>
+    </a>
+    <a href="#/doc/design--typography.html" class="card link-trapeze-horizontal">
+      <div class="card-body">
+        <picture class="card-img-top">
+          <img src="./images/styleguide/illustrations/typography-teaser.png" class="img-fluid" title="Typography" alt="Text is 95% of what we see online: use typography properly, please!" />
+        </picture>
+        <h3 class="card-title">Typography</h3>
+        <p class="card-text">Everything you need to know about setting up text</p>
+      </div>
+    </a>
+    <a href="#/atoms/icon" class="card link-trapeze-horizontal">
+      <div class="card-body">
+        <picture class="card-img-top">
+          <img src="./images/styleguide/illustrations/iconography-teaser.png" class="img-fluid" title="Iconography" alt="Icons and pictograms: symbols that give meaning to certain actions" />
+        </picture>
+        <h3 class="card-title">Iconography</h3>
+        <p class="card-text">On the usage of icons and the available pictograms</p>
+      </div>
+    </a>
+    <a href="#/colors" class="card link-trapeze-horizontal">
+      <div class="card-body">
+
+        <h3 class="h3 card-title text-arrow mb-0"><img src="./images/styleguide/illustrations/color-palette-teaser.png" class="icon" title="Color palette" alt="Preview of EPFL color palette: 8 colors" />&nbsp;Color palette</h3>
+      </div>
+    </a>
+  </div>
+</div>
+
+<div class="container-grid my-5">
+  <h2>
+    <svg class="icon" aria-hidden="true" style="color:#A80E17;"><use xlink:href="#icon-accessibility"></use></svg> Accessibility
+  </h2>
+  <p>
+    Please read about the <strong>required accessibility recommendations</strong>.
+  </p>
+  <div>
+    <a href="#/doc/accessibility.html" class="card link-trapeze-horizontal">
+      <div class="card-body">
+        <picture class="card-img-top">
+          <img src="./images/styleguide/illustrations/accessibility-teaser.png" class="img-fluid" title="Logo of the Accessibility initiative" alt="A human silhouette with open arms" />
+        </picture>
+        <h3 class="card-title">Global Accessibility recommendations</h3>
+        <p class="card-text">Information and rules to follow regarding accessibility (a11y)</p>
+      </div>
+    </a>
+  </div>
+</div>
+
+<div class="container-grid my-5">
+  <h2>Reports</h2>
+  <p>
+    Set the necessary scripts to <b>analyse the audience's activity</b> on your site.
+  </p>
+  <div>
+    <a href="#/doc/user%20documentation--reports.md" class="card link-trapeze-horizontal">
+      <div class="card-body">
+        <h3 class="card-title text-arrow">Site Analytics</h3>
+        <p class="card-text">Information and howto to start generating reports</p>
+      </div>
+    </a>
+  </div>
+</div>
+
+<div class="container-grid my-5">
+    <h2>&#128188; Legal obligation</h2>
+    <p>
+      Legal obligations on your site
+    </p>
+    <div>
+      <a href="#/organisms/cookie-consent" class="card link-trapeze-horizontal">
+        <div class="card-body">
+          <h3 class="card-title">Cookie consent &#127850;</h3>
+          <p class="card-text">By using the styleguide, your website complies with the European cookie law by informing users that your site has cookies.</p>
+        </div>
+      </a>
+    </div>
+  </div>
+
+<div class="container-grid my-5">
+  <h2>Contribute</h2>
+  <p>
+    Elements is Open Source. Help us <b>make the project better</b>:
+  </p>
+  <div>
+    <a href="#/doc/contribute--index.md" class="card link-trapeze-horizontal">
+      <div class="card-body">
+        <h3 class="card-title">Contribution 🤝</h3>
+        <p class="card-text">Guidelines for contributing to Elements (design + code + documentation)</p>
+      </div>
+    </a>
+  </div>
+</div>
+
+<div class="container-grid my-5">
+  <h2>Feedback and support</h2>
+  <p>
+    A dedicated page to help you with <b>new requests</b>:
+  </p>
+  <div>
+    <a href="#/doc/contribute--support-and-request.html" class="card link-trapeze-horizontal">
+      <div class="card-body">
+        <h3 class="h3 card-title text-arrow mb-0">Support and requests ☝️</h3>
+      </div>
+    </a>
+  </div>
+</div>

package/dist/docs/summary.yml

@@ -0,0 +1,15 @@
+- index.html
+- accessibility.html
+- design:
+  - index.html
+  - typography.html
+  - iconography.md
+  - helpers.html
+- user documentation:
+  - index.md
+  - create a page.md
+  - wordpress.md
+  - reports.md
+- contribute:
+  - index.md
+  - support-and-request.html

package/dist/docs/user documentation/create a page.md

@@ -0,0 +1,41 @@
+# Create a page
+
+## Bootstrap based
+
+Elements is entirely **based on the [Bootstrap 4](https://getbootstrap.com/) framework**. It means that when you have to build a page, you can use all the **[grid](https://getbootstrap.com/docs/4.1/layout/grid/)** and **[spacing](https://getbootstrap.com/docs/4.1/utilities/spacing/) classes**.
+
+### The grid
+
+Based on **12 columns**, the grid is pretty easy to use. For example, **if you want to add 2 teasers on the same row** you can do something like :
+
+```html
+<div class="row">
+  <div class="col-6">
+    [TEASER HERE]
+  </div>
+  <div class="col-6">
+    [TEASER HERE]
+  </div>
+</div>
+```
+See [the layout demo page](#/pages/layout-demo) to understand the usage we make of bootstrap grid.
+
+Read the [Bootstrap documentation](https://getbootstrap.com/docs/4.1/layout/grid/) to learn more about the grid.
+
+### Spacing
+
+Like with the grid, **Bootstrap provides some very useful classes to refine spacing** between the components. For example, if you want to **increase the margin after a wrapper** :
+
+```html
+<div id="my-wrapper" class="mb-4">
+  [CONTENT HERE]
+</div>
+```
+
+Read the [documentation](https://getbootstrap.com/docs/4.1/utilities/spacing/) to learn more about the spacing classes.
+
+## Page types
+
+Depending on your use case, **you can pick a page types**. For each of the following page type example, **there is a complete tour** to show you how the page is built and which component you can use to reproduce it.
+
+- [Laboratory page](#/pages/lab-homepage)

package/dist/docs/user documentation/index.md

@@ -0,0 +1,51 @@
+# How to use Elements
+
+Because Elements strives to be framework or environment agnostic, you should be able to use it within any frontend Web project. It consists only of **HTML**, **CSS** and a tiny bit of **JavaScript** like many other style packages.
+
+You have **two options** :
+- You can get the sources and include it on your own frontend infrastructure (advanced users)
+- or simply get the build and linked them to your project (recommended)
+
+## Get the sources
+
+Because you're supposed to be an advanced user, you can do whatever you want and include Elements as a Git submodule or as a symlink in your project. Then the Sass and javascript’s entry points are in `assets/components/base.[scss, js]`
+
+⚠️ This method can cause some conflict with your own project and the stability cannot be ensured.
+
+## Get the builds (recommended)
+
+Under the [releases tab](https://github.com/epfl-si/elements/releases), you will find all the releases of Elements and the related changes.
+
+**To download the last release's build**, you can [download this zip](https://github.com/epfl-si/elements/archive/dist/frontend.zip) which always reflect the last release state of Elements. If you feel more comfortable with Github, the branch `dist/frontend` is the build location.
+
+Now that you've downloaded the build archive, you will find every CSS, Javascript and assets files required to apply Elements design on your project.
+
+### A recommended way to use Elements
+
+1. Unarchive the builds under something like `./vendors/elements`
+2. In your base HTML template, include the following code
+  ```html
+  <head>
+    <!-- [...] -->
+
+    <!-- Elements CSS -->
+    <link rel="stylesheet" href="./vendors/elements/css/vendors.min.css">
+    <link rel="stylesheet" href="./vendors/elements/css/elements.min.css">
+
+    <!-- [...] -->
+  </head>
+  <body>
+    <!-- [...] -->
+
+    <!-- jQuery through CDN is not already present -->
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+
+    <!-- Elements JS -->
+    <script src="./vendors/elements/js/vendors.min.js"></script>
+    <script src="./vendors/elements/js/elements.min.js"></script>
+  </body>
+  ```
+
+## Something is wrong ?
+
+Feel free to use the [support and request page](#/doc/contribute--support-and-request.html) or to open an issue on the [Github repository](https://github.com/epfl-si/elements/issues).

package/dist/docs/user documentation/reports.md

@@ -0,0 +1,35 @@
+# Reports and statistics
+
+## Google Analytics
+
+To be able to generate EPFL reports, paste the following snippet inside the ```<head>``` tag on each page of your site.
+
+Email <1234@epfl.ch> to request a report for your website.
+
+  
+```
+<!-- Global Site Tag (gtag.js) - Google Analytics -->
+<script async src='https://www.googletagmanager.com/gtag/js?id=UA-4833294-1'></script>
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'UA-4833294-1', { 'anonymize_ip': true });
+</script>
+```
+
+### Personal measurement ID
+
+If you already have a Google Analytics account or are considering creating one, you can add your measurement ID like this.
+  
+```
+<!-- Global Site Tag (gtag.js) - Google Analytics -->
+<script async src='https://www.googletagmanager.com/gtag/js?id=UA-4833294-1'></script>
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'UA-4833294-1', { 'anonymize_ip': true });
+    gtag('config', 'YOUR-GA-MEASUREMENT-ID', { 'anonymize_ip': true });
+</script>
+```

package/dist/docs/user documentation/wordpress.md

@@ -0,0 +1,3 @@
+# Wordpress
+
+This design is packed into [our official wordpress package](https://github.com/epfl-si/wp-theme-2018).

package/{build/icons → dist/favicons}/site.webmanifest

@@ -1,14 +1,14 @@
 {
-    "name": "",
-    "short_name": "",
+    "name": "École polytechnique fédérale de Lausanne",
+    "short_name": "EPFL",
     "icons": [
         {
-            "src": "/android-chrome-192x192.png",
+            "src": "./android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/android-chrome-512x512.png",
+            "src": "./android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }