NatSkinGrid < System

You are here: Foswiki>System Web>NatSkin>NatSkinGridEditAttach
---+!! %TOPIC%

<div class="gutterSelector">
*Select gutter:* 

<select class="foswikiSelect">
<option>gutter0</option>
<option>gutter1</option>
<option>gutter2</option>
<option>gutter3</option>
<option value="gutter4" selected>gutter4 (default)</option>
<option>gutter5</option>
</select>
</div>
%TOC%

<literal>
<script type="text/javascript"> 
jQuery(function($) {
  $(".test1 div:odd").addClass("odd");
  $(".gutterSelector select").change(function() {
    var val = $(this).val();
    $(".foswikiGrid").removeClass("gutter0 gutter1 gutter2 gutter3 gutter4 gutter5").addClass(val);
  });
});
</script>
<style>
.foswikiGrid.test1 {
  text-align: center;
  background-color: #eee;
  line-height:3em;
}
.foswikiGrid.test1 .foswikiRow {
  margin-top:0;
}
.foswikiGrid.test1 .foswikiRow div {
  background-color: #FFC0CB;
}
.foswikiGrid.test1 .foswikiRow .odd {
  background-color: #ADD8E6;
}
.foswikiGrid.test2 {
  text-align:justify;
}
.gutterSelector {
  border:2px solid red;
  padding:1em;
  float:right;
  background-color:#fff;
}
</style>
</literal>

---++ Columns
<div class="foswikiGrid test1">
  <div class="foswikiRow">
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol2">2/12</div>
    <div class="foswikiCol2">2/12</div>
    <div class="foswikiCol2">2/12</div>
    <div class="foswikiCol2">2/12</div>
    <div class="foswikiCol2">2/12</div>
    <div class="foswikiCol2">2/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol3">3/12</div>
    <div class="foswikiCol3">3/12</div>
    <div class="foswikiCol3">3/12</div>
    <div class="foswikiCol3">3/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol4">4/12</div>
    <div class="foswikiCol4">4/12</div>
    <div class="foswikiCol4">4/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol6">6/12</div>
    <div class="foswikiCol6">6/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol12">12/12</div>
  </div>
</div>

---++ Mix Columns
<div class="foswikiGrid test1">
  <div class="foswikiRow">
    <div class="foswikiCol7">7/12</div>
    <div class="foswikiCol5">5/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol3">3/12</div>
    <div class="foswikiCol4">4/12</div>
    <div class="foswikiCol5">5/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol7">7/12</div>
    <div class="foswikiCol2">2/12</div>
    <div class="foswikiCol3">3/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol7">7/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
  </div>
</div>

<div class="foswikiGrid test1">
  <div class="foswikiRow">
    <div class="foswikiCol8">8/12</div>
    <div class="foswikiCol4">4/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol4">4/12</div>
    <div class="foswikiCol4">4/12</div>
    <div class="foswikiCol4">4/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol8">8/12</div>
    <div class="foswikiCol2">2/12</div>
    <div class="foswikiCol2">2/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol8">8/12</div>
    <div class="foswikiCol3">3/12</div>
    <div class="foswikiCol1">1/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol8">8/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
    <div class="foswikiCol1">1/12</div>
  </div>
</div>

<div class="foswikiGrid test1">
  <div class="foswikiRow">
    <div class="foswikiCol9">9/12</div>
    <div class="foswikiCol3">3/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol6">6/12</div>
    <div class="foswikiCol3">3/12</div>
    <div class="foswikiCol3">3/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol10">10/12</div>
    <div class="foswikiCol2">2/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol5">5/12</div>
    <div class="foswikiCol5">5/12</div>
    <div class="foswikiCol2">2/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol11">11/12</div>
    <div class="foswikiCol1">1/12</div>
  </div>
  <div class="foswikiRow">
    <div class="foswikiCol5">5/12</div>
    <div class="foswikiCol6">6/12</div>
    <div class="foswikiCol1">1/12</div>
  </div>
</div>

---++ Text example
<div class="foswikiGrid test2">
  <div class="foswikiRow">
    <div class="foswikiCol6">
      Ac velit, eu, cras, amet, elementum scelerisque nisi purus ac turpis integer purus porta adipiscing? Penatibus, 
      habitasse tristique est nunc ac sit sociis turpis! Dignissim sociis odio augue turpis cursus, tristique tincidunt? 
      Egestas, dictumst? Hac dictumst? Mid dapibus dignissim nisi, facilisis in, scelerisque in, egestas penatibus cras 
      sit integer? Aenean? 
    </div>
    <div class="foswikiCol6 border">
      elementum cras dignissim et tortor mus, elementum, ac amet! Lacus, natoque ac dapibus non egestas placerat 
      sed diam integer   nisi ut? Nisi eros amet! Augue, nunc. Nisi lectus sit, turpis, egestas magnis facilisis, 
      dapibus sagittis, cursus enim duis adipiscing turpis sagittis ultrices dis pulvinar diam, integer eu, vel, 
      phasellus nec nascetur tortor, duis pid lorem  porta mid! Tempor integer lundium facilisis nisi sed sed 
      augue porta, cursus, a eu.
    </div>
  </div>
