Responsywny szablon od zera

» instrukcja » Responsywny szablon od zera

W tej instrukcji dowiecie się jak stworzyć własny, responsywny szablon na blogspocie. Instrukcja przeznaczona jest dla trochę bardziej zaawansowanych osób, które potrafią posługiwać się HTMLem. Tutaj macie link do starej instrukcji Jak dopasować szablon do każdej rozdzielczości?	Gotowy szablon do pobrania Demo szablonu do pobrania

Krok 1.
Stwórzcie sobie blog próbny, wejdźcie w HTML i usuńcie wszystko, prócz

<b:widget id='Blog1' locked='true' title='Posty na blogu' type='Blog'>
dużo rzeczy w środku
</b:widget>

Krok 2.
Na samej górze dodajcie:

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'/>
   <head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[

]]></b:skin>

       </head>
       <body>

Pod </b:widget> dodajcie:

</body>
</html>

Krok 3.
Teraz musimy utworzyć sekcje, w której będą się znajdować nasze widgety. Wszystko działa na podobnej zasadzie co <div>. Możecie utworzyć ich ile tylko chcecie, ale pamiętajcie o zmianie nazwy id="nazwa"

<b:section id='kolumna-1'>
nasz widget, czyli np. cały kod Blog1

</b:section>

Krok 4.
Zapiszcie szablon i zobaczcie czy wszystko działa. Otwórzcie swój blog w nowej karcie, czyż nie wygląda pięknie? ^o^ Teraz możecie wejść w układ, dodać więcej widetów, dodać nowe sekcje. Po tym trzeba wejść w CSS, albo w projektancie, albo w HTML:

<b:skin><![CDATA[
tutaj daj swój kod css
]]></b:skin>

Krok 5.
Podstawowy kod, od którego powinniście zacząć wygląda tak:

body {
margin:0px;
padding:0;
font-family: open sans;
font-size:13px;
color:#ddd;
background: #0e0e18;
}

a { text-decoration:none; color: #ddd; list-style-type: none; list-style-image: none; }
a:visited { color: #666; }
a:hover { color:#fff; }

Krok 6.
Teraz należy przejść do edycji sekcji w CSS. Jak stworzyć responsywny szablon, czyli taki, który na każdej rozdzielczość będzie wyglądać dobrze? Zasada jest prosta: width: %; i position: relative;.

#kolumna-1 {
width: 50% ;
margin-left: 25% ;
position: relative ;
}

Wystrzegajcie się używania position: absolute;. Ta funkcja jest bardzo przydatna, jednak trzeba dokładnie wiedzieć kiedy ją stosować, dlatego polecam poczytać o niej trochę więcej.

Krok +
Jeżeli macie dużo widetów bez tytułów, polecam i tak je nazywać, a następnie jedynie usunąć ich tytuł w CSS [ selektor h2 { display: none; } ]. To bardzo ułatwia pracę, gdy potrzebujesz coś znaleźć lub gdy chcesz coś edytować, a nie możesz tego zrobić na blogu i musisz przez układ. Ja wiele razy miałam tak, że nie mogłam znaleźć odpowiedniego widgetu HTML/JS, a z tą prostą metodą życie stało się łatwiejsze. W HTML widgety wyglądają tak:

<b:widget id='LinkList1' locked='false' title='Tytuł danego widgetu' type='LinkList'>

więc łatwo możecie znaleźć dany selektor.
Dodatkowo jest to zapewne duże ułatwienie dla ludzi, którzy będą używać stworzonego przez ciebie szablonu.

Krok ++
Żeby szablon prezentował się dobrze, nie zapominajcie o edycji ciasteczek!

div#cookieChoiceInfo {
z-index:999999999999999999999999999999999999999999999999999999999;
background: #0c0c0c;
color:#fff;
font-size: 10px !important;
font-family: open sans;
}
#cookieChoiceInfo > div > span.cookie-choices-text { font-size: 10px;}
#cookieChoiceInfo > a:nth-child(2),a#cookieChoiceDismiss {
color:#ddd;
font-size:10px;
font-weight:bold;
}

#cookieChoiceInfo > a:nth-child(2):hover, a#cookieChoiceDismiss:hover {
color:#666;
}

Brak komentarzy:

Prześlij komentarz