Difference between revisions of "Team:BostonU HW/IntrouF"

(Created page with "{{Global_Menubar}} {{Team:BostonU_Hardware/CSS}} <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="apple-touch-icon" sizes="76x76" href="assets/img...")
 
Line 1: Line 1:
 
{{Global_Menubar}}
 
{{Global_Menubar}}
 
{{Team:BostonU_Hardware/CSS}}
 
{{Team:BostonU_Hardware/CSS}}
−
<!doctype html>
 
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
Line 15: Line 14:
 
<!-- EXTRA STYLING -->
 
<!-- EXTRA STYLING -->
 
<style>
 
<style>
−
#Title{
+
.Title{
 
color: red;
 
color: red;
 
}
 
}
Line 21: Line 20:
 
background-image: <!-- insert image here -->;
 
background-image: <!-- insert image here -->;
 
}
 
}
−
#Prim_Table{
+
.text{
−
width: 100%;
+
 
 
}
 
}
−
#Primitive{
+
.text_section{
−
vertical-align: middle;
+
 
−
align-content: center;
+
}
 +
#uF_Example{
 +
height: 40%;
 
}
 
}
 
#Design{
 
#Design{
Line 32: Line 33:
 
text-align: center;
 
text-align: center;
 
}
 
}
 +
/*
 +
.table tbody > tr > td.vert-align{
 +
vertical-align: middle;
 +
}
 +
*/
 
#Pics{
 
#Pics{
 
width: 80%;
 
width: 80%;
Line 43: Line 49:
 
}
 
}
 
#Header_Pic{
 
#Header_Pic{
−
height: 60%;
+
height: 40%;
 
}
 
}
 
</style>
 
</style>
Line 53: Line 59:
 
<div class="landing-page">
 
<div class="landing-page">
 
<div id="page_background">
 
<div id="page_background">
−
<div class="header" style="background-image:url(chips/city.jpg)" id="Header_Pic"></div>
+
<div class="header" id="Header_Pic">
−
<div class="main main-raised" id = "main_text">
+
<img src="https://static.igem.org/mediawiki/2017/f/f9/MARS_Background1.png" id="MARS">
 +
</div>
 +
<div class="main main-raised">
 +
<div class="container">
 +
<div class="col-md-8">
 +
<h2 class="text-center">Get Ready to Learn about Microfludics!</h2>
 +
<div class="text_section">
 +
<div class="text">
 +
Donec consequat scelerisque metus ut auctor. Sed quis leo lacinia, euismod purus ut, scelerisque libero. Morbi eu magna lobortis augue gravida venenatis ac aliquam ante. Vestibulum eget accumsan mi. Aenean vel ullamcorper mi. Fusce eu risus interdum, dignissim enim eget, tincidunt nisi. Sed orci lorem, pellentesque fermentum mattis vel, consequat ac nulla. In feugiat, massa eu finibus aliquet, ligula urna tristique diam, tincidunt venenatis magna tellus eu neque. Ut eu feugiat dui, et vulputate lacus. Donec sit amet urna non eros varius scelerisque vel ac mauris. Proin vitae orci eget lorem porta commodo. Morbi laoreet ullamcorper dictum. Donec quis est vehicula, consequat lectus non, facilisis metus. Pellentesque feugiat suscipit nisl, at pharetra ligula varius a. Nulla facilisi.
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-2 col-md-offset-1">
 +
<h2> <u>Contents</u> </h2>
 +
<ul>
 +
<li><a href="#uF_101">Microfluidics 101</a></li>
 +
<li><a href="#Primitive_Table">Primitive Table</a></li>
 +
<li><a href="Videos">HEADING 3</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div class="container">
 +
<br>
 +
<h2> <u>Microfluidics 101</u> </h2>
 +
<div class="text_section">
 +
