Difference between revisions of "Team:British Columbia/Part Collection"

Line 21: Line 21:
  
  
 +
<h1>Create 3 same-height columns</h1>
  
−
<div id="pagewrap">
+
<h2>With text and <code>columns</code> properties</h2>
  
−
<header>
+
<div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo repellat ab reprehenderit maxime similique, veniam ratione eaque sit unde libero eius, accusamus aspernatur dolorum culpa esse neque perferendis sed, praesentium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum illum fugit inventore eum ipsa quod hic sed quia veniam labore velit officiis, nemo quisquam ducimus nam quibusdam facilis modi qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit dicta, maiores sit laborum quidem! Quod impedit perspiciatis saepe optio minus culpa iste, debitis aperiam ipsa vitae provident neque quo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde non obcaecati suscipit voluptatem. Cupiditate eligendi itaque, libero fugit laudantium aperiam totam nobis ab saepe, veritatis, error ullam molestiae quam sunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores recusandae minus dolor velit vitae nostrum modi dignissimos animi explicabo vel repellendus, rerum praesentium, suscipit nobis facere facilis consequatur provident ab!
−
<h1>3 Column Responsive Layout</h1>
+
Sed, amet, deleniti! Velit, facilis dignissimos, quo vel quasi minus perferendis dolores, nam temporibus modi vitae impedit. Eaque adipisci hic earum nisi repudiandae ut unde doloribus odit qui. Cumque, dicta!
−
</header>
+
Magni molestiae ipsam iste! Qui mollitia, est accusamus eum debitis quisquam iusto unde facilis. Est incidunt, quas culpa ipsam dolore dignissimos repellendus labore porro magni cum, cumque harum? Non, molestiae.</div>
−
+
−
<section id="content">
+
−
<h2>1st Content Area</h2>
+
−
<p>This page demonstrates a 3 column responsive layout, complete with responsive images and jquery slideshow.</p>
+
−
</section>
+
−
+
−
<section id="middle">
+
−
<h2>2nd Content Area</h2>
+
−
<p>At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.</p>
+
−
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+
−
</section>
+
  
−
<aside id="sidebar">
+
<h2>With the content you want and <code>display:table</code></h2>
−
<h2>3rd Content Area</h2>
+
<div class="table">
−
<p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
+
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit quia, quam delectus sequi odio fugit pariatur architecto, deleniti exercitationem quae adipisci ipsum ullam officia ea!</div>
−
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, quod voluptates, vel nostrum ea distinctio, a tempore voluptas reiciendis doloremque veniam, accusantium. Veritatis ipsum modi doloribus enim sint magnam, delectus dolorum, aperiam! Eaque dolor, veniam eum sunt dolorem nostrum. Dolores, corporis! Magnam, amet quas? Voluptates eaque quaerat quia inventore, earum eveniet hic alias rem atque neque ab, reprehenderit dolore culpa, blanditiis! Maiores enim rerum architecto voluptatibus cumque. Debitis accusamus ea aut incidunt voluptatibus quibusdam rem sint laboriosam qui sit odio expedita illum iste consectetur fugit eaque commodi pariatur, porro ex delectus officia ratione necessitatibus totam. Necessitatibus est autem et.</div>
−
<p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
+
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque velit dolores ipsa maiores molestias minus iusto nulla consequatur saepe. Aspernatur nulla optio laborum ducimus dignissimos nisi itaque aliquam doloremque, iure qui. Corporis quas atque minus, eveniet delectus officiis dolor, neque, animi, deleniti adipisci esse! Ullam nesciunt, nemo fugit totam itaque.</div>
−
</aside>
+
</div>
−
+
−
<footer>
+
−
<h4>Footer</h4>
+
−
<p>Footer text</p>
+
−
</footer>
+
  
 +
<h2>With the content you want and <code>display: flex;</code></h2>
 +
<p>The best solution!</p>
 +
