WEB s Foundation

Sloupce jsou zde celkem srozumitelné pokud víme, že Foundation rozděluje stránku do maximálně 12 jednotek šířky. Řádky sloupců tedy musí dohromady dát číslo 12, aby byly poskládány vedle sebe. Můžeme si také všimnout, jak vypadá nastavení nadpisů a horizontálnich mezer.

      
      
<hr class="vertical-space2">
  <div class="row">
    <h3>Sloupce ve Foundation</h3> 
    <div class="large-3 columns">
      <p>
        ...
    </p> 
  </div> 

  <div class="large-6 columns">  
    <p>
      ...
    </p> 
  </div> 

  <div class="large-3 columns">
    <p>
      ...
    </p> 
  </div> 
</div> 
 

          
hr {
  clear: both;
  max-width: 75rem;
  height: 0;
  margin: 1.25rem auto;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #cacaca;
  border-left: 0;
}

.vertial-space2 {
  display: block;
  float: none;
  clear: both;
  width: 100%;
  border: none;
}

.row {
  max-width: 75rem;
  margin-right: auto;
  margin-left: auto;
}
h3, h3{
  font-size: 1.9375rem;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: Helvetica,Roboto , Arial, sans-serif;
  font-style: normal;
  font-weight: normal; 
}

@media print, screen and (min-width: 64em) .large-3{
  width: 25%;
}

@media print, screen and (min-width: 64em) .large-6{
  width: 50%;
}
        
@media print, screen and (min-width: 40em) .columns{
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 40em) h3, .h3{
  font-size: 1.1875rem;
}

.columns {
  float: left;
  clear: none;
}

.columns {
  width: 100%;
  float: left;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
}
          
      

Příklad znázorňuje jednotlivé vizuální modifikace, které můžeme na stránce použít. Samotná modifikace ikony je sice specifikovaná třídou, ale jméno nám toho moc neřekne o vlastnostech. Navíc si pak v dalších příkladech můžeme všimnout, že se celý kód, až na pár detailů, zbytečně opakuje. V případě, že bychom chtěli změnit nějakou část nebo vytvořit jinou ale podobnou modifikaci, musíme znovu celý kód opsat nebo zkopírovat.

<div class="row">
  <h3>Ikony ve Foundation</h3> 
  <div class="large-4 columns text-center">
    <div class="round">
      <i class="fa fa-university" aria-hidden="true">             
    </div>
    <hr>
    <p class="text-left">
    ...
    </p> 
  </div>



.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

hr {
  clear: both;
  max-width: 75rem;
  height: 0;
  margin: 1.25rem auto;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #cacaca;
  border-left: 0;
}

p {
  line-height: 1.5;
  font-size: inherited;
  margin-bottom: 1rem auto;
  text-rendering: optimizeLegibility;
}

.round {
  border: 2px solid;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  text-align: center;
  margin: 0 auto;
  font-size: 40px;
  padding: 20px 0 0 0;
}


<div class="large-4 columns text-center">
  <div class="blocky">
    <i class="fa fa-building" aria-hidden="true">             
  </div>
  <hr>
  <p>
    ...
  </p> 
</div>
                                          
.text-center {
  text-align: center;
}

.blocky {
  border: 2px solid;
  height: 100px;
  width: 100px;
  text-align: center;
  margin: 0 auto;
  font-size: 40px;
  padding: 20px 0 0 0;
}
                      
<div class="large-4 columns text-center">
  <div class="blockyBoldRt">
    <i class="fa fa-building" aria-hidden="true">             
  </div>
  <hr>
  <p class="text-right">
  ...
  </p> 
</div>
                                            
.text-right {
  text-align: right;
}

.blockyBoldRt {
  border: 10px solid;
  height: 100px;
  width: 100px;
  text-align: center;
  margin: 0 auto;
  font-size: 50px;
  transform: rotate(180deg);
}

Znovu stylujeme ikony třídou, ale rozdíl je zde provázání se strukturou HTML. Tím pádem je můžeme využívat pouze v místech kde je struktura stejná. Níže pak zajišťují i obtékaní textu.

