1.3.0
Pipeline Components
In addition to the default Bootstrap Components, Pipeline includes many custom components suited to project management and team-based applications
In addition to the default Bootstrap Components, Pipeline includes many custom components suited to project management and team-based applications
The activity CSS combines the Avatar List and standard Bootstrap List Group as an activity feed.
<ol class="list-group list-group-activity">
<li class="list-group-item">
<div class="media align-items-center">
<ul class="avatars">
<li>
<div class="avatar bg-primary">
<i class="material-icons">...</i>
</div>
</li>
<li>
<img alt="..." src="..." class="avatar" />
</li>
</ul>
<div class="media-body">
<div>
<span class="h6">Author </span><span>performed action </span><a href="#">In item</a>
</div>
<span class="text-small">Date</span>
</div>
</div>
</li>
</ol>.list-group-activity
Apply to ol.list-group to format as an activity feed
The avatar CSS component formats an image as a rounded avatar.
<img alt="..." class="avatar" src="..." />
<img alt="..." class="avatar avatar-sm" src="..." />
<img alt="..." class="avatar avatar-lg" src="..." />.avatar
Apply to <img> to format as a rounded avatar
.avatar-sm
Apply to .avatar to reduce default size
.avatar-lg
Apply to .avatar to increase default size
Formats a list of avatars with avatars slightly overlapping
<ul class="avatars">
<li>
<img alt="..." class="avatar" src="..." />
</li>
</ul>.avatars
Apply to <ul> to format as overlapping list of avatars
A combo of card, progress and avatar list elements formatted to display a single task
<div class="card card-kanban">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="card-body">
<div class="dropdown card-options">
<button class="btn-options" type="button" id="..." data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right">
...
</div>
</div>
<div class="card-title">
<a href="#" data-toggle="modal" data-target="#task-modal"><h6>Task Title</h6></a>
</div>
<ul class="avatars">
...
</ul>
<div class="card-meta d-flex justify-content-between">
<div class="d-flex align-items-center">
<i class="material-icons">playlist_add_check</i>
<span>-/-</span>
</div>
<span class="text-small">Due 2 days</span>
</div>
</div>
</div>.card-kanban
Apply to .card to format as a kanban card
A variation on the card element that simulates a note-like appearance
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
<div class="card card-note">
<div class="card-header">
<div class="media align-items-center">
<img alt=".." src="..." class="avatar" />
<div class="media-body">
<h6 class="mb-0">...</h6>
</div>
</div>
<div class="d-flex align-items-center">
<span>...</span>
<div class="ml-1 dropdown card-options">
<button class="btn-options" type="button" id="..." data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item text-danger" href="#">Delete</a>
</div>
</div>
</div>
</div>
<div class="card-body">
...
</div>
</div>.card-note
Apply to .card to format as a note
A combo of card, progress and avatar list elements formatted to display a single project
<div class="card card-project">
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="card-body">
<div class="dropdown card-options">
<button class="btn-options" type="button" id="..." data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right">
...
</div>
</div>
<div class="card-title">
<a href="#"><h5>Project Name</h5></a>
</div>
<ul class="avatars">
...
</ul>
<div class="card-meta d-flex justify-content-between">
<div class="d-flex align-items-center">
<i class="material-icons mr-1">playlist_add_check</i>
<span class="text-small">-/-</span>
</div>
<span class="text-small">Due date</span>
</div>
</div>
</div>.card-project
Apply to .card to format as a project
A combo of card, and avatar list elements formatted to display a single team
<div class="card card-team">
<div class="card-body">
<div class="dropdown card-options">
<button class="btn-options" type="button" id="..." data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right">
...
</div>
</div>
<div class="card-title">
<a href="#"><h5>Team Name</h5></a>
<span># Projects, # Members</span>
</div>
<ul class="avatars">
...
</ul>
</div>
</div>.card-team
Apply to .card to format as a team
A combo of card, progress and avatar list elements formatted to display a single task
<div class="card card-task">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="card-body">
<div class="card-title">
<a href="#"><h6>Task Name</h6></a>
<span class="text-small">Due Tomorrow</span>
</div>
<div class="card-meta">
<ul class="avatars">
<li>
<img alt="..." class="avatar" src="..." />
</li>
</ul>
<div class="d-flex align-items-center">
<i class="material-icons">playlist_add_check</i>
<span>-/-</span>
</div>
<div class="dropdown card-options">
<button class="btn-options" type="button" id="task-dropdown-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right">
...
</div>
</div>
</div>
</div>
</div><!--end of task-->.card-task
Apply to .card to format as a task
A custom component to visually group a list of cards.
<div class="card-list">
<div class="card-list-head">
<h6>Card List Title</h6>
<div class="dropdown">
<button class="btn-options" type="button" id="..." data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right">
...
</div>
</div>
</div>
<div class="card card-task">...</div>
<div class="card card-task">...</div>
</div>.card-list
Parent element to house .card-list-head and collection of .card elements
.card-list-head
Houses the card list title and dropdown button
A variation of the media element to format an individual chat message
Coming along nicely, we've got a draft for the client questionnaire completed, take a look! 🤓
<div class="media chat-item">
<img alt="..." src=".." class="avatar" />
<div class="media-body">
<div class="chat-item-title">
<span class="chat-item-author">Author</span>
<span>Time</span>
</div>
<div class="chat-item-body">
...
</div>
</div>
</div>.chat-item
Apply to .media element to format as a single chat item
.chat-item-author
Houses the author's name and time of the chat message
.chat-item-body
Houses the message contents of the chat message
A combination of forms and chat items to demonstrate chat functionality
Hey guys, just kicking things off here in the chat window. Hope you're all ready to tackle this great project. Let's smash some Brand Concept & Design!
Nice one @Claire, we've got some killer ideas kicking about already.
Roger that boss! @Ravi and I have already started gathering some stuff for the mood boards, excited to start! 🔥
Can't wait! @David how are we coming along with the Client Objective Meeting?
Coming along nicely, we've got a draft for the client questionnaire completed, take a look! 🤓
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!
Well done @all. See you all at 2 for the kick-off meeting. 🤜
<div class="chat-module">
<div class="chat-module-top">
<form>
<div class="input-group input-group-round">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">search</i>
</span>
</div>
<input type="search" class="form-control" placeholder="Search chat" aria-label="Search Chat">
</div>
</form>
<div class="chat-module-body">
...
</div>
</div>
<div class="chat-module-bottom">
<form class="chat-form">
<textarea class="form-control" placeholder="Type message" rows="1"></textarea>
<div class="chat-form-buttons">
<button type="button" class="btn btn-link">
<i class="material-icons">tag_faces</i>
</button>
<div class="custom-file custom-file-naked">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">
<i class="material-icons">attach_file</i>
</label>
</div>
</div>
</form>
</div>
</div>Note, that for the Chat Module to display correctly, the parent element it's housed inside, must have an explicit height.
.chat-module
Parent element to house the Chat Module elements
.chat-module-top
Houses the search form at the top of the module
.chat-module-body
Houses the .chat-item elements for the discussion
.chat-module-bottom
Houses the chat input form
A combination of the Dropzone plugin and Bootstrap's List Group component
<div class="d-none dz-template">
<li class="list-group-item dz-preview dz-file-preview">
<div class="media align-items-center dz-details">
<ul class="avatars">
<li>
<div class="avatar bg-primary dz-file-representation">
<img class="avatar" data-dz-thumbnail />
<i class="material-icons">attach_file</i>
</div>
</li>
<li>
<img alt="..." src="..." class="avatar" data-title="..." data-toggle="tooltip" />
</li>
</ul>
<div class="media-body d-flex justify-content-between align-items-center">
<div class="dz-file-details">
<a href="#" class="dz-filename"><span data-dz-name></span></a><br>
<span class="text-small dz-size" data-dz-size></span>
</div>
<img alt="Loader" src="assets/img/loader.svg" class="dz-loading" />
<div class="dropdown">
<button class="btn-options" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Download</a>
<a class="dropdown-item" href="#">Share</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="#" data-dz-remove>Delete</a>
</div>
</div>
<button class="btn btn-danger btn-sm dz-remove" data-dz-remove>
Cancel
</button>
</div>
</div>
<div class="progress dz-progress">
<div class="progress-bar dz-upload" data-dz-uploadprogress></div>
</div>
</li>
</div>
<form class="dropzone" action="...">
<span class="dz-message">Drop files or click here to upload</span>
</form>
<ul class="list-group list-group-activity dropzone-previews flex-column-reverse">
</ul>.dropzone
Apply to <form> to make it a dropzone area
.dz-message
Add inside form.dropzone to house the 'Drop here or click to upload' message
.dz-template *
Elements required to display dropzone info such as filesize, progress etc. full reference at Dropzone site
.dropzone-previews
Apply to ul.list-group directly below form.dropzone to denote the container for the uploaded file previews