Difference between revisions of "Team:HZAU-China/Basic Part"

(Prototype team page)
 
Line 1: Line 1:
−
{{HZAU-China}}
+
{{HZAU-China/Bootstrap}}
 
<html>
 
<html>
  
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 +
    <link href="bootstrap.min.css" rel="stylesheet">
 +
    <!-- 导航栏CSS -->
 +
    <style type="text/css">
 +
        #sideMenu,
 +
        #top_title,
 +
        #team_submenu {
 +
            display: none;
 +
        }
  
−
<div class="column full_size judges-will-not-evaluate">
+
        #HQ_page p {
−
<h3>★  ALERT! </h3>
+
            margin: 0 !important;
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2018.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2018.igem.org/Judging/Awards"> award listed below</a>. </p>
+
        }
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2018.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
−
</div>
+
  
 +
        #content {
 +
            padding: 0px;
 +
            width: 100%;
 +
            margin-top: 0px;
 +
            margin-left: 0px;
 +
        }
  
−
<div class="clear"></div>
+
        #bodyContent h1,
 +
        #bodyContent h2,
 +
        #bodyContent h3,
 +
        #bodyContent h4,
 +
        #bodyContent h5 {
 +
            margin-bottom: 0px;
 +
        }
  
 +
        #team_name {
 +
            display: none
 +
        }
  
 +
        .global_wrapper {
 +
            padding: 0px 0px 0px 0px;
 +
        }
  
−
<div class="column full_size">
+
        #top_menu_14 {
−
<h1>Basic Parts</h1>
+
            height: 16px;
−
<p>
+
        }
−
A <b>basic part</b> is a functional unit of DNA that cannot be subdivided into smaller component parts. <a href="http://parts.igem.org/wiki/index.php/Part:BBa_R0051">BBa_R0051</a> is an example of a basic part, a promoter regulated by lambda cl.
+
−
</p>
+
  
−
<p>Most genetically-encoded functions have not yet been converted to BioBrick parts. Thus, there are <b>many</b> opportunities to find new, cool, and important genetically encoded functions, and refine and convert the DNA encoding these functions into BioBrick standard biological parts. </p>
+
        * {
−
</div>
+
            margin: 0;
 +
            padding: 0;
 +
            list-style: none;
 +
            list-style-type: none;
 +
            text-decoration: none !important;
 +
        }
  
 +
        body {
 +
            margin: 0;
 +
            padding: 0;
 +
            background-color: #F3F3F3;
 +
            font-size: 16px;
 +
            font-family: Arial, Verdana, Sans-serif;
 +
            letter-spacing: 0;
 +
            color: #FFFFFF;
 +
        }
  
−
<div class="column full_size">
+
        .daohang {
−
<div class="highlight decoration_background">
+
            background-color: #323643;
−
<h3>Note</h3>
+
            position: relative;
−
<p>This page should list all the basic parts your team has made during your project. You must add all characterization information for your parts on the Registry. You should not put characterization information on this page. Remember judges will only look at the first part in the list for the Best Basic Part award, so put your best part first!</p>
+
            color: #ffffff;
−
</div>
+
            height: 64px;
−
</div>
+
            top: -2px;
 +
        }
  
 +
        .logo-daohang {
 +
            height: 64px;
 +
            left: 10%;
 +
            float: left;
 +
            position: relative;
 +
        }
  
−
<div class="column full_size">
+
        .daohang a {
−
<h3>Best Basic Part Special Prize</h3>
+
            display: block;
 +
            text-decoration: none;
 +
        }
  
−
<p> To be eligible for this award, this part must adhere to <a href="http://parts.igem.org/DNA_Submission">Registry sample submission guidelines</a> and have been sent to the Registry of Standard Biological Parts. If you have a part you wish to nominate your team for this <a href="https://2018.igem.org/Judging/Awards">special prize</a>, make sure you add your part number to your <a href="https://2018.igem.org/Judging/Judging_Form">judging form</a> and delete the box at the top of this page.
+
        .daohang .shade {
 +
            position: absolute;
 +
            width: 100%;
 +
            height: 160px;
 +
            top: 64px;
 +
            left: 0;
 +
            z-index: 1;
 +
            background-color: #EEEEEE;
 +
            box-shadow: 0 5px 15px #CCCCCC;
 +
            display: none;
 +
            border-bottom: #ffffff solid 1px;
 +
            border-bottom: rgba(255, 255, 255, 0.3) solid 1px;
 +
        }
  