<div class="text">
 +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex dolor, gravida at luctus sed, sagittis a dui. Sed tristique pharetra magna ut pretium. Nam at mi at odio varius placerat vel at nisl. Suspendisse at risus a sapien dictum elementum imperdiet ut diam. Aenean tristique dapibus ex, quis pretium tortor scelerisque quis. Nam egestas convallis lacus eu faucibus. Vestibulum et dolor volutpat erat luctus auctor. Nunc blandit ligula sed odio volutpat aliquet. Fusce vitae nisl tortor. Donec fermentum ornare nisi ut molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vestibulum porta diam, quis convallis diam luctus nec.
 +
</div>
 +
</div>
 +
</br>
 +
</div>
 +
<br>
 
<div class="container">
 
<div class="container">
−
    <div class="section text-center section-landing">
+
<h3>What is Microfluidics?</h3>
−
                <div class="row">
+
<div class="text_section">
−
<!-- This is the main text -->
+
<div class="text">
−
                    <div>
+
Microfluidics is the manipulation of microlitre volumes of liquid in order to perform scientific experiments. This is performed on devices called microfluidic chips that can be made of polycarbonate, glass or silicone.
−
                        <h2 class="title" id="Title">Introduction to Microfluidics<img src="#" class="img-rounded" alt="Logo"/> </h2>
+
</div>
−
                        <h5 class="description" id="Description">This will be your microfluidics crash course!</h5>
+
</div>
−
</div>
+
</div>
−
</div>
+
</br>
−
</div>
+
<br>
 
<div class="container">
 
<div class="container">
−
<div class="row" id="Diagram">
+
<h3>What is a Microfluidic Chip?</h3>
−
<img src="#" alt="Control/Flow Diagram" />
+
<div class="text_section">
−
</div>
+
<div class="text">
−
<div class="row" id="Diagram_Text">
+
A continuous flow microfluidic chip typically consists of three layers: a flow layer and control layer with a flexible layer of PDMS between them. There are many other types of microfluidics such as digital or paper which operate using different mechanisms, however we will focus on continuous flow chips as this is the type utilised by MARS.
−
<p>This will discribe the control/flow layer diagram aldjsfladsjfklajdfladjflkajdsflasdjfladjsfaldjf</p>
+
</div>
−
</div>
+
</div>
 +
<div class="col-md-4">
 +
<img src="https://static.igem.org/mediawiki/2017/5/5f/LysisFlow.png" alt="Picture">
 +
</div>
 +
<div class="col-md-8">
 +
<br>
 +
<h4 class="text-center">Control Layer</h4>
 +
<div class="text_section text-center">
 +
<div class="text">
 +
This is the section that will talk about Control layer.
 +
</div>
 +
</div>
 +
<h4 class="text-center">PDMS Layer</h4>
 +
<div class="text_section text-center">
 +
<div class="text">
 +
This is the section that will talk about PDMS layer.
 +
</div>
 +
</div>
 +
<h4 class="text-center">Flow Layer</h4>
 +
<div class="text_section text-center">
 +
<div class="text">
 +
These features are called “primitives”. The Control layer allows us to move the elastic PDMS layer in the middle to further manipulate the flow layer, typically by opening or closing valves.
 +
To further understand how primitives work click on the following link: <a href="#">Primitive Table</a>
 +
</div>
 +
</div>
 +
</br>
 +
</div>
 +
</div>
 +
</br>
 +
<br>
 +
<div class="container">
 +
<h3>How does this apply to Synthetic Biology?</h3>
 +
<div class="text_section">
 +
<div class="text">
 +
Microfluidic chips can be designed to perform various procedures used in synthetic biology. However, microfluidics is often an overlooked tool because designing and using chips requires specialized knowledge.
 +
</div>
 
</div>
 
</div>
 +
</div>
 +
</br>
 +
</div>
  
−
<div class="text-center">
+
<div class="main main-raised" style="margin-top:5%;">
−
<h2 class="title" id="Title">Primitive Table</h2>
+
<div class="container" id="Primitive_Table">
−
 
+
<h2 class="title"> <u>Primitive Table</u> </h2>
−
<!-- THIS WILL BE THE TABLE -->
+
<table class="table">
−
<table class="table" id="Prim_Table">
+
<thead>
−
    <thead>
+
<tr>
−
        <tr>
+
<th class="text-center col-md-4">Primitive</th>
−
            <th class="text-center">Primitive</th>
