Zaznacz stronę

Wrodzone lenistwo, jak zawsze każe mi poszukiwać usprawnienia tworzenia stron. Warszawa i jej anonimowość jest bardzo pomocna, więc znowu zasiadłem w jakimś zaułku i poczytałem sobie nt. framworka css: Blueprintcss. Okazał się bardzo przyjaznym narzędziem.

Tak z grubsza o co w tym chodzi? Otóż po pobraniu sobie paczki ze stylami i po podlinkowaniu ich w naszym dokumencie html:

1
<link rel="stylesheet" type="text/css" href="blueprint-css-master/blueprint/screen.css">

I już nie musimy już ręcznie wyliczać szerokości każdego kontenera, wystarczy mu nadać klasę: od span-1 do span-24. Jeżeli suma jest mniejsza od 24 to te elementy układają się obok siebie, utrzymując pomiędzy nimi pewien odstęp (o nim później).

Wpisując np poniższy kod:

1
2
3
4
5
<div class="span-24">
   <div class="span-12"></div>
   <div class="span-12 last"></div>
</div>
</pre>

Otrzymamy kontener z dwiema kolumnami na zawartość oddzielonymi od siebie. Jak wspomniałem, suma musi się równać 24, stąd są dwie klasy span-12, drugi element div ma jeszcze jedną klasę last. Jest to element konieczny, ponieważ elementy mają zdefiniowany prawy margines, a ostatni element w wierszu go nie potrzebuje, wręcz przeszkadza – z nim elementy nie mieszczą się w rzędzie.

Zagnieżdżanie sprawdza się na każdym z poziomów, np jedną z kolumn możemy podzielić na dwie kolejne:

1
2
3
4
5
6
7
8
<div class="span-24">
   <div class="span-12">
      <div class="span-6"></div>
      <div class="span-6 last"></div>
   </div>

   <div class="span-12 last"></div>
</div>

Jak widać, wystarczy pamiętać o sumie-24, i oczywiście o klasie last

Można to oczywiście zrobić prościej:

1
2
3
4
5
<div class="span-24">
      <div class="span-6"></div>
      <div class="span-6"></div>
      <div class="span-12 last"></div>
</div>

ale wszystko już kwestia czy potrzebujemy kontenery na pojedyncze elementy czy na kolejny układ jak poniżej:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="span-24">
   <div class="span-12">
      <div class="span-6"></div>
      <div class="span-6 last">
          <div class="span-6 last"></div>r
          <div class="span-6 last">
               <div class="span-3"></div>
               <div class="span-3 last"></div>
          </div>
      </div>
   </div>

   <div class="span-12 last"></div>
</div>

I tak dalej.
Z pewnością będę się dalej przegryzał przez tego frameworka, bo postanowiłem na nim oprzeć jedną z aktualnie projektowanych stron.
Więc zapraszam ponownie.

Maciek