−
<br><br>
+
        .daohang .caidan {
−
<b>Please note:</b> Judges will only look at the first part number you list, so please only enter ONE (1) part number in the judging form for this prize. </p>
+
            position: absolute;
−
</div>
+
            top: 0;
 +
            right: 10%;
 +
            margin: 0;
 +
            z-index: 2;
 +
            padding: 0;
 +
            list-style: none;
 +
            width: 730px;
 +
            float: right;
 +
            overflow: hidden;
 +
            height: 64px;
 +
        }
  
 +
        .daohang .caidan>li {
 +
            padding: 0;
 +
            float: left;
 +
            margin: 0;
 +
            text-align: center;
 +
            height: 224px;
 +
        }
  
 +
        .daohang .shortName {
 +
            width: 110px;
 +
        }
  
 +
        .daohang .longName {
 +
            width: 170px;
 +
        }
  
 +
        .daohang .nav_head {
 +
            height: 64px;
 +
            line-height: 64px;
 +
            color: #ffffff;
 +
            font-size: 16px !important;
 +
        }
 +
 +
        .daohang .xsjPic {
 +
            display: inline-block;
 +
            width: 10px;
 +
            height: 10px;
 +
            vertical-align: middle;
 +
            background-size: 100% 100%;
 +
            background-image: url("https://static.igem.org/mediawiki/2018/6/63/T--HZAU-China--xsj.svg")
 +
        }
 +
 +
        .daohang .xjtPic {
 +
            display: inline-block;
 +
            width: 10px;
 +
            height: 10px;
 +
            vertical-align: middle;
 +
            background-size: 100% 100%;
 +
            background-image: url("https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg")
 +
        }
 +
 +
        .daohang a:hover span {
 +
            transform: rotateY(180deg);
 +
            -webkit-transform: rotateY(180deg);
 +
            -moz-transform: rotateY(180deg);
 +
            -o-transform: rotateY(180deg);
 +
            -ms-transform: rotateY(180deg);
 +
            transition: all 0.5s ease-in-out;
 +
            -webkit-transition: all 0.5s ease-in-out;
 +
            -moz-transition: all 0.5s ease-in-out;
 +
            -o-transition: all 0.5s ease-in-out;
 +
        }
 +
 +
        .daohang .item {
 +
            font-size: 16px;
 +
            height: 40px;
 +
            line-height: 40px;
 +
            color: #333333;
 +
            position: relative;
 +
        }
 +
 +
        .daohang .caidan:hover {
 +
            height: 264px;
 +
            transition: height 0.3s;
 +
        }
 +
 +
        .daohang .caidan:hover+.shade {
 +
            display: block;
 +
        }
 +
 +
        .daohang .caidan>li.hiLight:hover {
 +
            background-color: #ffffff;
 +
        }
 +
 +
        .daohang .caidan>li:hover .nav_head {
 +
            background-color: #EA0D04;
 +
        }
 +
 +
        .daohang .caidan>li:hover .item {}
 +
 +
 +
        .daohang .shortName .item:before {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 80px;
 +
            height: 1px;
 +
            bottom: 5px;
 +
            left: 15px;
 +
            background-color: #CCCCCC;
 +
        }
 +
 +
        .daohang .shortName .item:hover:after {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 80px;
 +
            height: 2px;
 +
            bottom: 5px;
 +
            left: 15px;
 +
            background-color: #f51720;
 +
        }
 +
 +
        .daohang .longName .item:before {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 130px;
 +
            height: 1px;
 +
            bottom: 5px;
 +
            left: 20px;
 +
            background-color: #CCCCCC;
 +
        }
 +
 +
        .daohang .longName .item:hover:after {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 130px;
 +
            height: 2px;
 +
            bottom: 5px;
 +
            left: 20px;
 +
            background-color: #f51720;
 +
        }
 +
 +
        @media screen and (max-width: 1200px) {
 +
            .logo-daohang {
 +
                left: 3%;
 +
            }
 +
 +
            .daohangyi {
 +
                font-size: 12px;
 +
            }
 +
        }
 +
 +
        @media screen and (max-width: 880px) {
 +
 +
            .daohang .caidan {
 +
                right: 0;
 +
                width: 100%;
 +
            }
 +
 +
            .logo-daohang {
 +
                display: none;
 +
            }
 +
 +
            .daohang .shortName {
 +
                width: 15vw;
 +
            }
 +
 +
            .daohang .longName {
 +
                width: 25vw;
 +
            }
 +
 +
            .daohangyi img {
 +
                display: none;
 +
            }
 +
 +
            .daohang .longName .item:before {
 +
                width: 150px;
 +
                left: 20px;
 +
            }
 +
 +
            .daohang .longName .item:hover:after {
 +
                width: 150px;
 +
                left: 20px;
 +
            }
 +
        }
 +
    </style>
 +
    <!-- 内容CSS -->
 +
    <style class="text/css">
 +
        .clearfix:after {
 +
            content: ".";
 +
            display: block;
 +
            height: 0;
 +
            clear: both;
 +
            visibility: hidden;
 +
 +
        }
 +
 +
        .neirong {
 +
            width: 100%;
 +
            height: auto;
 +
            background-color: #F3F3F3;
 +
        }
 +
 +
        .zhengwen {
 +
            width: 80%;
 +
            /* height: auto; */
 +
            margin: 20px 40px 0 0;
 +
            /* right: 2%; */
 +
            /* top: 90px; */
 +
            padding: 20px 3%;
 +
            float: right;
 +
            /* position: relative; */
 +
            background-color: #FFF;
 +
            box-shadow: 0 1px 3px #676767;
 +
            /* border: 2px solid black; */
 +
            /* border-radius: 3px; */
 +
            /* overflow: hidden; */
 +
            /* display: block; */
 +
            /* font-family: Arial, Verdana, Sans-serif; */
 +
        }
 +
 +
        .cebian {
 +
            width: 200px;
 +
            /* height: 80vh; */
 +
            float: left;
 +
            /* left: 1vw; */
 +
            top: 150px;
 +
            position: fixed;
 +
            box-shadow: 0 1px 3px #676767;
 +
            /* border:2px solid black */
 +
            /* background-color: #323643 */
 +
        }
 +
 +
        .zhengwen p{
 +
            text-align: justify !important;
 +
            font-family:  'Times New Roman',Helvetica,'Open Sans',  Arial, sans-serif !important;
 +
            color: #3B3B3B;
 +
            font-size: 26px !important;
 +
            padding-right: 20px;
 +
        }
 +
 +
        .daimg {
 +
            width: 100%;
 +
            height: auto;
 +
            margin: 20px 0;
 +
            box-shadow: 0 1px 3px #676767;
 +
        }
 +
 +
        .h1 {
 +
            height: 80px;
 +
            line-height: 80px;
 +
            font-weight: bold;
 +
            font-family: 'Product Sans', sans-serif;
 +
            font-size: 40px;
 +
            color: #3B3B3B;
 +
            border-bottom: 2px solid #676767;
 +
            margin-bottom: 20px;
 +
        }
 +
 +
        .h2 {
 +
            height: 40px;
 +
            line-height: 40px;
 +
            font-weight: bold;
 +
            /* font-weight: bold; */
 +
            font-family: 'Product Sans', sans-serif;
 +
            font-size: 30px;
 +
            color: #484848;
 +
            /* margin-bottom: 20px; */
 +
        }
 +
 +
        .h3 {
 +
            height: 30px;
 +
            line-height: 30px;
 +
            font-weight: bold;
 +
            /* font-weight: bold; */
 +
            font-family: 'Product Sans', sans-serif;
 +
            font-size: 24px;
 +
            color: #484848;
 +
            /* margin-bottom: 20px; */
 +
        }
 +
       
 +
        table {
 +
            color: #3B3B3B;
 +
        }
 +
 +
        .zhengwen .tuandui_list {
 +
            position: relative;
 +
            margin-top: 40px;
 +
            height: 520px;
 +
            overflow: hidden;
 +
        }
 +
 +
        .tuandui_list>li {
 +
            padding: 0;
 +
            width: 20%;
 +
            float: left;
 +
            position: relative;
 +
            margin: 0 2.4%;
 +
            text-align: center;
 +
        }
 +
 +
        .zhengwen .laoshi_list {
 +
            position: relative;
 +
            margin-top: 40px;
 +
            height: 430px;
 +
        }
 +
 +
        .laoshi_list>li {
 +
            padding: 0;
 +
            width: 20%;
 +
            float: left;
 +
            position: relative;
 +
            margin: 0 2.4%;
 +
            text-align: center;
 +
        }
 +
 +
        .duiyuan {
 +
            margin: 20px 0;
 +
            /* border: 1px solid red; */
 +
        }
 +
 +
        .laoshi {
 +
            margin: 20px 0;
 +
        }
 +
 +
        .duiyuan img {
 +
            width: 100%;
 +
            height: auto;
 +
            border-top: 3px solid #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
        }
 +
 +
        .laoshi img {
 +
            width: 100%;
 +
            height: 50vh;
 +
            border-top: 3px solid #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
        }
 +
 +
        .duiyuan .xingming {
 +
            width: 100%;
 +
            height: 50px;
 +
            line-height: 50px;
 +
            background-color: #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
            font-size: 16px;
 +
            color: white;
 +
            box-shadow: 0 1px 3px #CCCCCC;
 +
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 +
            font-size: 24px;
 +
            font-weight: bold;
 +
            text-align: center;
 +
        }
 +
 +
        .laoshi .xingming {
 +
            width: 100%;
 +
            height: 50px;
 +
            line-height: 50px;
 +
            background-color: #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
            font-size: 16px;
 +
            color: white;
 +
            box-shadow: 0 1px 3px #CCCCCC;
 +
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 +
            font-size: 24px;
 +
            font-weight: bold;
 +
            text-align: center;
 +
        }
 +
 +
        .duiyuan .jieshao {
 +
            width: 100%;
 +
            height: 200px;
 +
            background-color: #f6eee0;
 +
            border-bottom: 3px solid #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
            /* border-bottom-left-radius: 5px;
 +
            border-bottom-right-radius: 5px; */
 +
        }
 +
 +
        .duiyuan .jieshao .saohua {
 +
            padding: 10px 4px 0px 4px !important;
 +
            color: black;
 +
            font-family: Arial;
 +
            font-style: italic;
 +
            font-size: 15px !important;
 +
            list-style-type: none;
 +
            text-align: justify;
 +
            line-height: 18px;
 +
        }
 +
    </style>
 +
    <!-- 滚动菜单栏CSS -->
 +
    <style>
 +
        #float01 {}
 +
 +
        #float02 {}
 +
 +
        div.floatCtro {
 +
            width: 100%;
 +
            height: 200px;
 +
            margin: 0;
 +
            position: relative;
 +
            background: #fff;
 +
 +
        }
 +
 +
        .daohangyi {
 +
            display: block;
 +
            width: 100%;
 +
            height: 40px;
 +
            color: #ffffff !important;
 +
            font-size: 16px;
 +
            background-color: #323643;
 +
            border-bottom: 1px solid black;
 +
            /* border-radius: 5px; */
 +
            text-decoration: none !important;
 +
        }
 +
 +
        div.floatCtro .daohanger {
 +
            width: 100%;
 +
            text-align: justify !important;
 +
            height: 45px;
 +
            line-height: 45px;
 +
            font-family: Arial;
 +
            font-size: 14px !important;
 +
            color: #676767;
 +
            margin: 0;
 +
            padding-left: 8%;
 +
            cursor: pointer;
 +
            background: #fff;
 +
        }
 +
 +
        div.floatCtro a {
 +
            display: inline-block;
 +
            display: none;
 +
            width: 100%;
 +
            height: 40px;
 +
            /* margin: 10px 0 0 0; */
 +
            background: #FFF;
 +
            color: #000 !important;
 +
            vertical-align: middle;
 +
            cursor: pointer;
 +
        }
 +
 +
        div.floatCtro a span {
 +
            display: block;
 +
            height: 44px;
 +
            line-height: 44px;
 +
            font-family: Arial;
 +
            font-size: 16px;
 +
            padding-left: 8%;
 +
        }
 +
 +
        div.floatCtro a:hover {
 +
            /* background: #76b39d; */
 +
            color: #EA0D04 !important;
 +
            zoom: 1;
 +
        }
 +
 +
        /* .cebian a:hover {
 +
            color: #f6eee0 !important;
 +
        } */
 +
 +
        div.floatCtro .daohanger:hover {
 +
            /* background: #76b39d; */
 +
            color: #1fa67a;
 +
            text-decoration: underline !important;
 +
        }
 +
 +
        div.floatCtro .daohanger.cur {
 +
            /* background: #1fa67a; */
 +
            color: #1fa67a;
 +
        }
 +
 +
        .biaoti {
 +
            line-height: 40px;
 +
            width: 50%;
 +
            margin-left: 6%;
 +
            text-align: center;
 +
            text-decoration: none !important;
 +
        }
 +
 +
        .daohangyi img {
 +
            display: inline-block;
 +
            width: 12px;
 +
            height: 12px;
 +
            vertical-align: middle;
 +
            background-size: 100% 100%;
 +
 +
        }
 +
        .cebian div:hover img{
 +
            transform: rotateY(180deg);           
 +
            -webkit-transform: rotateY(180deg);           
 +
            -moz-transform: rotateY(180deg);           
 +
            -o-transform: rotateY(180deg);           
 +
            -ms-transform: rotateY(180deg);
 +
            transition: all 0.5s ease-in-out;           
 +
            -webkit-transition: all 0.5s ease-in-out;           
 +
            -moz-transition: all 0.5s ease-in-out;           
 +
            -o-transition: all 0.5s ease-in-out;
 +
        }
 +
        .cebian a:hover img{
 +
            transform: rotate(360deg);           
 +
            -webkit-transform: rotate(360deg);           
 +
            -moz-transform: rotate(360deg);           
 +
            -o-transform: rotate(360deg);           
 +
            -ms-transform: rotate(360deg);
 +
            transition: all 0.5s ease-in-out;           
 +
            -webkit-transition: all 0.5s ease-in-out;           
 +
            -moz-transition: all 0.5s ease-in-out;           
 +
            -o-transition: all 0.5s ease-in-out;
 +
        }
 +
 +
        @media screen and (max-width: 1000px) {           
 +
         
 +
            .daohangyi {
 +
                font-size: 14px;
 +
            }
 +
        }
 +
 +
        @media screen and (max-width: 880px) {
 +
 +
            .daohangyi img {
 +
                display: none;
 +
            } 
 +
           
 +
            .laoshi img {
 +
                height: 30vh;
 +
            }
 +
        }
 +
    </style>
 +
    <!-- 折叠框CSS -->
 +
    <style>
 +
        .collapseDiv {
 +
          color: #333;
 +
          border-radius: 4px;
 +
          background-color: #F3F3F3;
 +
          border: 1px solid transparent;
 +
          border-color: #ddd;
 +
          box-shadow: 0 1px 3px black;
 +
          margin-top: 5px;
 +
          margin-bottom: 0;
 +
        }
 +
        .collapseDiv h3 {
 +
          font-size: 24px;
 +
          /* font-weight: bold; */
 +
          color: green;
 +
          border-color: #F3F3F3;
 +
          padding: 5px 15px 5px 18px;
 +
          background-color: #f5f5f5;
 +
          margin: 0;
 +
          border-radius: 5px;
 +
        }
 +
        .collapse_body {
 +
          background-color: #fff;
 +
          position: relative;
 +
          height: 0;
 +
          overflow: hidden;
 +
          -webkit-transition-timing-function: ease;
 +
          -o-transition-timing-function: ease;
 +
          transition-timing-function: ease;
 +
          -webkit-transition-duration: .35s;
 +
          -o-transition-duration: .35s;
 +
          transition-duration: .35s;
 +
          -webkit-transition-property: height, visibility;
 +
          -o-transition-property: height, visibility;
 +
          transition-property: height, visibility
 +
        }
 +
        .collapse_content {
 +
          font-size: 20px;
 +
          border-top: 1px solid #ddd;
 +
          background-color: #fff;
 +
          padding: 15px;
 +
        }
 +
    </style>
 +
 +
 +