+
<th class="text-center col-md-4">Design</th>
−
            <th class="text-center">Design</th>
+
<th class="text-center col-md-4">Mill</th>
−
            <th class="text-center">Mill</th>
+
</tr>
−
            <th class="text-center">Video</th>
+
</thead>
−
        </tr>
+
<tbody>
−
    </thead>
+
<tr>
−
    <tbody>
+
<td class="text-center">
−
        <tr>
+
<u>Channel</u>
−
            <td class="text-center" id="Primitve">Channel</td>
+
<div class="text_section">
−
<td id="Design"><img src="chips/antibiotic.png" alt="DESIGN Channel" id="Pics"></td>
+
<div class="text">
−
            <td id="Design"><img src="chips/antibiotic.png" alt="DESIGN Channel" id="Pics"></td>
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat, mi feugiat blandit feugiat, ante nisl dictum lacus, in egestas ligula nulla eu ex. Quisque vel justo congue, volutpat neque at, placerat nulla. Nam malesuada tellus sed justo pretium, eu vulputate mauris elementum.
−
            <td>INSERT VIDEO</td>
+
</div>
−
            <td class="td-actions text-right">
+
</div>
−
                <button type="button" rel="tooltip" title="More Info" class="btn btn-info btn-simple btn-xs">
+
</td>
−
                    <i class="fa fa-user"></i>
+
<td id="Design"><img src="https://static.igem.org/mediawiki/2017/5/50/AntiFlow.png" alt="DESIGN Channel" id="Pics"></td>
−
                </button>
+
<td id="Design"><img src="https://static.igem.org/mediawiki/2017/5/50/AntiFlow.png" alt="DESIGN Channel" id="Pics"></td>
−
            </td>
+
<td class="td-actions text-right">
−
        </tr>
+
</td>
−
        <tr>
+
</tr>
−
            <td class="text-center">3D Valve</td>
+
<tr>
−
<td><img src="#" alt="DESIGN Valve"></td>
+
<td class="text-center">
−
            <td><img src="#" alt="MILL Valve"></td>
+
<u>Mixer</u>
−
            <td>INSERT VIDEO</td>
+
<div class="text_section">
−
            <td class="td-actions text-right">
+
<div class="text">
−
                <button type="button" rel="tooltip" title="More Info" class="btn btn-info btn-simple btn-xs">
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat, mi feugiat blandit feugiat, ante nisl dictum lacus, in egestas ligula nulla eu ex. Quisque vel justo congue, volutpat neque at, placerat nulla. Nam malesuada tellus sed justo pretium, eu vulputate mauris elementum.
−
                    <i class="fa fa-user"></i>
+
</div>
−
                </button>
+
</div>
−
            </td>
+
</td>
−
        </tr>
+
<td id="Design"><img src="https://static.igem.org/mediawiki/2017/5/50/AntiFlow.png" alt="DESIGN Channel" id="Pics"></td>
−
        <tr>
+
<td id="Design"><img src="https://static.igem.org/mediawiki/2017/5/50/AntiFlow.png" alt="DESIGN Channel" id="Pics"></td>
−
            <td class="text-center">Mixer</td>
+
<td class="td-actions text-right">
−
<td><img src="#" alt="DESIGN Valve"></td>
+
</td>
−
            <td><img src="#" alt="MILL Valve"></td>
+
</tr>
−
            <td>INSERT VIDEO</td>
+
<tr>
−
            <td class="td-actions text-right">
+
<td class="text-center">
−
                <button type="button" rel="tooltip" title="More Info" class="btn btn-info btn-simple btn-xs">
+
<u>3-D Valve</u>
−
                    <i class="fa fa-user"></i>
+
<div class="text_section">
−
                </button>
+
<div class="text">
−
            </td>
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat, mi feugiat blandit feugiat, ante nisl dictum lacus, in egestas ligula nulla eu ex. Quisque vel justo congue, volutpat neque at, placerat nulla. Nam malesuada tellus sed justo pretium, eu vulputate mauris elementum.
−
        </tr>
