SPL Docs

The activity CSS combines the thumbnails and icons and standard Bootstrap List Group as an activity feed.

Code for activity is the same as for meta.

Pierre Leméteil commented on module “Comprendre son marché et ses utilisateurs”

Hey guys, here's the link to the boards: https://exemple.com
- 2 hours ago
- Reply
TidyCards is late on module “Comment j'ai réussi à adopter le bon mindset pour lancer ma boîte”
- 3 hours ago
- Send a message
Creation of project

Markup

<ol class="list-group list-group-flush list-group-metas">
  <li class="list-group-item">
    <div class="list-group-item--thumbnail thumbnail is-sm is-oval" title="Pierre Leméteil" data-toggle="tooltip">
      <img alt="..." src="...">
    </div>
    <div class="list-group-item--content">
      <span><a href="#">Author</a> performed action on <strong>item type</strong> “Item name”</span>
      <div class="message-body my-2">
        <div class="message-row">
          <div class="message-content">
            <p class="mb-0">Comment content</p>
          </div>
        </div>
      </div>
      <ul class="item-caption metas is-list small">
        <li title="Datetime" data-toggle="tooltip">Date or time ago</li>
        <li><a class="text-reset" href="#">Action</a></li>
      </ul>
    </div>
  </li>
  <li class="list-group-item">
    <span class="list-group-item--icon icon icon-creation"></span>
    <div class="list-group-item--content">
      <p class="my-0">Performed action</p>
    </div>
  </li>
</ol>

Classes

.list-group-meta: Apply to ol.list-group to format as a meta list or activity feed
.list-group-flush: Apply to ol.list-group to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

Provide contextual feedback messages for typical user actions with the handful of available and flexible inline alert messages.

An inline success alert—check it out!

An inline danger alert—check it out!

Holy guacamole! You should check in on some of those fields below.

An inline info alert—check it out!

Markup

<div class="alert-inline is-success icon icon-check-circle" role="alert">
  An inline success alert—check it out!
</div>

<div class="alert-inline is-danger icon icon-alert-octagon" role="alert">
  An inline danger alert—check it out!
</div>

<div class="alert-inline is-warning icon icon-alert" role="alert">
  Holy guacamole! You should check in on some of those fields below.
</div>

<div class="alert-inline is-info icon icon-information" role="alert">
  An inline info alert—check it out!
</div>

Classes

.alert-inline: Apply to <div> to format as an inline alert
.is-success: Apply to .alert-inline to change icon color to success color
.is-danger: Apply to .alert-inline to change icon color to danger color
.is-warning: Apply to .alert-inline to change icon color to warning color
.is-info: Apply to .alert-inline to change icon color to info color
.icon.icon-name: Apply to .alert-inline to add an icon

Formats application contents by creating sections

Pending review (1)

Access your submissions to our programs and projects here.

♻️

Sustainability Challenge

Pending review
Salomé Hassan

Once they are all accepted you can find them on the “ Your submissions” page.

Markup

<div class="application-section">
  <h4 class="application-section--title" data-toggle="collapse" data-target="#appSectionContent" aria-expanded="true">
    <span>Section title</span>
    <span class="icon icon-chevron-right ml-auto"></span>
  </h4>
  <div class="collapse show" id="appSectionContent">
    <p>Section caption.</p>
    <div class="items">
      <div class="item is-bordered">
        ...
      </div>
      <a class="btn btn-default btn-lg btn-block" href="#">Show more</a>
    </div>
    <div class="alert-inline is-info icon icon-information mt-3">An inline alert if needed.</div>
  </div>
</div>

Classes

.application-section: Parent element to house the section elements
.application-section--title: Element to house the section title and the collapse .icon
.icon: Icon which indicate the collapse state (open or closed section). The icon rotates only in the presence of a aria-expanded on .application-section--title

A variation on the card and button elements that simulates an availability selector

Select an available slot

Monday, February 15

Show more hours

Tuesday, February 16

Show more hours

Markup

<a class="btn btn-soft-primary btn-block" href="#">
  <span class="small font-weight-normal py-2">...</span>
</a>

Classes

.btn-soft-primary: Apply to .btn element to format as a light blue button
.small: Apply to <span> element to format as a small text
.font-weight-normal: Apply to <span> element to reduce button’s label font weight
.py-2: Apply to <span> element to make button’s height the same as a normal button

A variation on the card element that simulates a note-like appearance

Card title

Nov 20 at 4:10 PM

Some quick example text to build on the card title and make up the bulk of the card's content.

No comment

Markup

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Classes

.card-note: Apply to .card to format as a note

A variation on the card element that simulates a task-like appearance

Regarder la vidéo

Identifier 3 personae

Persona 1

Persona 2

Persona 3

Uncomplete task

Task name

Short text

Long text

Label

file_name.ext

0 KB
MIME type

ActionA hint appear exactly like that.

Complete task

Task name

Short text

Long text

LabelActionA hint appear exactly like that.

Complete task

Markup

<div class="card">
  <div class="card-header collapsed" data-toggle="collapse" data-target="#cardTaskContent" aria-expanded="true">
    <div class="d-flex align-items-center">
      <div class="mr-3">
        <svg class="progress-circle-container is-small flex-shrink-0" viewBox="0 0 32 32" data-percent="0" style="--percent:0;">
          <circle class="progress-circle progress-circle-bg"></circle>
          <circle class="progress-circle progress-circle-percent"></circle>
          <text class="progress-circle-text" x="16" y="20">0/1</text>
          <path class="progress-circle-icon is-checked" d="M21.128 9.5L13.948 16.724L10.872 13.624L8 16.52L13.948 22.5L24 12.386L21.128 9.5Z"></path>
        </svg>
      </div>
      <strong>Task name</strong>
      <span class="icon icon-chevron-right ml-auto"></span>
    </div>
  </div>
  <div class="card-body collapse show" id="cardTaskContent">
    ...
    <a class="btn btn-lg btn-block btn-primary" href="#">Complete task</a>
  </div>
</div>

Classes

.card-note: Apply to .card to format as a note

A variation of the media element to format an individual chat message

Jean Guy

Hey there! ✋

I was gonna be productive… Laundry, cleaning, but...

I’m getting powered donuts

powdered*

Donuts do have powers 🤣

Seen

Markup

<div class="message is-left is-bottom is-hover">
  <a class="thumbnail is-oval is-md" href="#" title="..." data-toggle="tooltip">
    <img alt="..." src="...">
  </a>
  <div class="message-body">
    <div class="message-row">
      <a class="smaller text-muted" href="#">Author</a>
    </div>
    <div class="message-list">
      <div class="message-row">
        <div class="message-content" title="Datetime long">
          <p class="mb-0">Content</p>
        </div>
        <div class="message-options dropdown position-static">
          <a class="btn btn-sm btn-transparent btn-icon" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="icon icon-dots-vertical"></span>
          </a>
          <div class="dropdown-menu" style="">
            <a class="dropdown-item" href="#">Edit</a>
            <a class="dropdown-item is-danger" href="#">Delete</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="message is-right is-bottom is-hover">
  <div class="message-body">
    <div class="message-list">
      <div class="message-row">
        <div class="message-content bg-primary text-white" title="Datetime long">
          <p class="mb-0">Content</p>
        </div>
        <div class="message-options dropdown">
          <a class="btn btn-sm btn-transparent btn-icon" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="icon icon-dots-vertical"></span>
          </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Edit</a>
            <a class="dropdown-item is-danger" href="#">Delete</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Classes

.message: Apply to <div> element to format as a single message item
.is-right: Apply to .message element to align message rows to the right
.is-bottom: Apply to .message element to align message rows to the bottom (e.g. thumbnail in front of last message)
.is-hover: Apply to .message element to show .message-options on hover
.message-body: Houses the .message-row or .message-list elements
.message-row: Houses the author's name, time or delivery status of the message
.message-list: Houses the .message-row of the chat
.message-content: Houses the message contents of the chat
.bg-primary: Apply to .message-content element to change background color to primary color (for your messages)
.bg-white.text-danger: Apply to .message-content element to change background color to white and text to danger color (for errors)
.message-options: Houses the message options of the chat

A variation of the media element to format an individual chat message

Jean Guy

Great start guys, I've added some notes to the task. We may need to make some adjustments to the last couple of items - but no biggie!

Dec 7 at 3:19 PM

Pierre Leméteil

Hey guys, here's the link to the boards: https://exemple.com

Dec 7 at 5:14 PM

Juliette Engel

Donec est magna, ultricies non suscipit non, pulvinar sit amet orci. Fusce sit amet mauris non massa.

Dec 7 at 6:01 PM

Markup