</head>
 +
 +
<body>
 +
    <!-- 导航栏 -->
 +
    <nav class="daohang">
 +
        <a href="https://2018.igem.org/Team:HZAU-China"><img src="https://static.igem.org/mediawiki/2018/7/75/T--HZAU-China--logo-nav.png"
 +
                class="logo-daohang"></a>
 +
        <ul class="caidan">
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China">
 +
                    <span>Project</span>
 +
                    <span class="xsjPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Description">Description</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Design">Design</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Results">Results</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Demonstrate">Demonstrate</a>
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="#">
 +
                    <span>Wetlab</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Experiments">Experiments</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Improve">Improve</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/InterLab">InterLab</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Notebook">Notebook</a>
 +
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="#">
 +
                    <span>Drylab</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Model">Model</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Software">Software</a>
 +
            </li>
 +
            <li class="hiLight longName">
 +
                <a class="nav_head" href="#">
 +
                    <span>Human&nbsp;Practices</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Safety">Safety</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">Human Practices</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Public_Engagement">Public Engagement</a>
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="#">
 +
                    <span>About Us</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Team">Team</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Attributions">Attributions</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Collaborations">Collaborations</a>
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Parts">
 +
                    <span>Parts</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Basic_Part">Basic</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Composite_Part">Composite</a>
 +
            </li>
 +
        </ul>
 +
        <div class="shade"></div>
 +
    </nav>
 +
    <!-- 内容 -->
 +
    <div class="neirong clearfix">
 +
        <!-- 正文 -->
 +
        <div class="zhengwen">
 +
            <div id="float01" class="cur">
 +
                <div class="h1">N-terminal of Gasdermin D (1-275aa)</div>
 +
                <p>Pyroptosis is a form of lytic programmed cell death with inflammation. Recent studies reported that
 +
                    the N-terminal of Gasdermin D (pore-forming domain) acts as an effector of pyroptosis. Full length
 +
                    Gasdermin D is cleaved by Caspase 1 then release the PFD (pore-forming domain) which can
 +
                    oligomerize on the cell membrane. Formation of pores causes cell swelling, rupturing of the
 +
                    membrane and the massive leakage of cytosolic contents<sup>1</sup>.</p>
 +
                <div class="h2">The N-terminal of GSDMD execute the function of pyroptosis in cells</div>
 +
                <p>We respectively fused eGFP with GSDMD-N275 and GSDMD FL (full length). Then these plasmids were
 +
                    transfected into Hela GSDMD KO cell. Microscopy of cells transfecting GSDMD-N275 undergoing
 +
                    pyroptosis, but GSDMD full length did not induce pyroptosis (Figure 1). We also tested the cell
 +
                    viability through ATP assay (CellTiter-Glo® Luminescent Cell Viability Assay) and demonstrated that
 +
                    GSDMD-N275 and mutants of GSDMD FL had different ability to induce pyroptosis (Figure 2).</p>
 +
                <div style="width: 40%; margin: 30px auto">
 +
                    <img src="https://static.igem.org/mediawiki/2018/3/38/T--HZAU-China--interlab01.png" width=100% alt="">
 +
                </div>
 +
                <p>Figure 1. pCS2-eGFP-GSDMD FL（left）, pCS2-eGFP-GSDMD-N275（right） were transfected respectively into
 +
                    Hela G¬SDMD KO cells. Pyroptotic cells are pointed by red arrow.</p>
 +
                <div class="collapseDiv">
 +
                    <h3>Method</h3>
 +
                    <div class="collapse_body text-center">
 +
                        <div class="collapse_content text-success text-left">
 +
                            <b>Preparation of Cells for transfection</b><br>
 +
                            1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO<sub>2</sub> tissue-culture
 +
                            incubator.<br>
 +
                            2. Count the cells using a hemocytometer. Seed in 24-well (5 × 10^4 per well) and grow.<br>
 +
                            <b>Transfection</b><br>
 +
                            1. Dilute 0.5 μg DNA into 50 μl jetPRIME® buffer (supplied). Mix by vortexing.<br>
 +
                            2. Add 1 μl jetPRIME®, vortex for 10 s, spin down briefly.<br>
 +
                            3. Incubate for 10 min at RT.<br>
 +
                            4. Add 50μl of transfection mix per well drop wise onto the cells in serum containing
 +
                            medium, and distribute evenly.<br>
 +
                            5. Gently rock the plates back and forth and from side to side.<br>
 +
                            6. If needed, replace transfection medium after 4 h by cell growth medium and return the
 +
                            plates to the incubator.<br>
 +
                            Observation is taken after 1.5 h<br>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div style="width: 50%; margin: 30px auto">
 +
                    <img src="Bp/Figure2.png" width=100% alt="">
 +
                </div>
 +
                <p>Figure 2. pCS2-Flag-GSDMD FL, pCS2-Flag-GSDMD-N275, pCS2-Flag-GSDMD L290D, pCS2-Flag-GSDMD Y373,
 +
                    pCS2-Flag-GSDMD A377D were transfected respectively into 293T cells. ATP-based cell viability was
 +
                    measured (n=6).</p>
 +
                <div class="collapseDiv">
 +
                    <h3>Method</h3>
 +
                    <div class="collapse_body text-center">
 +
                        <div class="collapse_content text-success text-left">
 +
                            <b>Preparation of Cells for Infection</b><br>
 +
                            1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO<sub>2</sub> tissue-culture
 +
                            incubator.<br>
 +
                            2. Count the cells using a hemocytometer. Seed in 24-well (9× 10^4 per well) and grow
 +
                            overnight.<br>
 +
                            <b>Preparation of Bacteria</b><br>
 +
                            1. Grow bacteria overnight 16 h in 2 mL LB in a 15-mL tube. Incubate at 37 °C in a shaking
 +
                            incubator (200 rpm).<br>
 +
                            2. Subculture bacteria by transferring 300 μL of the overnight culture into 5 mL of LB in a
 +
                            loosely capped 50-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm) to late log
 +
                            phase.<br>
 +
                            3. Pellet 1 mL of the Salmonella subculture by centrifugation at 1000 g in a microfuge for
 +
                            2 min at room temperature.<br>
 +
                            4. Remove 900 μL of supernatant and gently resuspend the pellet in 900 μL PBS.<br>
 +
                            <b>Infection</b><br>
 +
                            1. Aspirate media and rinse the monolayer twice with PBS.<br>
 +
                            2. Inoculate cells with bacteria (MOI = 100) by adding bacteria directly to the
 +
                            cell-culture supernatant.<br>
 +
                            3. Incubate for 3 h at 37 °C in 5% CO<sub>2</sub>.<br>
 +
                            4. Aspirate media and rinse the monolayer twice with PBS.<br>
 +
                            5. Add fresh GM containing 100 μg/mL gentamicin and incubate at 37 °C in 5% CO<sub>2</sub>.<br>
 +
                            Observation is taken after 2 h.<br>
 +
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="h2">The N-terminal of GSDMD lyses bacteria</div>
 +
                <p>Expression of the N terminal of GSDMD fused with eGFP (eGFP-GSDMD-N275) was under the control of P<sub>tet</sub>
 +
                    in Δ<i>sifA</i> SL1344.
 +
                    The colony-forming unit (CFU) was measured for counting the number of viable bacteria (Figure 3).
 +
                    This result shows that eGFP-GSDMD-N275 exhibits cytotoxicity in bacteria.</p>
 +
                <div style="width: 30%; margin: 30px auto">
 +
                    <img src="Bp/Figure3.jpg" width=100% alt="">
 +
                </div>
 +
                <p>Figure 3. In each group, ATc (16μg/ml) was added into medium when bacteria grown to logarithmic
 +
                    phase (OD = 0.6~0.8). Vector refers to bacteria containing a high copy number plasmid which only
 +
                    expresses TetR under the control of P<sub>tet</sub>. Bacterial colony-forming units (CFU) for
 +
                    vector and eGFP-GSDMD-N275 are shown in the logarithmic form (log10) (n=3). </p>
 +
                <div class="collapseDiv">
 +
                    <h3>Method</h3>
 +
                    <div class="collapse_body text-center">
 +
                        <div class="collapse_content text-success text-left">
 +
                            1. Cell are cultured overnight in LB broth containing corresponding antibiotics, and
 +
                            dilute each 1 volume overnight cultures with 100 volume fresh LB containing antibiotics.
 +
                            Culture in 37℃ 200 rpm.<br>
 +
                            2. When OD reaching to 0.6-0.8, add anhydrotetracycline with final concentration of
 +
                            μg/ml to induce the expression of EGFP-GSDMD-N275.<br>
 +
                            3. Take 100 μl diluted culture to plate on LB agar plates containing appropriate
 +
                            concentration of antibody after 1.5 hours of induce.<br>
 +
                            Observation is taken overnight.<br>
 +
 +
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <div class="h2">The N-terminal of GSDMD from lytic bacteria induce cell pyroptosis.</div>
 +
                <p>Expression of the N-terminal of GSDMD fused with eGFP (eGFP-GSDMD-N275) was under the control of Tet
 +
                    promoter in Δ<i>sifA</i> SL1344. Hela GSDMD KO cell line were infected with ΔsifA SL1344. Inducer
 +
                    ATc
 +
                    (16μg/mL) were added after 3 h infection. Microscopy showed that eGFP-GSDMD-N275 located in
 +
                    cytoplasm after 5 min of induction and trigger pyroptosis after 30 min of induction (Figure 4).
 +
                    After 1.5 h of induction, Hela GSDMD KO cells undergo second necrosis caused by bacterial infection
 +
                    without inducer. Morphology of this process is similar to pyroptosis<sup>2</sup>. Thus, these
 +
                    population of
 +
                    ruptured cells were counted. There are two folds change between control group and induced group
 +
                    (Figure 5). So ruptured cells in induced group were triggered pyroptosis by eGFP-GSDMD-N275 but not
 +
                    by bacterial infection.</p>
 +
                <div style="width: 80%; margin: 0 auto">
 +
                    <img src="Bp/Figure4.png" width=100% alt="">
 +
                </div>
 +
                <p>Figure 4. Hela GSDMD KO cell line were infected with ΔsifA SL1344 containing high copy number
 +
                    plasmids which express eGFP-GSDMD-N275 under the control of ATc. Photos were captured after 5 min
 +
                    of induction. </p>
 +
                <div style="width: 50%; margin: 0 auto">
 +
                    <img src="Bp/Figure5.png" width=100% alt="">
 +
                </div>
 +
                <p>Figure 5. Ruptured cells in a field of view were counted.</p>
 +
                <div class="collapseDiv">
 +
                    <h3>Method</h3>
 +
                    <div class="collapse_body text-center">
 +
                        <div class="collapse_content text-success text-left">
 +
                            <b>Preparation of Cells for Infection</b><br>
 +
                            1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO<sub>2</sub> tissue-culture
 +
                            incubator.<br>
 +
                            2. Count the cells using a hemocytometer. Seed in 24-well (5 × 10^4 per well) and grow
 +
                            overnight.<br>
 +
                            <b>Preparation of Bacteria</b><br>
 +
                            1. Grow bacteria overnight 16 h in 2 mL LB in a 15-mL tube. Incubate at 37 °C in a shaking
 +
                            incubator (200 rpm).<br>
 +
                            2. Subculture bacteria by transferring 300 μL of the overnight culture into 5 mL of LB in a
 +
                            loosely capped 50-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm) to late log
 +
                            phase.<br>
 +
                            3. Pellet 1 mL of the Salmonella subculture by centrifugation at 1000 g in a microfuge for
 +
                            2 min at room temperature.<br>
 +
                            4. Remove 900 μL of supernatant and gently resuspend the pellet in 900 μL PBS.<br>
 +
                            <b>Infection</b><br>
 +
                            1. Aspirate media and rinse the monolayer twice with PBS.<br>
 +
                            2. Inoculate cells with bacteria (MOI = 100) by adding bacteria directly to the
 +
                            cell-culture supernatant.<br>
 +
                            3. Incubate for 2 h at 37 °C in 5% CO<sub>2</sub>.<br>
 +
                            4. Aspirate media and wash.<br>
 +
                            5. Add fresh GM containing 100 μg/mL gentamicin and 16 μg/mL incubate at 37 °C in 5% CO<sub>2</sub>.<br>
 +
                            Observation is taken after 5 min, 30 min, 1.5 h.<br>
 +
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div id="float02">
 +
                <div class="h1">Basic Part Table</div>
 +
                <div style="width: 80%; margin: 30px auto">
 +
                    <table class="table table-bordered table-hover">
 +
                        <thead>
 +
                            <th>Name</th>
 +
                            <th>Type</th>
 +
                            <th>Description</th>
 +
                            <th>Designer</th>
 +
                            <th>Length(bp)</th>
 +
                            </tr>
 +
                        </thead>
 +
                        <tbody>
 +
                            <tr>
 +
                                <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632002">BBa_K2632002</a></td>
 +
                                <td>Promoter</td>
 +
                                <td>Promoter sifA</td>
 +
                                <td>Mo Qiqin</td>
 +
                                <td>331</td>
 +
                            </tr>
 +
                            <tr>
 +
                                <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632003">BBa_K2632003</a></td>
 +
                                <td>Coding</td>
 +
                                <td>N-terminal of GasderminD (1-275aa)</td>
 +
                                <td>Zhujun Xia</td>
 +
                                <td>825</td>
 +
                            </tr>
 +
                            <tr>
 +
                                <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632004">BBa_K2632004</a></td>
 +
                                <td>Coding</td>
 +
                                <td>Full length Gasdermin D</td>
 +
                                <td>Zhujun Xia</td>
 +
                                <td>1455</td>
 +
                            </tr>
 +
                            <tr>
 +
                                <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632005">BBa_K2632005</a></td>
 +
                                <td>Coding</td>
 +
                                <td>L290D mutant of full length Gasdermin D</td>
 +
                                <td>Zhujun Xia</td>
 +
                                <td>1455</td>
 +
                            </tr>
 +
                            <tr>
 +
                                <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632007">BBa_K2632007</a></td>
 +
                                <td>Coding</td>
 +
                                <td>A377D mutant of full length Gasdermin D.</td>
 +
                                <td>Zhujun Xia</td>
 +
                                <td>1455</td>
 +
                            </tr>
 +
                        </tbody>
 +
                    </table>
 +
                </div>
 +
 +
 +
                <div class="h1">Reference</div>
 +
                <p>1 Ding, J. et al. Pore-forming activity and structural autoinhibition of the gasdermin family.
 +
                    Nature 535, 111-116, doi:10.1038/nature18590 (2016).</p>
 +
                <p style="padding-bottom:25px;">
 +
                    2 He, W. T. et al. Gasdermin D is an executor of pyroptosis and required for interleukin-1beta
 +
                    secretion. Cell research 25, 1285-1298, doi:10.1038/cr.2015.139 (2015).
 +
                </p>
 +
 +
            </div>
 +
        </div>
 +
                <!-- 侧边 -->
 +
                <div class="cebian">
 +
                    <!-- 滚动菜单栏 -->
 +
                    <div class="daohangyi">
 +
                        <span class="biaoti">Basic Part</span>
 +
                        <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg"
 +
                                alt=""></span>
 +
                    </div>
 +
                    <div class="floatCtro">
 +
                        <p class="daohanger">N-terminal of Gasdermin D</p>
 +
                        <!-- <p></p> -->
 +
                        <p class="daohanger">Basic Part Table</p>
 +
                        <a>
 +
                            <span>Back&nbsp;to&nbsp;Top</span>
 +
                        </a>
 +
                    </div>
 +
                    <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Composite_Part">
 +
                        <span class="biaoti">Composite Part</span>
 +
                        <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg"
 +
                                alt=""></span>
 +
                    </a>
 +
                    <!-- 滚动菜单栏 -->
 +
                </div>
 +
            </div>
 +
 +
            <!-- 滚动菜单栏jQuery -->
 +
            <script src="jquery.js" type="text/javascript"></script>
 +
            <script>
 +
                $(function () {
 +
                    var AllHet = $(window).height();
 +
                    var mainHet = $('.floatCtro').height();
 +
                    var fixedTop = (AllHet - mainHet) / 2
 +
                    //  $('div.floatCtro').css({top:fixedTop+'px'});
 +
                    $('div.floatCtro p').click(function () {
 +
                        var ind = $('div.floatCtro p').index(this) + 1;
 +
                        var topVal = $('#float0' + ind).offset().top;
 +
                        $('body,html').animate({ scrollTop: topVal }, 1000)
 +
                    })
 +
                    $('div.floatCtro a').click(function () {
 +
                        $('body,html').animate({ scrollTop: 0 }, 1000)
 +
                    })
 +
                    $(window).scroll(scrolls)
 +
                    scrolls()
 +
                    function scrolls() {
 +
                        var f1, f2, bck;
 +
                        var fixRight = $('div.floatCtro p');
 +
                        var blackTop = $('div.floatCtro a')
 +
                        var sTop = $(window).scrollTop();
 +
                        fl = $('#float01').offset().top;
 +
                        f2 = $('#float02').offset().top;
 +
 +
                        if (sTop <= f2 - 100) {
 +
                            blackTop.fadeOut(300).css('display', 'none')
 +
                        }
 +
                        else {
 +
                            blackTop.fadeIn(300).css('display', 'block')
 +
                        }
 +
 +
                        if (sTop >= fl) {
 +
                            fixRight.eq(0).addClass('cur').siblings().removeClass('cur');
 +
                        }
 +
                        if (sTop >= f2 - 100) {
 +
                            fixRight.eq(1).addClass('cur').siblings().removeClass('cur');
 +
                        }
 +
 +
                    }
 +
                })
 +
            </script>
 +
            <!-- 滚动菜单栏jQuery -->
 +
            <!-- 折叠插件 -->
 +
            <script>
 +
                //接受三个参数，分别是折叠菜单的外包div名称，是否关闭之前的折叠，默认开启的折叠内容
 +
                function Collapse(className, close_prev, default_open) {
 +
                    this._elements = [];
 +
                    this._className = String(className);
 +
                    this._previous = Boolean(close_prev)
 +
                    this._default = typeof (default_open) === "number" ? default_open : -1
 +
                    this.getCurrent
 +
                    this.init();
 +
                }
 +
                //收集所有折叠菜单的div
 +
                Collapse.prototype.collectElementbyClass = function () {
 +
                    this._elements = [];
 +
                    var allelements = document.getElementsByTagName("div");
 +
                    for (var i = 0; i < allelements.length; i++) {
 +
                        var collapse_div = allelements[i];
 +
                        if (typeof collapse_div.className === "string" && collapse_div.className === this._className) {
 +
                            var h3s = collapse_div.getElementsByTagName("h3");
 +
                            var collapse_body = collapse_div.getElementsByClassName("collapse_body");
 +
                            if (h3s.length === 1 && collapse_body.length === 1) {
 +
                                h3s[0].style.cursor = "pointer";
 +
 +
                                if (this._default === this._elements.length) {
 +
                                    collapse_body[0].style.visibility = "visible";
 +
                                    collapse_body[0].style.height = collapse_body[0].scrollHeight + "px"
 +
                                } else {
 +
                                    collapse_body[0].style.height = "0px";
 +
                                    collapse_body[0].style.visibility = "hidden";
 +
                                }
 +
                                this._elements[this._elements.length] = collapse_div;
 +
                            }
 +
                        }
 +
                    }
 +
                }
 +
                Collapse.prototype.open = function (elm) {
 +
                    elm.style.visibility = "visible";
 +
                    elm.style.height = elm.scrollHeight + "px"
 +
 +
                }
 +
                Collapse.prototype.close = function (elm) {
 +
                    elm.style.height = "0px";
 +
                    elm.style.visibility = "hidden";
 +
                }
 +
                Collapse.prototype.isOpen = function (elm) {
 +
 +
                    return elm.style.visibility === "visible"
 +
                }
 +
 +
                Collapse.prototype.getCurrent = function (header) {
 +
                    var cur;
 +
                    if (window.addEventListener) {
 +
                        cur = header.parentNode
 +
                    } else {
 +
                        cur = header.parentElement
 +
                    }
 +
                    return cur.getElementsByClassName("collapse_body")[0]
 +
                }
 +
 +
                Collapse.prototype.toggleDisplay = function (header) {
 +
 +
                    var cur = this.getCurrent(header)
 +
                    //console.log(cur)
 +
                    if (this.isOpen(cur)) {
 +
                        this.close(cur);
 +
                    } else {
 +
                        this.open(cur);
 +
                    }
 +
                    if (this._previous) {
 +
                        for (var i = 0; i < this._elements.length; i++) {
 +
                            if (this._elements[i] !== (cur.parentNode || cur.parentElement)) {
 +
                                var collapse_body = this._elements[i].getElementsByClassName("collapse_body");
 +
                                collapse_body[0].style.height = "0px";
 +
                                collapse_body[0].style.visibility = "hidden";
 +
 +
                            }
 +
                        }
 +
                    }
 +
                }
 +
 +
                Collapse.prototype.init = function () {
 +
                    var instance = this;
 +
                    this.collectElementbyClass();
 +
                    if (this._elements.length === 0) {
 +
                        return;
 +
                    }
 +
 +
                    for (var i = 0; i < this._elements.length; i++) {
 +
                        var h3s = this._elements[i].getElementsByTagName("h3");
 +
                        if (window.addEventListener) {
 +
                            h3s[0].addEventListener("click", function () { instance.toggleDisplay(this); }, false);
 +
                        } else {
 +
                            h3s[0].onclick = function () { instance.toggleDisplay(this); }
 +
                        }
 +
                    }
 +
                }
 +
 +
                //传参
 +
                var myCollapse = new Collapse("collapseDiv", true);
 +
 +
            </script>
 +
            <!-- 折叠插件 -->
 +
 +
</body>
  
 
</html>
 
</html>

Revision as of 20:34, 15 October 2018

N-terminal of Gasdermin D (1-275aa)

Pyroptosis is a form of lytic programmed cell death with inflammation. Recent studies reported that the N-terminal of Gasdermin D (pore-forming domain) acts as an effector of pyroptosis. Full length Gasdermin D is cleaved by Caspase 1 then release the PFD (pore-forming domain) which can oligomerize on the cell membrane. Formation of pores causes cell swelling, rupturing of the membrane and the massive leakage of cytosolic contents1.

The N-terminal of GSDMD execute the function of pyroptosis in cells

We respectively fused eGFP with GSDMD-N275 and GSDMD FL (full length). Then these plasmids were transfected into Hela GSDMD KO cell. Microscopy of cells transfecting GSDMD-N275 undergoing pyroptosis, but GSDMD full length did not induce pyroptosis (Figure 1). We also tested the cell viability through ATP assay (CellTiter-Glo® Luminescent Cell Viability Assay) and demonstrated that GSDMD-N275 and mutants of GSDMD FL had different ability to induce pyroptosis (Figure 2).

Figure 1. pCS2-eGFP-GSDMD FL（left）, pCS2-eGFP-GSDMD-N275（right） were transfected respectively into Hela G¬SDMD KO cells. Pyroptotic cells are pointed by red arrow.

