FlexMoel Layout v2

b2b layout s flexem, minimum tagů

by Petr Haluza

HTML

<div id="body">

<header>
  <section id="logo">
    <p>logo</p>
  </section>
  <section id="switch">
    <input id="switchbox" type="checkbox"><label for="switchbox">mini</label>
  </section>
  <section id="head">
    <div id="head-top">
      <p>head-top</p>
    </div><!-- /head-top -->
    <div id="head-mid">
      <nav>
        <ul>
          <li>Polozka</li>
          <li>Polozka</li>
          <li>Polozka</li>
          <li>Polozka</li>
        </ul>
      </nav>
      <div class="right">
        <div id="cart">
          kosik
        </div><!-- /cart -->
        <div id="offer">
          nabidka
        </div><!-- /offer -->
        <div id="msg">
          msg, logof
        </div><!-- /msg -->
      </div><!-- /.right -->
    </div><!-- /head-mid -->
  </section>
</header>

<main>
  <nav id="left-col">
    <ul>
      <li><a href="#">Kategorie A</a></li>
      <li><a href="#">Kategorie B</a></li>
      <li><a href="#">Kategorie C</a></li>
    </ul>
  </nav>
  <section id="main-cont">
    <p>obsah</p>
    <article>
			<header>
				<h2>Titulek článku</h2>
				<p>Zveřejněno <time datetime="2009-09-04T16:31:24+02:00">5. Leden 2019</time> od <a href="#">autor</a> - <a href="#comments">6 komentářů</a></p>
			</header>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      <figure>
        <img src="https://www.img4.cz/desert.jpg" alt="nic" width="100">
        <figcaption>Popisek k obrazku.</figcaption>
      </figure> 
		</article>
    <section id="main-prod-list">
			<article>
				<a href="" rel="bookmark">
					produkt<!-- … -->
				</a>
			</article>
    </section>
  </section><!-- /#main-content -->
  <aside id="right-col">
		<input id="hideAside" type="checkbox"><label for="hideAside">skryj</label>
    <p>bok, jen někde</p>
  </aside>  
</main>

<footer>
  <p>footer</p>
</footer>

</div><!-- /body -->

CSS

/* Globalni rozlozeni */
html { height: 100%; }
body {margin: 0;height: 100% }
#body {display: flex;flex-direction: column;height: 100%;max-width:800px; margin:0 auto;}
#body > header,
#body > footer { }
#body > main { flex: 1 0 auto; display: flex; overflow: hidden; /* IE EDGE overflow fix */}
#body > main > nav { flex: 0 0 150px;
transition: all 250ms ease-in-out;}
#body > main > nav.mini { flex: 0 0 50px; overflow: hidden;}
#body > main > aside { flex: 0 0 150px; }
#body > main > section { flex: 1; }
/* /Globalni rozlozeni */

/* Hlavicka */
#body > header { display: flex;}
#logo { flex: 0 0 150px;transition: all 250ms ease-in-out;}
#logo.mini { flex: 0 0 50px; overflow: hidden;}
#head { flex: 1; display: flex; flex-direction: column; }
#head-top {}
#head-mid { display: flex; justify-content:space-between; }
#head-mid nav ul { display: flex;  }
#head-mid .right { display: flex;justify-content:flex-end;}
#cart {}
#offer {}
#msg {}
/* /Hlavicka */


article { background:#eee;}

.hide {display:none;}

/*************** jen helperz pro test*/
header, footer, section, aside, nav {border:1px solid #eaa; }
div {border:1px solid #aea; }
/*************** /jen helperz pro test*/






/* breakpointz */
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}
 
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
  /* Styles */
}
 
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
  /* Styles */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}
 
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
}
 
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and...

JavaScript

/* switch na minim.levý slupec */
$('#switchbox').change(function(){
    if($(this).is(":checked")) {
        $('#left-col,#logo').addClass("mini");
    } else {
        $('#left-col,#logo').removeClass("mini");
        }
});
/* /switch na minim.levý slupec */

$('#hideAside').change(function(){
    if($(this).is(":checked")) {
        $('#right-col').addClass("hide");
    } else {
        $('#right-col').removeClass("hide");
        }
});