+
</div>
−
<tr>
+
</div>
−
            <td class="text-center">Tree</td>
+
</td>
−
<td><img src="#" alt="DESIGN Valve"></td>
+
<td id="Design"><img src="https://static.igem.org/mediawiki/2017/5/50/AntiFlow.png" alt="DESIGN Channel" id="Pics"></td>
−
            <td><img src="#" alt="MILL Valve"></td>
+
<td id="Design"><img src="https://static.igem.org/mediawiki/2017/5/50/AntiFlow.png" alt="DESIGN Channel" id="Pics"></td>
−
            <td>INSERT VIDEO</td>
+
<td class="td-actions text-right">
−
            <td class="td-actions text-right">
+
</td>
−
                <button type="button" rel="tooltip" title="More Info" class="btn btn-info btn-simple btn-xs">
+
</tr>
−
                    <i class="fa fa-user"></i>
+
<tr>
−
                </button>
+
<td class="text-center">
−
            </td>
+
<u>Chamber</u>
−
        </tr>
+
<div class="text_section">
−
<tr>
+
<div class="text">
−
            <td class="text-center">Multiplexer</td>
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat, mi feugiat blandit feugiat, ante nisl dictum lacus, in egestas ligula nulla eu ex. Quisque vel justo congue, volutpat neque at, placerat nulla. Nam malesuada tellus sed justo pretium, eu vulputate mauris elementum.
−
<td><img src="#" alt="DESIGN Valve"></td>
+
</div>
−
            <td><img src="#" alt="MILL Valve"></td>
+
</div>
−
            <td>INSERT VIDEO</td>
+
</td>
−
            <td class="td-actions text-right">
+
<td id="Design"><img src="https://static.igem.org/mediawiki/2017/5/50/AntiFlow.png" alt="DESIGN Channel" id="Pics"></td>
−
                <button type="button" rel="tooltip" title="More Info" class="btn btn-info btn-simple btn-xs">
+
<td id="Design"><img src="https://static.igem.org/mediawiki/2017/5/50/AntiFlow.png" alt="DESIGN Channel" id="Pics"></td>
−
                    <i class="fa fa-user"></i>
+
<td class="td-actions text-right">
−
                </button>
+
</td>
−
            </td>
+
</tr>
−
        </tr>
+
<tr>
−
<tr>
+
<td class="text-center">
−
            <td class="text-center">Chamber</td>
+
<u>Metering</u>
−
<td><img src="#" alt="DESIGN Valve"></td>
+
<div class="text_section">
−
            <td><img src="#" alt="MILL Valve"></td>
+
<div class="text">
−
            <td>INSERT VIDEO</td>
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat, mi feugiat blandit feugiat, ante nisl dictum lacus, in egestas ligula nulla eu ex. Quisque vel justo congue, volutpat neque at, placerat nulla. Nam malesuada tellus sed justo pretium, eu vulputate mauris elementum.
−
            <td class="td-actions text-right">
+
</div>
−
                <button type="button" rel="tooltip" title="More Info" class="btn btn-info btn-simple btn-xs">
+
</div>
−
                    <i class="fa fa-user"></i>
+
</td>
−
                </button>
+
<td id="Design"><img src="https://static.igem.org/mediawiki/2017/5/50/AntiFlow.png" alt="DESIGN Channel" id="Pics"></td>
−
            </td>
+
<td id="Design"><img src="https://static.igem.org/mediawiki/2017/5/50/AntiFlow.png" alt="DESIGN Channel" id="Pics"></td>
−
        </tr>
+
<td class="td-actions text-right">
−
    </tbody>
+
</td>
 +
</tr>
 +
</tbody>
 
</table>
 
</table>
 
</div>
 
</div>
  
−
                    </div>
+
</div>
−
</div>
+
 
          </div>
 
          </div>
 
</div>
 
</div>

Revision as of 03:19, 11 October 2017

BostonU_HW

Introduction to Microfluidics

Get Ready to Learn about Microfludics!