Method

Preparation of Cells for transfection
1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO2 tissue-culture incubator.
2. Count the cells using a hemocytometer. Seed in 24-well (5 × 10^4 per well) and grow.
Transfection
1. Dilute 0.5 μg DNA into 50 μl jetPRIME® buffer (supplied). Mix by vortexing.
2. Add 1 μl jetPRIME®, vortex for 10 s, spin down briefly.
3. Incubate for 10 min at RT.
4. Add 50μl of transfection mix per well drop wise onto the cells in serum containing medium, and distribute evenly.
5. Gently rock the plates back and forth and from side to side.
6. If needed, replace transfection medium after 4 h by cell growth medium and return the plates to the incubator.
Observation is taken after 1.5 h

Figure 2. pCS2-Flag-GSDMD FL, pCS2-Flag-GSDMD-N275, pCS2-Flag-GSDMD L290D, pCS2-Flag-GSDMD Y373, pCS2-Flag-GSDMD A377D were transfected respectively into 293T cells. ATP-based cell viability was measured (n=6).

Method

Preparation of Cells for Infection
1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO2 tissue-culture incubator.
2. Count the cells using a hemocytometer. Seed in 24-well (9× 10^4 per well) and grow overnight.
Preparation of Bacteria
1. Grow bacteria overnight 16 h in 2 mL LB in a 15-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm).
2. Subculture bacteria by transferring 300 μL of the overnight culture into 5 mL of LB in a loosely capped 50-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm) to late log phase.
3. Pellet 1 mL of the Salmonella subculture by centrifugation at 1000 g in a microfuge for 2 min at room temperature.
4. Remove 900 μL of supernatant and gently resuspend the pellet in 900 μL PBS.
Infection
1. Aspirate media and rinse the monolayer twice with PBS.
2. Inoculate cells with bacteria (MOI = 100) by adding bacteria directly to the cell-culture supernatant.
3. Incubate for 3 h at 37 °C in 5% CO2.
4. Aspirate media and rinse the monolayer twice with PBS.
5. Add fresh GM containing 100 μg/mL gentamicin and incubate at 37 °C in 5% CO2.
Observation is taken after 2 h.
The N-terminal of GSDMD lyses bacteria