<div class="row">
  <h3>Ikony jinak ve Foundation</h3> 
  <div class="large-12">
    <div class="inconTop">
      <i class="fa fa-globe">             
      <p>
        ...
      </p> 
    </div>
  </div>
                                    

.iconTop {
text-align: center;
i{
  font-size: 50px;
  padding: 5px 5px;
  margin: 0 
}

Do třetice podobný kód, který nám vytvoří ikonu i s nápisem. Styl se znovu váže na strukturu HTML.

            
  <div class="large-12">
    <div class="iconBottom">           
      <p>
        ...
      </p>
      <i class="fa fa-lock">   
    </div>
  </div>
</div>
                                                
            
.iconBottom {
  i{
    font-size: 50px;
    padding: 5px 5px;
    margin: 0 
  }
}
            

Celá galerie obsahuje jednotlivé třídy modifikující jen dané elementy a nic není svázané se strukturou HTML. Navíc jsou třídy krátké a celkem srozumitelné. Nachází se zde i in-line styl tedy zapsaní stylu přímo do HMTL kódu. Je to validní zapsání, když potřebujeme pevně přiřadit určitému elementu vlastnosti a bylo by zbytečné vytvářet třídu.

   
<div class="row">
  <h3>Galerie ve Foundation</h3>
  <div class="large-12">
    <div class="gallery">  
            
      <div class="slides fade">   
        <div class="number"> 1 / 4 </div>  
          <img src="1.jfif"class="images-tall" alt="clouds"> 
        <div class="caption"> Dark clouds </div>    
      </div>

      <div class="slides fade">   
        <div class="number"> 2 / 4 </div>  
          <img src="2.jfif"class="images-wide" alt="city"> 
        <div class="caption"> Night city </div>    
      </div>

      <div class="slides fade">   
        <div class="number"> 3 / 4 </div>  
          <img src="3.jfif"class="images-wide" alt="table"> 
        <div class="caption"> Table decorations </div>    
      </div>

      <div class="slides fade">   
        <div class="number"> 4 / 4 </div>  
          <img src="4.jfif"class="images-tall" alt="tree"> 
        <div class="caption"> Christmas tree </div>    
      </div>

      <a class="prev" onclick="plusSlides(-1)"> &#10094; </a>    
      <a class="next" onclick="plusSlides(1)"> &#10095; </a>    
       
      <div style="text-align:center">
        <span class="dot" currentSlide="plusSlides(1)">  </span>    
        <span class="dot" currentSlide="plusSlides(2)">  </span>    
        <span class="dot" currentSlide="plusSlides(3)">  </span>    
        <span class="dot" currentSlide="plusSlides(4)">  </span>    
      </div>

    </div>
  </div>
</div>

.gallery {
  max-width: 700px;
  position: relative;
  margin: auto;
  z-index: 1;
}

.slides {
  display: none;
}

.prev, .next {
  cursor: pointer;
  position: abslolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: red;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
}

.next {        
  right: 0;
}

.prev:hover, .next:hover {
  background-color: black;
}

.caption{
  color: white;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.number{
  color: white;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot{
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade{
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.4s;
  animation-name: fade;
  animation-duration: 1.4s;
}

@-webkit-keyframes fade {
  from {
    opacity: .5;
  }
  to {
     opacity: 1;
  }
}
                    
@keyframes fade {
  from {
    opacity: .5;
  }
  to {
    opacity: 1;
  }
}

Formulář obsahuje velké množství implicitních nastaveních, které obsahuje přímo Foundation. Najdeme zde pouze jedinou třídu, ta modifikuje odesílací tlačítko. Funkčně je všechno v pořádku, ale při jakémkoliv zásahu do vizuální podoby, nastává problém. Musíme buď přepsat nastavení obecně pro všechny typy daného elementu nebo vytvořit novou třídu. Protože se některé elementy modifikují i podle typu obsahu, je zde občas problém najít co dělá co a jak to změnit.

<div class="row">
  <h3>Formulář ve Foundation </h3>
  <div class="large-12">
    <form method="post" action="#" onsubmit="return validateForm(this,['jmeno','email','text','vyber','aktiv','vyber1']))">  
      <p id="errormsg" class="errormsg"> Pole označena červeně musí být vyplněna </p> 
      <div class="row-form">
        <label for="jmeno"> Jmeno: </label>
        <input type="text" name="jmeno" id="in-jmeno" value=""> 
      </div>
      
      <div class="row-form">
        <label for="in-email"> Email: </label>
        <input type="email" name="email" id="in-email" value=""> 
      </div>
      
      <div class="row-form">
        <label for="in-vyber"> Vyber: </label>
        <select name="vyber" id="in-vyber" > </select>
          <option value="1"> První </option>
          <option value="2"> Druhý </option>
          <option value="3"> Třetí </option>
      </div>

      <div class="row-form">
        <label id="in-aktiv"> Aktivita: </label>
        <input name="aktiv" type="checkbox" value="1" > 
      </div>

      <div class="row-form">
        <label id="in-vyber1"> Vyber: </label>
        <input name="vyber1" type="radio value="1" > 
        <input name="vyber1" type="radio value="2" > 
        <input name="vyber1" type="radio value="3" > 
      </div>

      <div class="row-form">
        <input type="submit" class="button" value="odeslat" > 
      </div>
    </form>
  </div>
</div>


form{
  margin: 0;
  padding: 0;
}

.errormsg {
  display: none;
  size: 25em;
  color: red;
}

.needed {
  border: 2px red solid;
}

.row-form {
  display: block;
}

label{
  display: block;
  margin: 0;
  font-size: 0.875rem ;
  font-weight: normal;
  line-height: 1.8;
  color: #0a0a0a;
}

[type='text'], textarea {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 2.4375rem;
  margin: 0 0 1rem;
  padding: 0.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #cacaca;
  border-radius: 0;
  background-color: #fefefe;
  -webkit-box-shadow: inset  0 1px 2px rgba(10, 10, 10, 0.1);
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
  font-family: inherit;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5 ;
  color: #0a0a0a;
  -webkit-transition: border-color 0.25s ease-in-out,  -webkit-box-shadow 0.5s;
  transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
  transition: box-shadow 0.5s, border-color 0.25s >ease-in-out;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
}
            
[type='text'], textarea: focus{
  outline: none;
  border: 1px solid #8a8a8a;
  background-color: #fefefe;
  box-shadow: 0 0 5px #cacaca;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}

select{
  height: 2.4375rem;
  margin: 0 0 1rem;
  padding: 0.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #cacaca;
  border-radius: 0;
  background-color: #fefefe;
  font-family: inherit;
  font-size: 1rem;
  font-weight: normal;
  line-height: #1.5;
  color: #0a0a0a;
  background-image: url(...);
  background-origin: inherit;
  background-position: 1rem;
  background-repeat: normal;
  background-size: 1.5 ;
  padding-right: #0a0a0a;
  -webkit-transition: border-color 0.25s ease-in-out,  -webkit-box-shadow 0.5s;
  transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
  transition: box-shadow 0.5s, border-color 0.25s >ease-in-out;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
}  

select{
  width: 100%;
}

select: focus{
  outline: none;
  border: 1px solid #8a8a8a;
  background-color: #fefefe;
  box-shadow: 0 0 5px #cacaca;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}

textarea{
  resize: vertical;
  max-width: 100%;
  min-height: 50px;
  overflow: auto;
}

[type='checkbox'], [type='radio']{
  border: 0 0 1rem;
}

.button {
   display: inline-block;
  vertical-align: middle;
  margin: 0 0 1rem 0;
  padding: 0.85em 1em;
  border: 1px solid transparent;
  border-radius: 0;
  -webkit-transition: background-color 0.25s >ease-out, color 0.25s ease-out;
  transition: background-color 0.25s  ease-out,  color 0.25s ease-out;
  font-family: inherit ;
  font-size: 0.9rem;
  -webkit-appearance: none;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

button: hover, button: focus{
  background-color: #14679e;
  color: #fefefe;
}