Donec consequat scelerisque metus ut auctor. Sed quis leo lacinia, euismod purus ut, scelerisque libero. Morbi eu magna lobortis augue gravida venenatis ac aliquam ante. Vestibulum eget accumsan mi. Aenean vel ullamcorper mi. Fusce eu risus interdum, dignissim enim eget, tincidunt nisi. Sed orci lorem, pellentesque fermentum mattis vel, consequat ac nulla. In feugiat, massa eu finibus aliquet, ligula urna tristique diam, tincidunt venenatis magna tellus eu neque. Ut eu feugiat dui, et vulputate lacus. Donec sit amet urna non eros varius scelerisque vel ac mauris. Proin vitae orci eget lorem porta commodo. Morbi laoreet ullamcorper dictum. Donec quis est vehicula, consequat lectus non, facilisis metus. Pellentesque feugiat suscipit nisl, at pharetra ligula varius a. Nulla facilisi.

Contents


Microfluidics 101

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex dolor, gravida at luctus sed, sagittis a dui. Sed tristique pharetra magna ut pretium. Nam at mi at odio varius placerat vel at nisl. Suspendisse at risus a sapien dictum elementum imperdiet ut diam. Aenean tristique dapibus ex, quis pretium tortor scelerisque quis. Nam egestas convallis lacus eu faucibus. Vestibulum et dolor volutpat erat luctus auctor. Nunc blandit ligula sed odio volutpat aliquet. Fusce vitae nisl tortor. Donec fermentum ornare nisi ut molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vestibulum porta diam, quis convallis diam luctus nec.


What is Microfluidics?

Microfluidics is the manipulation of microlitre volumes of liquid in order to perform scientific experiments. This is performed on devices called microfluidic chips that can be made of polycarbonate, glass or silicone.


What is a Microfluidic Chip?

A continuous flow microfluidic chip typically consists of three layers: a flow layer and control layer with a flexible layer of PDMS between them. There are many other types of microfluidics such as digital or paper which operate using different mechanisms, however we will focus on continuous flow chips as this is the type utilised by MARS.
Picture

Control Layer

This is the section that will talk about Control layer.

PDMS Layer

This is the section that will talk about PDMS layer.

Flow Layer

These features are called “primitives”. The Control layer allows us to move the elastic PDMS layer in the middle to further manipulate the flow layer, typically by opening or closing valves. To further understand how primitives work click on the following link: Primitive Table



How does this apply to Synthetic Biology?

Microfluidic chips can be designed to perform various procedures used in synthetic biology. However, microfluidics is often an overlooked tool because designing and using chips requires specialized knowledge.

Primitive Table

Primitive Design Mill
Channel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat, mi feugiat blandit feugiat, ante nisl dictum lacus, in egestas ligula nulla eu ex. Quisque vel justo congue, volutpat neque at, placerat nulla. Nam malesuada tellus sed justo pretium, eu vulputate mauris elementum.
DESIGN Channel DESIGN Channel
Mixer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat, mi feugiat blandit feugiat, ante nisl dictum lacus, in egestas ligula nulla eu ex. Quisque vel justo congue, volutpat neque at, placerat nulla. Nam malesuada tellus sed justo pretium, eu vulputate mauris elementum.
DESIGN Channel DESIGN Channel
3-D Valve
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat, mi feugiat blandit feugiat, ante nisl dictum lacus, in egestas ligula nulla eu ex. Quisque vel justo congue, volutpat neque at, placerat nulla. Nam malesuada tellus sed justo pretium, eu vulputate mauris elementum.
DESIGN Channel DESIGN Channel
Chamber
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat, mi feugiat blandit feugiat, ante nisl dictum lacus, in egestas ligula nulla eu ex. Quisque vel justo congue, volutpat neque at, placerat nulla. Nam malesuada tellus sed justo pretium, eu vulputate mauris elementum.
DESIGN Channel DESIGN Channel
Metering
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat, mi feugiat blandit feugiat, ante nisl dictum lacus, in egestas ligula nulla eu ex. Quisque vel justo congue, volutpat neque at, placerat nulla. Nam malesuada tellus sed justo pretium, eu vulputate mauris elementum.
DESIGN Channel DESIGN Channel