Expression of the N terminal of GSDMD fused with eGFP (eGFP-GSDMD-N275) was under the control of Ptet in ΔsifA SL1344. The colony-forming unit (CFU) was measured for counting the number of viable bacteria (Figure 3). This result shows that eGFP-GSDMD-N275 exhibits cytotoxicity in bacteria.

Figure 3. In each group, ATc (16μg/ml) was added into medium when bacteria grown to logarithmic phase (OD = 0.6~0.8). Vector refers to bacteria containing a high copy number plasmid which only expresses TetR under the control of Ptet. Bacterial colony-forming units (CFU) for vector and eGFP-GSDMD-N275 are shown in the logarithmic form (log10) (n=3).

Method

1. Cell are cultured overnight in LB broth containing corresponding antibiotics, and dilute each 1 volume overnight cultures with 100 volume fresh LB containing antibiotics. Culture in 37℃ 200 rpm.
2. When OD reaching to 0.6-0.8, add anhydrotetracycline with final concentration of μg/ml to induce the expression of EGFP-GSDMD-N275.
3. Take 100 μl diluted culture to plate on LB agar plates containing appropriate concentration of antibody after 1.5 hours of induce.
Observation is taken overnight.
The N-terminal of GSDMD from lytic bacteria induce cell pyroptosis.