<div class="flexbox">
 +
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam quibusdam corporis officiis consequatur eveniet at ipsa deleniti consectetur fugiat similique illo alias perspiciatis quam repellendus, quisquam mollitia error corrupti vitae ut expedita numquam nemo aspernatur ratione maxime! Amet ea commodi itaque voluptatibus. Dolor repellat consequatur dicta ab repudiandae quo architecto.</div>
 +
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quos dicta, reprehenderit laborum! Quidem repellendus culpa, quisquam laboriosam quam ducimus id sit fugit obcaecati aspernatur.</div>
 +
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi explicabo, amet debitis natus enim magnam eos ab voluptate minima delectus. Tenetur porro possimus obcaecati harum facere est tempore cum enim dignissimos ducimus, eum illo quam cupiditate vel iusto voluptatum nesciunt nobis velit at, voluptatibus quos. Repudiandae nulla alias iure eligendi, saepe libero et dolor tempora.</div>
 
</div>
 
</div>
 +
  
 
<style>
 
<style>
−
body {  
+
 
−
   font-family: 'Open Sans', sans-serif;
+
/* COLUMNS partial solution */
−
   color: #666;
+
.column {
 +
   padding: 25px;
 +
  columns: 3;
 +
  column-rule: 15px solid #F2F2F2;
 +
   background: #fff;
 +
  background-clip: content-box;
 
}
 
}
  
−
/* STRUCTURE */
 
  
−
#pagewrap {
+
/* TABLE solution */
−
padding: 5px;
+
.table {
−
width: 960px;
+
  display: table;
−
margin: 20px auto;
+
  width: 100%;
 +
  border-collapse: separate;
 
}
 
}
−
#header {
+
.table div {
−
height: 100px;
+
  display: table-cell;
−
padding: 0 15px;
+
  width: 33.3333%;
−
}
+
  background: #FFF;
−
#content {
+
  border: 5px #F2F2F2 solid;
−
width: 290px;
+
  padding: 20px;
−
padding: 5px 15px;
+
  box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
 
}
 
}
  
−
#middle {
 
−
width: 294px; /* Account for margins + border values */
 
−
padding: 5px 15px;
 
−
margin: 0px 5px 5px 5px;
 
−
}
 
−
 
−
#sidebar {
 
−
width: 270px;
 
−
padding: 5px 15px;
 
  
 +
/* FLEXBOX solution */
 +
.flexbox,
 +
.flexbox > div {
 +
  display: flex;
 
}
 
}
−
footer {
+
.flexbox > div {
−
clear: both;
+
  width: 50%;
−
padding: 0 15px;
+
  padding: 20px;
 +
  margin: 10px;
 +
  background: #FFF;
 +
  box-shadow: 0 0 3px rgba(0,0,0,0.05)
 
}
 
}
  
Line 94: Line 89:
  
  
−
#content {
+
 
−
background: #f8f8f8;
+
 
 +
 
 +
 
 +
 
 +
/* Useless code */
 +
body {
 +
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
 +
  font-size: 0.95em;
 +
  color: #333;
 +
  background: #F2F2F2;
 
}
 
}
−
#sidebar {
+
h1, h2 {
−
background: #f0efef;
+
  font-weight: lighter;
 +
  text-align: center;
 
}
 
}
−
header, #content, #middle, #sidebar {
+
h1 {
−
margin-bottom: 5px;
+
  font-size: 2.5em
 
}
 
}
 +
h2 {
 +
  margin-top: 4em;
 +
}
 +
h1+h2 {
 +
  margin-top: 1.5em;
 +
}
 +
h2 + p {
 +
  text-align: center;
 +
  color: #555;
 +
}
 +
 +
</style>
  
−
#pagewrap, header, #content, #middle, #sidebar, footer {
 
−
border: solid 1px #ccc;
 
−
}</style>
 
  
  

Revision as of 00:58, 19 September 2015

UBC iGEM 2015

 

Part Collection

 

Our collection of parts contains genes required for modification of imidacloprid and degradation of 6-chloronicotinic acid (6-CNA). Final parts were assembled in pSB1C3 backbone harboring the chloramphenicol resistance gene and designed to have a LacI repressor, ribosome binding site, pTAC promoter, our degradation genes of interest, and double terminator.