<div class="message">
  <a class="thumbnail is-oval is-md" href="#" title="" data-toggle="tooltip" data-original-title="...">
    <img alt="..." src="...">
  </a>
  <div class="message-body">
    <div class="message-row">
      <div class="message-content">
        <a class="font-weight-bold text-decoration-none" href="#">Username</a>
        <p class="mb-0">Content</p>
      </div>
      <div class="message-options dropdown">
        <a class="btn btn-sm btn-transparent btn-icon" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="icon icon-dots-vertical"></span>
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Edit</a>
          <a class="dropdown-item is-danger" href="#">Delete</a>
        </div>
      </div>
    </div>
    <div class="message-row">
      <ul class="metas is-list small">
        <li>Datetime</li>
      </ul>
    </div>
  </div>
</div>

Classes

.message: Apply to <div> element to format as a single message item
.message-body: Houses the .message-row or .message-list elements
.message-row: Houses the author's name, time or delivery status of the message
.message-content: Houses the message contents of the chat
.message-options: Houses the message options of the chat

A variation on the list group that simulates a task-like appearance

Schoolab Product Language also supports multiple custom card types. View them on the Schoolab Components page

Label

Caption

~~Label~~

Caption

Markup

A custom form variation that demonstrates nested options style functionality

Example 1

Automatic

Activate tasks review Projects have to be reviewed before accessing the next module

Manual Program managers will have to move projects from one module to another

Activate tasks review Projects have to be reviewed before accessing the next module

Activate secret Projects on the module are only visible to the project members and program managers

Example 2

Example 3

Markup

<form>
  <div class="form-group custom-control custom-checkbox">
    <input class="custom-control-input" id="customCheck1" type="checkbox" />
    <label class="custom-control-label" for="customCheck1">Label</label>
    <label class="small form-text text-muted" for="customCheck4">Description (always show)</label>

    <div class="border rounded mt-3 px-3 py-2">
      <div class="custom-control custom-checkbox">
        <input class="custom-control-input" id="customCheck2" type="checkbox" checked="">
        <label class="custom-control-label text-muted" for="customCheck2">Label</label>
        <label class="small form-text text-muted form-show-on-checked" for="customCheck2">Show only when checked</label>
      </div>

      <div class="custom-control custom-checkbox">
        <input class="custom-control-input" id="customCheck3" type="checkbox">
        <label class="custom-control-label" for="customCheck3">Label</label>
      </div>

      <div class="custom-control custom-checkbox">
        <input class="custom-control-input" id="customCheck4" type="checkbox">
        <label class="custom-control-label text-muted" for="customCheck4">Label</label>
        <label class="small form-text text-muted form-show-on-checked" for="customCheck4">Show only when checked</label>
      </div>
    </div>
  </div>
</form>

Javascript (nested-checkboxes.js)

$('#nested-checkboxes input[type="checkbox"]').change(function(e) {

  var checked = $(this).prop("checked"),
      container = $(this).parent(),
      siblings = container.siblings();

  container.find('input[type="checkbox"]').prop({
    indeterminate: false,
    checked: checked
  });

  function checkSiblings(el) {

    var parent = el.parent().parent(),
        all = true;

    el.siblings().each(function() {
      let returnValue = all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
      return returnValue;
    });
    
    if (all && checked) {

      parent.children('input[type="checkbox"]').prop({
        indeterminate: false,
        checked: checked
      });

      checkSiblings(parent);

    } else if (all && !checked) {

      parent.children('input[type="checkbox"]').prop("checked", checked);
      parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
      checkSiblings(parent);

    } else {

      el.parents("div").children('input[type="checkbox"]').prop({
        indeterminate: true,
        checked: false
      });

    }

  }

  checkSiblings(container);
});

Classes

.form-show-on-checked: Parent element to house the .form-show-on-checked element, label, input and .form-text
.form-show-on-checked: Apply to <label> to hide if not checked

For a detailed specification of the Forms component including all classes and features please see the official Bootstrap documentation reference

SPL items provide a flexible and extensible meta container with multiple variants and options.

You can insert any component you want into an item, they will be displayed one below the other. To align in a row use .item-row or bootstrap flex helpers.

Jean Guy

Head of Tests at Cool Company

♻️

Sustainability Challenge

Pending review
Salomé Hassan

This Monday at 7 PM

Back to Schoolab

Le Stade (Saint-Lazare, 5e étage)

35 people are going

Join Share

Application

From Feb 1, 2020

file_name.ext

0 KB

Thumbnail

file_name.ext

0 KB

Replace image

file_name.ext

0 KB

Dec23

Design review #4

♻️ Sustainability Challenge

9PM – 11 PM and 2 PM – 5 PM

5/10 slots left

Pending request

Pierre Leméteil

Head of Tools

Feb 15 at 10:30 AM -> 10:45 AM

ManagementProduct

⭐️ Our favorites + 1

Figma

Design, Mockup

Figma is a cloud-based design tool that promises to revolutionise the way we design. It stands out from other tools as it offers a collaborative experience.

design ui graphic design

Week #3

♻️ Sustainability Challenge

Oct 8 to Oct 10

41 projects to evaluate

Markup

<div class="item is-bordered">
  <div class="item-cover">
    <a href="#">
      <img src="..." alt="...">
    </a>
    </div>
  <div class="item-row">
    <div class="item-row">
      <div class="item-content py-1">
        <span class="text-date">...</span>
        <a class="item-title h4 mb-0 stretched-link" href="#">...</a>
        <ul class="item-caption metas small is-list">
          <li>...</li>
          <li>...</li>
          <li>...</li>
        </ul>
      </div>
    </div>
    <div class="item-options dropdown">
      <a class="btn btn-sm btn-transparent btn-icon" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="icon icon-dots-vertical"></span>
      </a>
      <div class="dropdown-menu dropdown-menu-right">
        <a class="dropdown-item" href="#">Item option</a>
      </div>
    </div>
  </div>
  <div class="item-row">
    <div class="thumbnail-stack mr-2">
      <div class="thumbnail is-oval is-xs" title="..." data-toggle="tooltip">
        <img alt="thumbnail" src="..." alt="...">
      </div>
      <div class="thumbnail is-oval is-xs" title="..." data-toggle="tooltip">
        <img alt="thumbnail" src="..." alt="...">
      </div>
      <div class="thumbnail is-oval is-xs" title="..." data-toggle="tooltip">
        <img alt="thumbnail" src="..." alt="...">
      </div>
    </div>
    <small class="text-muted">...</small>
  </div>
</div>

Classes

.item: Makes an item
.is-bordered: Add borders to an item, like a tile
.is-small: Changes the layout of an item to horizontal, appears smaller
.is-disabled: Disable all cursor events on the item, change all texts to muted color and reduce opacity to 75%
.item-row: Creates a row to align element horizontally
.item-cover: Creates a block for a cover image
.item-options: Creates a block for an options dropdown or an action button
.item-actions: Creates a container for 2 buttons maximum

The meta CSS combines the thumbnails and icons and standard Bootstrap List Group as a meta list.

Code for meta is the same as for activity.

15 rue de Milan
- 75009 Paris, France
Open from 8 AM to 8 PM
- Currently open
Subway
- Lines 3-12-14: Saint-Lazare, Line 13: Liège

Markup

<ol class="list-group list-group-flush list-group-metas">
  <li class="list-group-item">
    <div class="list-group-item--icon icon icon-information-outline"></div>
    <div class="list-group-item--content">Label<ul class="item-caption metas is-list small">
        <li>Caption</li>
      </ul>
    </div>
  </li>
</ol>

Classes

.list-group-meta: Apply to ol.list-group to format as a meta list or activity feed
.list-group-flush: Apply to ol.list-group to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

A vertical nav with custom style and compatibility with icons, thumbnails et thumbnail relations.

Courses
TidyCards31% completion

Markup

...

Classes

.nav-main: Apply to .nav to format as custom vertical nav

A filter element for lists and tables.

1–10 of 42

Full Name	Phase	Status	Progress
Jean Guy	Acceleration	Draft	75%	Show Manage Delete
Pierre Leméteil	Acceleration	Draft	33%	Show Manage Delete
Juliette Engel	Acceleration	Draft	50%	Show Manage Delete

Markup

...

A badge variation used for tags.

Normal tagSmall tag

Normal tagNormal tagNormal tag

Small tagSmall tagSmall tag

Markup

...

Classes

.class: Description

The thumbnail CSS component formats an image as a rounded or oval thumbnail.

Dec23

Markup

<div class="thumbnail is-oval is-xs" title="..." data-toggle="tooltip">
  <img alt="..." src="...">
</div>

<div class="thumbnail is-oval is-sm" title="..." data-toggle="tooltip">
  <img alt="..." src="...">
</div>

<div class="thumbnail is-oval is-md" title="..." data-toggle="tooltip">
  <img alt="..." src="...">
</div>

<div class="thumbnail is-oval is-lg" title="..." data-toggle="tooltip">
  <img alt="..." src="...">
</div>

<div class="thumbnail is-oval is-xl" title="..." data-toggle="tooltip">
  <img alt="..." src="...">
</div>

<div class="thumbnail is-xs" title="..." data-toggle="tooltip">
  <img alt="..." src="...">
</div>

<div class="thumbnail is-sm" title="..." data-toggle="tooltip">
  <img alt="..." src="...">
</div>

<div class="thumbnail is-md" title="..." data-toggle="tooltip">
  <img alt="..." src="...">
</div>

<div class="thumbnail is-lg" title="..." data-toggle="tooltip">
  <img alt="..." src="...">
</div>

<div class="thumbnail is-xl" title="..." data-toggle="tooltip">
  <img alt="..." src="...">
</div>

<div class="thumbnail is-date" title="..." data-toggle="tooltip">
  <span class="month">Dec</span>
  <span class="day">23</span>
</div>

Classes

.thumbnail: Apply to <div> to format as a thumbnail
.is-oval: Apply to .thumbnail to format as an oval thumbnail
.is-xs: Apply to .thumbnail to reduce default size
.is-sm: Apply to .thumbnail to reduce default size
.is-md: Apply to .thumbnail to reduce default size
.is-lg: Apply to .thumbnail to default size (optional)
.is-xl: Apply to .thumbnail to increase default size
.is-date: Apply to .thumbnail to format as a calendar

Formats a group of thumbnail with thumbnails slightly overlapping

Markup

<div class="thumbnail-group">
  <div class="thumbnail is-oval" title="..." data-toggle="tooltip">
    <img alt="..." src="...">
  </div>
  <div class="thumbnail" title="..." data-toggle="tooltip">
    <img alt="..." src="...">
  </div>
</div>

Classes

.thumbnail-group: Apply to <div> to format as overlapping group of thumbnails

Formats a relation of thumbnail with thumbnails slightly overlapping

2

Markup

<div class="thumbnail-relation">
  <div class="thumbnail is-oval" title="..." data-toggle="tooltip">
    <img alt="..." src="...">
  </div>
  <div class="thumbnail" title="..." data-toggle="tooltip">
    <img alt="..." src="...">
  </div>
</div>

<div class="thumbnail-relation">
  <div class="thumbnail is-oval" title="..." data-toggle="tooltip">
    <img alt="..." src="...">
  </div>
  <span class="icon icon-domain-off" title="..." data-toggle="tooltip">
</div>

<div class="thumbnail-relation">
  <div class="thumbnail is-oval" title="..." data-toggle="tooltip">
    <img alt="..." src="...">
  </div>
  <span class="number">2</span>
</div>

<div class="thumbnail-relation">
  <div class="thumbnail" title="..." data-toggle="tooltip">
    <img alt="..." src="...">
  </div>
  <svg class="progress-circle-container" viewBox="0 0 32 32" data-percent="..." style="--percent:0;" title="..." data-toggle="tooltip">
    <circle class="progress-circle progress-circle-bg"></circle>
    <circle class="progress-circle progress-circle-percent"></circle>
    <text class="progress-circle-text" x="16" y="20">0/9</text>
    <path class="progress-circle-icon is-checked" d="M21.128 9.5L13.948 16.724L10.872 13.624L8 16.52L13.948 22.5L24 12.386L21.128 9.5Z"></path>
  </svg>
</div>

Classes

.thumbnail-relation: Apply to <div> to format as overlapping group of thumbnails

Formats a stack of thumbnail with thumbnails slightly overlapping

Markup

<div class="thumbnail-stack">
  <div class="thumbnail is-oval" title="..." data-toggle="tooltip">
    <img alt="..." src="...">
  </div>
</div>

Classes

.thumbnail-stack: Apply to <div> to format as overlapping list of thumbnails

A button variation used for navigation.

Markup

<a class="btn btn-default btn-tile" href="#">
  <span class="btn--icon icon icon-*"></span>
  <span class="btn--label">...</span>
  <span class="btn--caption">...</span>
</a>

Classes

.btn-tile: Apply to .btn element to format as a tile
.btn-background: Apply to .btn element to add a background image to the button
.btn--icon: Apply to <span> or <img> element to format as a button icon, image or emoji
.btn--label: Apply to <span> element to format as a button label
.btn--caption: Apply to <span> element to format as a button caption