Expression of the N-terminal of GSDMD fused with eGFP (eGFP-GSDMD-N275) was under the control of Tet promoter in ΔsifA SL1344. Hela GSDMD KO cell line were infected with ΔsifA SL1344. Inducer ATc (16μg/mL) were added after 3 h infection. Microscopy showed that eGFP-GSDMD-N275 located in cytoplasm after 5 min of induction and trigger pyroptosis after 30 min of induction (Figure 4). After 1.5 h of induction, Hela GSDMD KO cells undergo second necrosis caused by bacterial infection without inducer. Morphology of this process is similar to pyroptosis2. Thus, these population of ruptured cells were counted. There are two folds change between control group and induced group (Figure 5). So ruptured cells in induced group were triggered pyroptosis by eGFP-GSDMD-N275 but not by bacterial infection.

Figure 4. Hela GSDMD KO cell line were infected with ΔsifA SL1344 containing high copy number plasmids which express eGFP-GSDMD-N275 under the control of ATc. Photos were captured after 5 min of induction.

Figure 5. Ruptured cells in a field of view were counted.

Method

Preparation of Cells for Infection
1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO2 tissue-culture incubator.
2. Count the cells using a hemocytometer. Seed in 24-well (5 × 10^4 per well) and grow overnight.
Preparation of Bacteria
1. Grow bacteria overnight 16 h in 2 mL LB in a 15-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm).
2. Subculture bacteria by transferring 300 μL of the overnight culture into 5 mL of LB in a loosely capped 50-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm) to late log phase.
3. Pellet 1 mL of the Salmonella subculture by centrifugation at 1000 g in a microfuge for 2 min at room temperature.
4. Remove 900 μL of supernatant and gently resuspend the pellet in 900 μL PBS.
Infection
1. Aspirate media and rinse the monolayer twice with PBS.
2. Inoculate cells with bacteria (MOI = 100) by adding bacteria directly to the cell-culture supernatant.
3. Incubate for 2 h at 37 °C in 5% CO2.
4. Aspirate media and wash.
5. Add fresh GM containing 100 μg/mL gentamicin and 16 μg/mL incubate at 37 °C in 5% CO2.
Observation is taken after 5 min, 30 min, 1.5 h.
Basic Part Table
Name Type Description Designer Length(bp)
BBa_K2632002 Promoter Promoter sifA Mo Qiqin 331
BBa_K2632003 Coding N-terminal of GasderminD (1-275aa) Zhujun Xia 825
BBa_K2632004 Coding Full length Gasdermin D Zhujun Xia 1455
BBa_K2632005 Coding L290D mutant of full length Gasdermin D Zhujun Xia 1455
BBa_K2632007 Coding A377D mutant of full length Gasdermin D. Zhujun Xia 1455
Reference

1 Ding, J. et al. Pore-forming activity and structural autoinhibition of the gasdermin family. Nature 535, 111-116, doi:10.1038/nature18590 (2016).

2 He, W. T. et al. Gasdermin D is an executor of pyroptosis and required for interleukin-1beta secretion. Cell research 25, 1285-1298, doi:10.1038/cr.2015.139 (2015).

Basic Part

N-terminal of Gasdermin D

Basic Part Table

Back to Top
Composite Part