The three composite parts each containing a cytochrome P450 (CYP) were designed to include an N-terminal pelB signal sequence to target expression to the periplasm and a cytochrome P450 reductase (CPR) for functionality of the CYP. The CPR was also made with it’s own designated rbs, promoter, pelB signal sequence, and terminator.

Composite parts with multiple degradation genes were designed so that each gene in the construct had a dedicated rbs, promoter, and double terminator.

Create 3 same-height columns

With text and columns properties

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo repellat ab reprehenderit maxime similique, veniam ratione eaque sit unde libero eius, accusamus aspernatur dolorum culpa esse neque perferendis sed, praesentium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum illum fugit inventore eum ipsa quod hic sed quia veniam labore velit officiis, nemo quisquam ducimus nam quibusdam facilis modi qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit dicta, maiores sit laborum quidem! Quod impedit perspiciatis saepe optio minus culpa iste, debitis aperiam ipsa vitae provident neque quo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde non obcaecati suscipit voluptatem. Cupiditate eligendi itaque, libero fugit laudantium aperiam totam nobis ab saepe, veritatis, error ullam molestiae quam sunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores recusandae minus dolor velit vitae nostrum modi dignissimos animi explicabo vel repellendus, rerum praesentium, suscipit nobis facere facilis consequatur provident ab! Sed, amet, deleniti! Velit, facilis dignissimos, quo vel quasi minus perferendis dolores, nam temporibus modi vitae impedit. Eaque adipisci hic earum nisi repudiandae ut unde doloribus odit qui. Cumque, dicta! Magni molestiae ipsam iste! Qui mollitia, est accusamus eum debitis quisquam iusto unde facilis. Est incidunt, quas culpa ipsam dolore dignissimos repellendus labore porro magni cum, cumque harum? Non, molestiae.

With the content you want and display:table

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit quia, quam delectus sequi odio fugit pariatur architecto, deleniti exercitationem quae adipisci ipsum ullam officia ea!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, quod voluptates, vel nostrum ea distinctio, a tempore voluptas reiciendis doloremque veniam, accusantium. Veritatis ipsum modi doloribus enim sint magnam, delectus dolorum, aperiam! Eaque dolor, veniam eum sunt dolorem nostrum. Dolores, corporis! Magnam, amet quas? Voluptates eaque quaerat quia inventore, earum eveniet hic alias rem atque neque ab, reprehenderit dolore culpa, blanditiis! Maiores enim rerum architecto voluptatibus cumque. Debitis accusamus ea aut incidunt voluptatibus quibusdam rem sint laboriosam qui sit odio expedita illum iste consectetur fugit eaque commodi pariatur, porro ex delectus officia ratione necessitatibus totam. Necessitatibus est autem et.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque velit dolores ipsa maiores molestias minus iusto nulla consequatur saepe. Aspernatur nulla optio laborum ducimus dignissimos nisi itaque aliquam doloremque, iure qui. Corporis quas atque minus, eveniet delectus officiis dolor, neque, animi, deleniti adipisci esse! Ullam nesciunt, nemo fugit totam itaque.

With the content you want and display: flex;

The best solution!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam quibusdam corporis officiis consequatur eveniet at ipsa deleniti consectetur fugiat similique illo alias perspiciatis quam repellendus, quisquam mollitia error corrupti vitae ut expedita numquam nemo aspernatur ratione maxime! Amet ea commodi itaque voluptatibus. Dolor repellat consequatur dicta ab repudiandae quo architecto.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quos dicta, reprehenderit laborum! Quidem repellendus culpa, quisquam laboriosam quam ducimus id sit fugit obcaecati aspernatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi explicabo, amet debitis natus enim magnam eos ab voluptate minima delectus. Tenetur porro possimus obcaecati harum facere est tempore cum enim dignissimos ducimus, eum illo quam cupiditate vel iusto voluptatum nesciunt nobis velit at, voluptatibus quos. Repudiandae nulla alias iure eligendi, saepe libero et dolor tempora.