---
  <div class="foswikiRow">
    <div class="foswikiCol4">
      Ac velit, eu, cras, amet, elementum scelerisque nisi purus ac turpis integer purus porta adipiscing? Penatibus, 
      habitasse tristique est nunc ac sit sociis turpis! Dignissim sociis odio augue turpis cursus, tristique tincidunt? 
      Egestas, dictumst? Hac dictumst? Mid dapibus dignissim nisi, facilisis in, scelerisque in, egestas penatibus cras 
      sit integer? Aenean? 
    </div>
    <div class="foswikiCol4 border">
      elementum cras dignissim et tortor mus, elementum, ac amet! Lacus, natoque ac dapibus non egestas placerat 
      sed diam integer   nisi ut? Nisi eros amet! Augue, nunc. Nisi lectus sit, turpis, egestas magnis facilisis, 
      dapibus sagittis, cursus enim duis adipiscing turpis sagittis ultrices dis pulvinar diam, integer eu, vel, 
      phasellus nec nascetur tortor, duis pid lorem  porta mid! Tempor integer lundium facilisis nisi sed sed 
      augue porta, cursus, a eu.
    </div>
    <div class="foswikiCol4 border">
      elementum cras dignissim et tortor mus, elementum, ac amet! Lacus, natoque ac dapibus non egestas placerat 
      sed diam integer   nisi ut? Nisi eros amet! Augue, nunc. Nisi lectus sit, turpis, egestas magnis facilisis, 
      dapibus sagittis, cursus enim duis adipiscing turpis sagittis ultrices dis pulvinar diam, integer eu, vel, 
      phasellus nec nascetur tortor, duis pid lorem  porta mid! Tempor integer lundium facilisis nisi sed sed 
      augue porta, cursus, a eu.
    </div>
  </div>
---
  <div class="foswikiRow">
    <div class="foswikiCol8">
      Ac velit, eu, cras, amet, elementum scelerisque nisi purus ac turpis integer purus porta adipiscing? Penatibus, 
      habitasse tristique est nunc ac sit sociis turpis! Dignissim sociis odio augue turpis cursus, tristique tincidunt? 
      Egestas, dictumst? Hac dictumst? Mid dapibus dignissim nisi, facilisis in, scelerisque in, egestas penatibus cras 
      sit integer? Aenean? 
    </div>
    <div class="foswikiCol4 border">
      elementum cras dignissim et tortor mus, elementum, ac amet! Lacus, natoque ac dapibus non egestas placerat 
      sed diam integer   nisi ut? Nisi eros amet! Augue, nunc. 
    </div>
  </div>
---
  <div class="foswikiRow">
    <div class="foswikiCol4">
      Ac velit, eu, cras, amet, elementum scelerisque nisi purus ac turpis integer purus porta adipiscing? Penatibus, 
      habitasse tristique est nunc ac sit sociis turpis! Dignissim sociis odio augue turpis cursus, tristique tincidunt? 
    </div>
    <div class="foswikiCol8">
      elementum cras dignissim et tortor mus, elementum, ac amet! Lacus, natoque ac dapibus non egestas placerat 
      sed diam integer   nisi ut? Nisi eros amet! Augue, nunc. Nisi lectus sit, turpis, egestas magnis facilisis, 
      dapibus sagittis, cursus enim duis adipiscing turpis sagittis ultrices dis pulvinar diam, integer eu, vel, 
      phasellus nec nascetur tortor, duis pid lorem  porta mid! Tempor integer lundium facilisis nisi sed sed 
      augue porta, cursus, a eu.
    </div>
  </div>
---
  <div class="foswikiRow">
    <div class="foswikiCol3">
      Ac velit, eu, cras, amet, elementum scelerisque nisi purus ac turpis integer purus porta adipiscing? Penatibus, 
      habitasse tristique est nunc ac sit sociis turpis! Dignissim sociis odio augue turpis cursus, tristique tincidunt? 
      Egestas, dictumst? Hac dictumst? Mid dapibus dignissim nisi, facilisis in, scelerisque in, egestas penatibus cras 
      sit integer? Aenean? 
    </div>
    <div class="foswikiCol3 border">
      elementum cras dignissim et tortor mus, elementum, ac amet! Lacus, natoque ac dapibus non egestas placerat 
      sed diam integer   nisi ut? Nisi eros amet! Augue, nunc. Nisi lectus sit, turpis, egestas magnis facilisis, 
      dapibus sagittis, cursus enim duis adipiscing turpis sagittis ultrices dis pulvinar diam, integer eu, vel, 
      phasellus nec nascetur tortor, duis pid lorem  porta mid! Tempor integer lundium facilisis nisi sed sed 
      augue porta, cursus, a eu.
    </div>
    <div class="foswikiCol3 border">
      elementum cras dignissim et tortor mus, elementum, ac amet! Lacus, natoque ac dapibus non egestas placerat 
      sed diam integer   nisi ut? Nisi eros amet! Augue, nunc. Nisi lectus sit, turpis, egestas magnis facilisis, 
      dapibus sagittis, cursus enim duis adipiscing turpis sagittis ultrices dis pulvinar diam, integer eu, vel, 
      phasellus nec nascetur tortor, duis pid lorem  porta mid! Tempor integer lundium facilisis nisi sed sed 
      augue porta, cursus, a eu.
    </div>
    <div class="foswikiCol3 border">
      elementum cras dignissim et tortor mus, elementum, ac amet! Lacus, natoque ac dapibus non egestas placerat 
      sed diam integer   nisi ut? Nisi eros amet! Augue, nunc. Nisi lectus sit, turpis, egestas magnis facilisis, 
      dapibus sagittis, cursus enim duis adipiscing turpis sagittis ultrices dis pulvinar diam, integer eu, vel, 
      phasellus nec nascetur tortor, duis pid lorem  porta mid! Tempor integer lundium facilisis nisi sed sed 
      augue porta, cursus, a eu.
    </div>
  </div>
</div><!-- end of grid -->
Topic revision: r2 - 19 Nov 2013, AdminUser
System
Copyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback