Difference between revisions of "Team:UCL/Design"

Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
<style>
 
−
#count{width:31%;}
 
−
.counttable{width:90%;}
 
−
table{width:100%;}
 
−
td{width:16.667%;}
 
  
−
</style>
+
<script>
  
 +
  $(function () {
 +
  $('.content').myTooltip({
 +
    speed: 200,
 +
    closeOnClick: true
 +
  });
 +
 
 +
});
  
 +
 +
 +
$.fn.myTooltip = function ( options ) {
 +
 
 +
 
 +
  var defaults = {
 +
    speed: 650,
 +
    closeOnClick: false,
 +
    tooltipClass: 'tooltip'
 +
  };
 +
 
 +
  var settings = $.extend( {}, defaults, options );
 +
 
 +
  var $this = $(this),
 +
      $tooltip = $this.find('.'+settings.tooltipClass);
 +
 
 +
 
 +
  setPosition();
 +
  $(window).resize(function () {
 +
    setPosition();
 +
  });
 +
 
 +
 
 +
  $this.mouseenter(function () {
 +
    $('.'+settings.tooltipClass, this).fadeIn(settings.speed);
 +
  }).mouseleave(function () {
 +
    $('.'+settings.tooltipClass, this).stop(true, true).fadeOut(settings.speed);
 +
  });
 +
 
 +
  if(settings.closeOnClick) {
 +
    $tooltip.click(function () {
 +
      $(this).stop(true, true).fadeOut(settings.speed);
 +
    });
 +
  }
 +
 
 +
 
 +
  function setPosition() {
 +
    $tooltip.css({top: $this.height(), left: -150});
 +
  }
 +
 
 +
};
 +
 +
</script>
 +
 +
<script src="https://cferdinandi.github.io/smooth-scroll/dist/js/smooth-scroll.js"></script>
 +
<script>
 +
smoothScroll.init({
 +
speed: 1000,
 +
easing: 'easeInOutCubic',
 +
offset: 0,
 +
updateURL: true,
 +
callbackBefore: function ( toggle, anchor ) {},
 +
callbackAfter: function ( toggle, anchor ) {}
 +
});
 +
</script>
 +
<style>
 +
 +
 +
.mainmenu {background-color: #fff !important;}
 +
.menu-items a {color: #493C54;}
 +
.buttonblack {background-color: #22343C; border-color: #22343C; }
 +
a.buttonblack { color: #fff !important; font-size: 12px;}
 +
.buttonblack:hover {border-color: #22343C; color: #22343C !important;}
 +
 +
 +
 +
 +
 +
 +
 +
#header2 {
 +
 +
width: 100%;
 +
position: relative;
 +
margin: 0;
 +
padding: 0;
 +
top: 0;
 +
bottom: 0;
 +
margin: 0 auto;
 +
min-height: 100%;
 +
height: auto;
 +
vertical-align: middle;
 +
font-family: Raleway;
 +
letter-spacing: 1.1px; font-size: 13px;
 +
}
 +
 +
 +
 +
#header2:before
 +
{
 +
content: "";
 +
    background-image: url('https://static.igem.org/mediawiki/2015/a/a6/UCL_MG_1643_2.jpg');
 +
  background-repeat: no-repeat;
 +
  background-attachment: fixed !important;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 1200, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
 +
    position: absolute;
 +
    top: 0px;
 +
    left: 0px;
 +
margin: 0;
 +
padding: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
pointer-events: none;
 +
overflow: hidden;
 +
display: block;
 +
border: none;}
 +
 +
#mobilebackground {
 +
  background-image: url('https://static.igem.org/mediawiki/2015/a/a6/UCL_MG_1643_2.jpg');
 +
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 300, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
 +
 +
    top: 0;
 +
    right: 0;
 +
    left: 0;
 +
    background-position: 0 0 0 0;
 +
position: fixed;
 +
    background-repeat: no-repeat;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
display: none;
 +
width: 100%;
 +
height: 100%;
 +
 +
  }
 +
 +
 +
#text h2 {
 +
font-size: 30px !important;
 +
 +
}
 +
 +
 +
 +
#wrapper {width: 80%; height: 80%; margin: 0 auto; position: relative; top: 80px; opacity: 1;}
 +
 +
#submenu {width: 100%; margin-top: 20px; text-align: center; position: relative;}
 +
 +
#text {margin-top: 50px; z-index: 9999;}
 +
#text h2 {font-size: 20px; text-decoration: none; border-bottom: 0px; display: block; background-color: #c97062; color: #fff; font-weight: bold; border-radius: 4px; padding: 10px; opacity: 0.5; }
 +
 +
.blockk:hover h2 {opacity: 0.9 !important; transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease; }
 +
 +
#text h4 {text-decoration: none; font-size: 14px; font-weight: normal !important; border-bottom: 0px; display: block;  padding-left: 5px; padding-top: 5px; padding-bottom: 5px; line-height: 2; text-align: justify; color: #272a2b}
 +
 +
.citecryan {background: #fff; border-radius: 4px; opacity: 0.8; margin-left: 340px; padding: 10px;}
 +
 +
.citecryan:hover {opacity: 1; transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease;}
 +
 +
.constructs {border-radius: 4px;  margin: 0 auto; text-align: justify; font-size: 15px; width: 60%; z-index: 3; opacity: 1;  padding: 40px; line-height: 1.4; padding-top: 25px;}
 +
#text a {color: #33726c; font-weight: bold; text-decoration: none;}
 +
#text a:hover {color: #33726c; font-weight: bold; text-decoration: none;}
 +
#text a:visited {color: #33726c; font-weight: bold; text-decoration: none;}
 +
 +
 +
 +
 +
.content .tooltip {
 +
  background-color: #fff;
 +
border: 1px #22343C solid;
 +
  border-radius: 4px;
 +
  padding: 3px;
 +
  position: absolute;
 +
  width: 300px;
 +
  z-Index: 99999;
 +
  display: none;
 +
letter-spacing: 1px;
 +
line-height: 1;
 +
font-size: 11px;
 +
}
 +
 +
.tooltip a {color: #22343C;}
 +
.tooltip {color: #22343C;}
 +
 +
.content {
 +
  position: relative;
 +
}
 +
 +
.content {color: #d67166;}
 +
 +
.bigtitle {width: 42%; top: 0; margin: 0 auto; font-size: 16px; background-image: url('https://static.igem.org/mediawiki/2015/4/43/UCL_headercircle.png'); text-align: center; line-height: 2;
 +
    background-position: top center;  background-repeat: no-repeat; background-size: contain; padding: 9%; position: relative; margin-bottom: 100px; color: #22343C;}
 +
 +
.bigtitle a {color: #22343C; text-decoration: none;}
 +
 +
.title2 {font-family: League Script; font-size: 380%;}
 +
 +
.titlecircle {width: 85%; margin: 0 auto; padding-top: 12%;}
 +
 +
.arrow {font-size: 50px;}
 +
 +
 +
.buttonblack {
 +
text-transform: uppercase;
 +
  font-size: 14px;
 +
  font-weight: normal;
 +
  line-height: 1.428571429;
 +
  text-align: center;
 +
  white-space: nowrap;
 +
  vertical-align: middle;
 +
  border-radius: 4px;
 +
transition-property: background-color, color, border-color;
 +
  transition-duration: 1s;
 +
  transition-timing-function: ease;
 +
            color: #FFFFFF;
 +
    padding: 10px 16px;
 +
  text-decoration: none;
 +
font-family: Raleway;
 +
letter-spacing: 2px;
 +
font-weight: bold;}
 +
 +
 +
@media(max-width:1280px){
 +
 +
.bigtitle {font-size: 15px;}
 +
.bigtitle {width: 50%;}
 +
.buttonblack {padding: 5px 11px;}
 +
 +
}
 +
 +
 +
@media(max-width:1152px){
 +
 +
.bigtitle {font-size: 14px;}
 +
.bigtitle {width: 52%;}
 +
.titlecircle {width: 80%;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
}
 +
 +
 +
@media(max-width:1024px){
 +
.bigtitle {width: 58%;}
 +
.titlecircle {padding-top: 15%; width: 75%;}
 +
#wrapper {top: 100px;}
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.7px;}
 +
#header2:before {background-image: none;}
 +
#mobilebackground {display: block;}
 +
.constructs {font-size: 15px;}
 +
 +
 +
}
 +
 +
@media(max-width:960px){
 +
 +
.bigtitle {font-size: 13px; width: 65%;}
 +
.arrow {font-size: 40px;}
 +
.buttonblack {padding: 5px 5px;}
 +
#submenu {width: 110%; margin-left: -5%;}
 +
.constructs img {float: none !important; margin: 0 auto !important; min-width: 60% !important;}
 +
.constructs {text-align: center;}
 +
}
 +
 +
 +
@media(max-width:910px){
 +
}
 +
 +
@media(max-width:850px){
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.3px;}
 +
.buttonblack {padding: 4px 3px;}
 +
#submenu {width: 112%; margin-left: -6%;}
 +
.constructs img {min-width: 80% !important;}
 +
 +
 +
 +
 +
}
 +
 +
 +
 +
@media(max-width: 768px){
 +
.bigtitle {width: 90%; font-size: 13px; padding: 13%; margin-left: -7%;}
 +
.bigtitle p { font-size: 13px; margin-top: -20px !important;}
 +
.titlecircle {width: 70%; padding-top: 8%;}
 +
a.buttonblack {font-size: 9px; letter-spacing: 1.3px;}
 +
#submenu {width: 80%; margin: 0 auto;}
 +
.buttonblack {line-height: 3.8;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
.citecryan {margin-left: 50px;}
 +
 +
}
 +
 +
 +
 +
 +
@media(max-width:680px){
 +
#wrapper {width: 100%;}
 +
#text {margin: 50px 25px 0 25px;}
 +
#text h4 {font-size: 13px;}
 +
.constructs {font-size: 13px;}
 +
.bigtitle p { font-size: 13px; }
 +
.titlecircle {width: 60%;}
 +
#submenu {width: 70%; margin: 0 auto;}
 +
.buttonblack {line-height: 3.8;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
 +
}
 +
 +
@media(max-width:640px){
 +
.arrow {font-size: 30px;}
 +
.titlecircle {width: 60%;}
 +
#submenu {width: 80%; margin: 0 auto;}
 +
 +
 +
}
 +
 +
 +
 +
@media(max-width:530px){
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.8px;}
 +
.bigtitle p {}
 +
.titlecircle {width: 60%;}
 +
.title2 {font-size: 320%;}
 +
#text h4 {line-height: 1.7;}
 +
.citecryan {margin-left: 10px;}
 +
 +
 +
}
 +
 +
@media(max-width: 480px) {
 +
.bigtitle p { font-size: 13px; text-align: center;}
 +
.titlecircle {width: 70%;}
 +
#submenu {width: 90%; margin: 0 auto;}
 +
 +
 +
 +
}
 +
 +
@media(max-width: 410px) {
 +
.titlecircle {width: 75%;}
 +
.title2 {font-size: 300%;}
 +
.bigtitle p {line-height: 1.5 !important;}
 +
}
 +
 +
@media(max-width: 380px) {
 +
.titlecircle {width: 75%; padding-top: 10%;}
 +
.bigtitle p {font-size: 12px; line-height: 1.2 !important; letter-spacing: 1px;}
 +
.title2 {font-size: 260%;}
 +
 +
}
 +
 +
 +
@media(max-width: 360px) {
 +
.titlecircle {width: 80%;}
 +
.title2 {font-size: 240%;}
 +
.buttonblack {width: 250px; display: block; line-height: 1.5; margin: 5px auto;}
 +
}
 +
 +
.idea:before {content: ""; background: url('https://static.igem.org/mediawiki/2015/d/d6/UCL_Screenshot_2015-09-03_at_00.png'); background-position: top right; opacity: 0.2; top: 0px; left: 0px; width: 100%; height: 300px; position: absolute; background-repeat: no-repeat; z-index: 1; pointer-events: none;}
 +
 +
 +
 +
.idea {line-height: 2; position: relative; z-index: 2; margin-top: 15px; padding-top: 20px;  border-top: 0px dotted #FF9B8E; border-bottom: 0px dotted #FF9B8E; padding-bottom: 20px;}
 +
 +
 +
 +
 +
.constructsdiv {position: relative; z-index: 1; width: 140%; height: 100%; background-color: #fff; opacity: 1;    margin-left: -20%;
 +
border-radius: 15px;  box-shadow: 0px 0px 20px #eaeaea;}
 +
 +
 +
 +
 +
 +
 +
.constructsdiv:before {content: ""; background-image: url('https://static.igem.org/mediawiki/2015/4/40/UCLScreenshot_2015-09-03_at_13.png'); background-repeat: no-repeat; background-position: top 0% left 9%; opacity: 0.3;  top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; background-repeat: no-repeat; z-index: 2; pointer-events: none;    transition-duration: 1s; transition-property: opacity;
 +
    transition-timing-function: ease; }
 +
 +
 +
.constructsdiv:hover:before {opacity: 1; transition-duration: 1s; transition-property: opacity;
 +
    transition-timing-function: ease;}
 +
 +
 +
</style>
 
</head>
 
</head>
−
<body>
+
 
−
<div id="main">
+
<div id="mobilebackground"></div>
−
<h5>Gut-on-Chip</h5>
+
<div id="header2">
−
<br>
+
 
−
<h4>Introduction</h4>
+
<div id="wrapper">
 +
 
 +
<div class="bigtitle">
 +
<div class="titlecircle"><span class="title2">Gut-on-a-chip</span><span class="arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#submenu" >&#x25BC; </a></span>
 +
 
 +
 
 +
</div> </div>  
 +
<div id="submenu" style="padding-top: 150px;">
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#background" class="buttonblack">Introduction</a>       
 +
<a data-scroll data-options='{ "easing": "linear" }' href="#constructs" class="buttonblack">Monkey kidney fibroblast</a>
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#modelling" class="buttonblack">Modelling</a>
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#characterization" class="buttonblack">Protocol</a>
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#intro1" class="buttonblack">Results</a>
 +
       
 +
 
 +
</div>
 +
 
 +
<div id="text">
 +
<div class="blockk">
 +
<h2><span id="background" style="padding-top: 150px;">Introduction</span> </h2>
 
<p>To demonstrate a functional prototype of our project, we decided to show our system working under real-world conditions simulated in the lab using a Gut-on-a-Chip design similar to the one described in:  
 
<p>To demonstrate a functional prototype of our project, we decided to show our system working under real-world conditions simulated in the lab using a Gut-on-a-Chip design similar to the one described in:  
  
Line 39: Line 451:
 
The microfluidics device will be initially tested using Monkey Kidney Epithelial Cells, which are very similar to Intestinal Epithelial Cells (Caco-2). Experiments were carried to determine the optimum seeding cell density of the cells, and the time they need to adhere.
 
The microfluidics device will be initially tested using Monkey Kidney Epithelial Cells, which are very similar to Intestinal Epithelial Cells (Caco-2). Experiments were carried to determine the optimum seeding cell density of the cells, and the time they need to adhere.
 
<br>
 
<br>
−
<h4>Monkey Kidney Fibroblast Cell Culture:</h4>
+
 
 +
<div id="text">
 +
<div class="blockk">
 +
<h2><span id="constructs" style="padding-top: 150px;">Monkey Kidney Fibroblast Cell Culture:</span> </h2>  
 
<br>
 
<br>
 
<img src="https://static.igem.org/mediawiki/2015/d/d6/08-25-2015_post_cd73_bead_trypsin_replate_0004.png" alt="Monkey kidney cells1"style="height:200px;">
 
<img src="https://static.igem.org/mediawiki/2015/d/d6/08-25-2015_post_cd73_bead_trypsin_replate_0004.png" alt="Monkey kidney cells1"style="height:200px;">

Revision as of 16:02, 11 September 2015

Gut-on-a-chip ▼

Introduction

To demonstrate a functional prototype of our project, we decided to show our system working under real-world conditions simulated in the lab using a Gut-on-a-Chip design similar to the one described in:
http://pubs.rsc.org/en/Content/ArticleLanding/2012/LC/c2lc40074j#!divAbstract

The idea is to model the rate at which our genetically engineered bacterial culture (E. Coli Nissle) grows and colonizes the gut, and to characterize its expression of 5-HTP, a serotonin precursor that acts as an anti-depressant. With the assistance of Dr. Chiang, from UCL’s Microfluidics Lab, we designed unsing SolidWorks a 3D version of the chip model described in the attachment.


SolidWorks1 SolidWorks2

Dr. Paul Sharp, who works with human intestinal epithelial cells at Kings College London, kindly agreed to collaborate with us on this project. He gave us the Caco-2 cells we needed, and adviced us on the best ways to culture them. After attending a lecture by Dr. Marques (UCL Biochemical Engineering), we decided to improve the original Gut-on-a-Chip designed at Harvard University by making it a more realistic mimic of reality and more financially feasible.The new design doesn't require a porous membrane, and is inspired by Dr. Marco's bulging bioreactor. It has been designed under the guidance of Dr. Paul Sharp. In addition to replicating the peristaltic motion of the longitudinal muscles in the intestines like Harvard's design, this model will also replicate the motions created by circular muscles.

GoC Design1 GoC Design2

The microfluidics device will be initially tested using Monkey Kidney Epithelial Cells, which are very similar to Intestinal Epithelial Cells (Caco-2). Experiments were carried to determine the optimum seeding cell density of the cells, and the time they need to adhere.

Monkey Kidney Fibroblast Cell Culture:


Monkey kidney cells1 Monkey kidney cells2 Monkey kidney cells2 Monkey kidney cells2

Protocol for Determining Optimum Seeding Cell Density:

MATERIALS

  • Cells at 70% confluency (take cells only when ready)
  • Medium: DMEM (1x) + GlutaMAXTM-I (Life Technologies, 61965-026) + 10% FBS
  • 10 mL PBS without Ca and Mg (Lonza, BE17-516F)
  • Trypsin/EDTA (TE) solution
  • 25 mL cell flasks x 2
  • 25 mL centrifuge tube (yellow cap) x 1
  • 5 mL pipettes x 5
  • 10 mL pipettes x 5
  • 1 mL micropipette
  • Tips for 1 mL micropipette
  • Pipette dispenser
  • Tissue paper roll
  • Ethanol 70%
  • Detergent
  • Markers
  • Rack
  • USBs
  • Waste disposal flask
  • Cell culture in well plates or coverslips
  • 4% paraformaldehyde
  • PBS without Ca and Mg (Lonza, BE17-516F)
  • PBS + 0.1% Triton X-100
  • PBS + 3% BSA
  • :3000 DAPI or Hoechst in PBS
  • Aluminum foil
  • Markers
  • Rack
  • USBs
  • Confocal microscope
  • Safety glasses

METHODS
    Preparation
  1. Warm medium (DMEM (1x) + GlutaMAXTM-I + 10% FBS), PBS and TE solution in a water bath @ 37ºC
  2. Spray tubes, bottles, racks and everything that goes inside the hood with 70% ethanol
    3. Taking off the medium
  3. Take off almost all the medium inside the flask
    4. Washing the cells
  4. Wash gently the cells with PBS
    5. Trypsinization

  5. Cover the flask with 3-5 mL with Trypsin/EDTA solution
  6. Incubate for 3 - 5 minutes @ 37ºC
  7. Disperse the cells by hitting the flask (once)
  8. Watch in the microscope to confirm trypsinization step
  9. Add 5 mL medium to inactivate trypsin
  10. Centrifuge 400 x g for 5 minutes @ 21 ºC (Eppendorf 5810 R)

    11. Adding new medium

  11. Remove medium + TE without touching the pellet
  12. Add 5 mL of medium to the centrifuge tube with cells
  13. Cells were pipetted into a 96 well plate with cell densities reducing by half in each following column (8 replicates)

    14. Cell fixation
  14. Fix the cells in 4% paraformaldehyde for 15 min @ RT
  15. Wash with PBS three times (3 times, 5 minutes each)

    16. Cell permeabilization for intracellular biomarkers

  16. Incubate with PBS + 0.1% Triton X-100 for 10 minutes @ RT
  17. Wash with PBS three times (5 minutes each)

    18. Blocking

  18. Block with PBS + 3% BSA for 1 hour @ RT
  19. Wash with PBS (3 times, 5 minutes each)

    20. DAPI/Hoechst addition

  20. Incubate the cells on 1:3000 DAPI for 5 minutes @ 4 ºC
  21. Wash with PBS (3 times, 5 minutes each)

    22. Imaging

  22. Cells were visualized by confocal microscopy. Images were aquired at fluorescence peak excitation and emission wavelengths of 360 nm and 460 nm, respectively.


Column: Cell Count (Cells per ul)

50000 25000 12500 6250 3125 1563
781 391 195 98 49 Negative Control

Protocol for Determining Adherence Time:


  1. Repeat steps 1 to 12 as described in the protocol above.
  2. Seed 6000 cells into 3 wells respectively of 4 96 well plates.
  3. Repeat steps 14 to 24 for one plate at intervals of 1 hour.

Adherence Results

1 hour

2 hours

3 hours

4 hours