Przejdź do treści głównej

Nazwa Twojej firmy - Zakres usług / najważniejsze produkty, adres siedziby.

Spis treści

  1. Klasy responsywności
  2. Opływanie zdjęcia
  3. Definicje
  4. Znaczniki HTML
  5. Klasy sf-xxx
  6. Rozmiar czcionki (klasy sf-)
  7. Grubość czcionki (klasy sf-)
  8. Odstępy od elementów: marginesy i paddingi (klasy sf-)
  9. Przyciski / buttony (klasy sf-)
  10. YOOtheme

Opływanie zdjęcia

Opływanie zdjęć robimy za pomocą klas „sf-pullright” oraz „sf-pullleft” (tak, 3 litery L – Pull Left).
<p><img class="sf-pullleft" src="/wp-content/uploads/images/css/skarbonka.jpg" alt=""  />Lorem ipsum 
dolor sit amet consectetur adipiscing elit. Donec accumsan sagittis elit, rutrum metus mollis eu.
Massa sed dolor sollicitudin, eget blandit lorem congue. Maecenas nisi leo, hendrerit id velit, 
auctor laoreet eros. Donec eu eros at orci feugiat porta a pellentesque lorem. In lectus turpis,
gravida id ipsum at, pellentesque facilisis augue. Donec vel eros id purus sodales gravida eu elit.
Sed et augue eo dictum fringilla. Nam eget pretium sem. Phasellus facilisis, magna vitae
maximus blandit, neque neque porttitor urna, eu mollis orci nulla vel magna. Lorem ipsum dolo
sit amet, consectetur adipiscing elit. Nulla a fringilla lorem. Curabitur vitae lacus ac eros
tincidunt sollicitudin. Integer sit amet tincidunt ligula, nec fringilla erat.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan sagittis elit, in rutrum metus mollis eu. Mauris fringilla massa sed dolor sollicitudin, eget blandit lorem congue. Maecenas nisi leo, hendrerit id velit in, auctor laoreet eros. Donec eu eros at orci feugiat porta a pellentesque lorem. In lectus turpis, gravida id ipsum at, pellentesque facilisis augue. Donec vel eros id purus sodales gravida eu in elit. Sed et augue in leo dictum fringilla. Nam eget pretium sem. Phasellus facilisis, magna vitae maximus blandit, neque neque porttitor urna, eu mollis orci nulla vel magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a fringilla lorem. Curabitur vitae lacus ac eros tincidunt sollicitudin. Integer sit amet tincidunt ligula, nec fringilla erat.

Praesent facilisis lacus nisi, ut fermentum nisi hendrerit tristique. Ut suscipit commodo quam, id sollicitudin sapien rhoncus eget. Nulla sed mi tristique, pretium sapien a, tristique nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum viverra nisl nec diam dictum, vel vestibulum metus faucibus. Nulla elementum in augue non posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Duis facilisis, dolor sagittis consequat elementum, massa felis congue felis, at varius turpis velit molestie enim. Phasellus aliquam ornare augue eget eleifend. Quisque non pretium nibh. Suspendisse potenti. Donec congue arcu elementum odio interdum, eget porta odio convallis. Nullam mattis leo turpis, sit amet laoreet diam sodales ut. Curabitur lacinia urna in nunc ullamcorper, vel viverra elit faucibus. In et dui eget diam dignissim consectetur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla tincidunt accumsan neque, id facilisis ante tristique id. Duis hendrerit finibus commodo. Sed in tempus purus, gravida feugiat justo. Maecenas maximus tincidunt ex vel luctus.

Quisque pulvinar, ante ut interdum lacinia, lacus nisl rutrum eros, et vehicula ipsum leo aliquet massa. Nunc luctus tristique bibendum. Donec nec dolor ante. Pellentesque aliquet nunc ac libero rutrum rhoncus. Aliquam porta enim sit amet interdum mattis. Mauris vestibulum, massa eget tincidunt molestie, nisi dolor vulputate nulla, nec tristique enim justo vitae mauris. Fusce vitae tellus quis quam auctor viverra vel ac metus.

Klasy responsywności

Klasa Phone Tablet Laptop Desktop
Rozdzielczość <= 767 px 768 – 959 px 960 – 1199 px >= 1200 px
.sf-displayphone + – – –
.sf-displaytablet – + – –
.sf-displaylaptop – – + –
.sf-displaydesktop – – – +
.sf-displayphoneplus + + + +
.sf-displaytabletplus – + + +
.sf-displaylaptopplus – – + +
.sf-displaydesktopplus – – – +
.sf-displayphoneminus + – – –
.sf-displaytabletminus + + – –
.sf-displaylaptopminus + + + –
.sf-displaydesktopminus + + + +

Definicje

  • Back-end
    Zaplecze, czyli część strony dostępna dla administratora, wymagająca zalogowania się.
    W przypadku Joomli zaplecze dostępne jest po dopisaniu do adresu strony /administrator, w przypadku WordPressa po dodaniu /wp-admin
    Por. front-end
  • CMS
    Patrz: System zarządzania treścią
  • CSS
    Cascading Style Sheets, czyli kaskadowe arkusze stylów. Zbiór reguł opisujących jak mają wyglądać poszczególne elementy strony. Za pomocą css-ów można wpływać m.in. na kolory i rozmary czcionek, kolor tła, odstępy pomiędzy elementami i wiele innych.
    Pełna specyfikacja na stronie https://www.w3schools.com/css/
  • Domena
    Adres internetowy głównego poziomu. Dla URLa https://www.starterfirm.pl/oferta/dodatkowe/hosting, domeną jest starterfirm.pl
  • Front-end
    Część strony dostępna dla odwiedzających, najczęściej nie wymagająca zalogowania się (w niektórych przypadkach dostęp do front-endu również może zostać zabezpieczony hasłem np. możemy zalogować się na front-end starterfim.pl, pod adresem https://www.starterfirm.pl/login dzięki czemu zyskamy dodatkowe opcje na stronie.
    Por. back-end
  • Lorem ipsum
    Łaciński tekst wykorzystywany często do wypełniania pustych przestrzeni na projektowanej stronie internetowej. Tekst w nieznanym języku pozwala skupić się przede wszystkim na wyglądzie tekstu, nie jego znaczeniu, przez co jest bardzo pomocny na etapie projektowania.
    Generator: https://www.lipsum.com/
  • HTML
    HyperText Markup Language, czyli język służący do budowania struktury stron www.
    Pełna specyfikacja na stronie https://www.w3schools.com/html/
  • Subdomena

    Adres internetowy drugiego poziomu. Dla domeny starterfirm.pl przykładem subdomeny jest pozycje.starterfirm.pl, lub uptime.starterfirm.pl. Subdomeny wykorzystywane są do wyodrębnienia serwisów, które są w posiadaniu jednego właściciela, ale spełniają oddzielne, specyficzne funkcje.

    Najpopularniejszą, choć spełniającą nieco inne zadanie subdomeną jest „www”. Choć technicznie to subdomena, jest stosowana często jako alternatywna (lub główna) wersja adresu dla strony. Przykładowo po wpisaniu starterfirm.pl, zostaniemy automatycznie przekierowani na www.starterfirm.pl. Jest to ta sama strona. Niektórzy administratorzy ustawiają adresy swoich stron odwrotnie, tzn. po wpisaniu www.domena.pl następuje automatyczne przekierowanie na domena.pl. Jeszcze inni administratorzy nie ogarniają tematu i jedna wersja adresu (np. z prefiksem www) może być niedostępna.

    Zob. również domena
  • System zarządzania treścią
    System zarządzania treścią (z ang. CMS = Content Management System). Graficzny interfejs umożliwiający edytowanie zawartości strony, bez potrzeby bezpośedniej edycji plików HTML.
  • URL
    Uniform Resource Locator, oznaczający format adresowania zasobów w Internecie. Przykładowy URL: https://www.starterfirm.pl/oferta/dodatkowe/hosting

Znaczniki HTML

  • <a>
    Link

    Służy do dodawania odnośników (linków) do innych stron (adresów URL), adresów e-mail, lub numerów telefonów.

    W parametrze href, podajemy adres, do którego chcemy zalinkować.

    Treść pomiędzy znacznikami <a> oraz </a> zawiera treść linku (potocznie anchor text).

Przykładowy fragment tekstu, w którym wykorzystany jest link do strony starterfirm.pl. Linki ułatwiają korzystanie ze stron internetowych – dzięki nim, nie trzeba przy każdym przejściu na inną stronę wpisywać jej adresu. Parametr target=”_blank” oznacza, że link zostanie otwarty w nowej karcie.
Przykładowy fragment tekstu, w którym wykorzystany jest <a href="https://www.starterfirm.pl/" target="_blank">link
do strony starterfirm.pl</a>. Linki ułatwiają korzystanie ze stron internetowych - dzięki nim, nie trzeba przy każdym
przejściu na inną stronę wpisywać jej adresu. Parametr target _blank oznacza, że link zostanie otwarty w nowej karcie.

  • Linki do stron dzielą się na:

    • wewnętrzne (do tej samej domeny (strony) na której znajduje się link)
    • zewnętrzne (do innych domen)
Link wewnętrzny to odnośnik w ramach tej samej strony. Przykładowo, jeżeli mówimy o stronie szablon.starterfirm.eu, link do strony kontaktowej: szablon.starterfirm.eu/kontakt jest linkiem wewnętrznym. Tworzymy je, bez podawania nazwy domeny w parametrze href.

Link zewnętrzny to odnośnik do innej strony (domeny). Przykładowo, jeżeli mówimy o stronie szablon.starterfirm.eu, linkiem zewnętrznym będzie każdy link prowadzący poza domenę (w tym przypadku subdomenę) szablon.starterfirm.eu. Przykładowo może to być odnośnik do strony www.starterfirm.pl (tak, pomijająć już subdomenę, adresy starterfirm.eu i starterfirm.pl to dwa rózne adresy). Z reguły linki zewnętrzne powinny posiadać parametr target=”_blank”, który powoduje otwarcie strony na nowej karcie.

Link wewnętrzny

Przykładowy fragment tekstu, w którym wykorzystany jest link wewnętrzny. Aby zalinkować np. do podstrony kontaktowej, link nie powinien posiadać w parametrze href nazwy domeny (w naszym przypadku szablon.starterfirm.eu). Powinien zawierać jedynie /kontakt. Robi się tak dlatego, aby w przypadku przeniesienia strony pod inny adres, wszystkie linki wewnętrzne nadal działały.
Przykładowy fragment tekstu, w którym wykorzystany jest link wewnętrzny. Aby zalinkować np.
do <a href="/kontakt">podstrony kontaktowej</a>, link nie powinien posiadać w parametrze href nazwy domeny
(w naszym przypadku szablon.starterfirm.eu). Powinien zawierać jedynie /kontakt. Robi się tak dlatego,
aby w przypadku przeniesienia strony pod inny adres, wszystkie linki wewnętrzne nadal działały.

Link zewnętrzny

Przykładowy fragment tekstu, w którym wykorzystany jest link zewnętrzny. Aby zalinkować do innej strony, np. do strony onet.pl stosujemy linki zewnętrzne, czyli takie, które w parametrze href zawierają pełny adres URL strony. Nie zapominajmy o dodaniu parametru target _blank, aby odnośnik otworzył się w nowej karcie.

<p>Przykładowy fragment tekstu, w którym wykorzystany jest link zewnętrzny. Aby zalinkować do innej strony, 
np. do strony <a href="https://www.onet.pl/" target="_blank">onet.pl</a> stosujemy linki zewnętrzne, czyli takie,
które w parametrze href zawierają pełny adres URL strony. Nie zapominajmy o dodaniu parametru target _blank,
aby odnośnik otworzył się w nowej karcie.</p>

  • Linki mogą również linkować (oprócz adresów stron) do:

    • numerów telefonów
    • adresów e-mail

Link do numeru telefonu

Przykładowy fragment tekstu, w którym zastosowany będzie odnośnik numer telefonu. Dodając tel: na początku linku (w parametrze href), możemy podać numer telefonu, np. (+48) 123 456 789. Dzięki temu, kliknięcie w link (na telefonie) od razu wybierze numer na klawiaturze numerycznej i pozwoli nawiązać połączenie.
Przykładowy fragment tekstu, w którym zastosowany będzie odnośnik numer telefonu. Dodając tel: na początku linku
(w parametrze href), możemy podać numer telefonu, np.  <a href="tel:+48123456789">(+48) 123 456 789</a>. 
Dzięki temu, kliknięcie w link (na telefonie) od razu wybierze numer na klawiaturze numerycznej i pozwoli nawiązać
połączenie.

UWAGA!
Parametr href zawsze musi spełniać poniższe:

  • zaczynać się od „tel:„
  • numer telefonu musi być poprzedzony „+48” (dla polskich numerów)
  • numer pisany bez spacji, czyli np. href=”tel:+48123456789″

Numer wyświetlany (znajdujący się pomiędzy <a> oraz </a>) możemy pisać w dowolny sposób (ładnie prezentujący numer).

Link do adresu e-mail

Przykładowy fragment tekstu, w którym zastosowany będzie odnośnik adres e-mail. Dodając mailto: na początku linku (w parametrze href), możemy podać adres e-mail, np. kontakt@domena.pl. Dzięki temu, kliknięcie w link od razu otworzy domyślny program pocztowy na urządzeniu.
Przykładowy fragment tekstu, w którym zastosowany będzie odnośnik adres e-mail. Dodając mailto: na początku linku
(w parametrze href), możemy podać adres e-mail, np.  <a href="mailto:kontakt@domena.pl">kontakt@domena.pl</a>. 
Dzięki temu, kliknięcie w link od razu otworzy domyślny program pocztowy na urządzeniu.
  • <blockquote>
    Cytat

    Element służący do cytowania fragmentu treści z zewnętrznych źródeł.

    W parametrze cite podajemy url źródła, z którego cytujemy.

Pozycjonowanie, to proces opierający się na dwóch niezależnych, ale równie ważnych działaniach: wewnętrznych – po stronie witryny (optymalizacja strony pod kątem wyszukiwarek) oraz zewnętrznych – poza witryną (m.in. pozyskiwanie dobrej jakości odnośników, tzw. link building).
<blockquote cite="https://www.starterfirm.pl/oferta/pozycjonowanie">Pozycjonowanie, to proces opierający się
na dwóch niezależnych, ale równie ważnych działaniach: wewnętrznych - po stronie witryny (optymalizacja strony
pod kątem wyszukiwarek) oraz zewnętrznych - poza witryną (m.in. pozyskiwanie dobrej jakości odnośników, 
tzw. link building).</blockquote>
  • <p>
    Akapit
    Podstawowy element, blok tekstu. Teoretycznie podstawowy tekst możemy zapisać bez elementu <p>, natomiast nie powinno się tego robić, bo możemy mieć później problem z wpływaniem na wygląd takiego nienazwanego bloku tekstu. Wykorzystanie <p> pozwoli nam ustawić takie parametry jak wielkość, czy kolor czcionki za pomocą css.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed mauris elit. Maecenas erat purus, vulputate ut eros sit amet, porta pulvinar dui. Pellentesque mattis sed lectus ut pellentesque. Aenean aliquet finibus arcu vulputate consequat. Suspendisse non molestie metus, eu gravida massa. Fusce non blandit magna, eu ultrices neque. Sed in sagittis lectus. Proin pretium urna nibh, tempus euismod.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed mauris elit. Maecenas erat purus, vulputate
ut eros sit amet, porta pulvinar dui. Pellentesque mattis sed lectus ut pellentesque. Aenean aliquet finibus arcu
vulputate consequat. Suspendisse non molestie metus, eu gravida massa. Fusce non blandit magna, eu ultrices neque.
Sed in sagittis lectus. Proin pretium urna nibh, tempus euismod.</p>

Klasy sf-xxx

Klasy sf-xxx, działają niezależnie od CMSa (Joomla, WordPress, czysty HTML itd.). Na każdej stronie, na której mamy wgrany plik custom.css.
Jeżeli na jakieś stronie nie działają klasy sf-, trzeba zainstalować plik css (Michał).

Stosowanie klas

Klasę można dodać do dowolnego elementu (np. div, H1, p, a), za pomocą następującej konstrukcji:
<p class="sf-nazwaklasy">Lorem ipsum</p>
Klasy można łączyć (dodawać więcej niż jedną klasę dla danego elementu). Dodajemy je pomiędzy cudzysłowami, oddzielone spacją (bez przecinków).
<p class="sf-nazwaklasy1 sf-nazwaklasy2">Lorem ipsum</p>

Rozmiar czcionki

Klasy związane z rozmiarem czcionki, przemnażają bazowy rozmiar przez określone wartości.

  • zwiększenie czcionki:
    sf-hero, sf-promo, sf-subpromo, sf-lead i sf-sublead
  • wymuszenie bazowego rozmiaru:
    sf-normal
  • zmniejszenie rozmiaru:
    sf-meta

Klasa sf-normal, to domyślny rozmiar czcionki zwykłego tekstu (akapitu). Jest ona mnożnikiem 1x, czyli w HTML 1rem (jeden element bazowy – root element).

Pozostałe klasy zwiększają podstawowy rozmiar, np. sf-hero jest 4 razy większa, 4x czyli 4rem.

Klasa sf-meta jest jedynym mnożnikiem zmniejszającym czcionkę względem normalnego rozmiaru tekstu (0,8rem).

Tekst z klasą sf-promo
<p class="sf-promo">Tekst z klasą sf-promo</p>
Tekst z klasą sf-lead
<p class="sf-lead">Tekst z klasą sf-lead</p>

Wszystkie możliwe rozmiary:

sf-hero (4rem)

sf-promo (3rem)

sf-subpromo (2rem)

sf-lead (1.5rem)

sf-sublead (1.2rem)

sf-normal (1rem)

sf-meta (0.8rem)

Grubość czcionki

Klas grubości mamy 9, ale to czy faktycznie można użyć (czy będzie różnica w wyglądzie) konkretną klasę na jakiejś stronie, zależy od tego jakie czcionki są na niej osadzone.

Tutaj (na szablon.starterfirm.eu) mamy osadzony (zainstalowany) font Open Sans i grubości: 300, 400, 500, 600, 700, 800. W związku z tym cieńsze niż 300 przyjmą najcieńszą możliwą wartość (300), a grubsze najgrubszą możliwą wartość (800).

Jeżeli czcionka stosowana na stronie, jest zainstalwoana na naszym komputerze, może wyświetlać się we wszystkich możliwych grubościach, pomimo że nie są one osadzone na stronie. Na stronach klientów najczęściej mamy 1-2 grubości do wyboru i trzeba to sprawdzić.

Tekst o grubości 300

<p class="sf-300">Tekst o grubości 300</p>

Tekst o grubości 800

<p class="sf-800">Tekst o grubości 800</p>

Wszystkie możliwe grubości:

sf-100

sf-200

sf-300

sf-400

sf-500

sf-600

sf-700

sf-800

sf-900

Marginesy i paddingi

Ostępy pomiędzy elementami można uzyskać za pomocą elementów margin i padding.
Różnica pomiędzy nimi jest taka, że:
  • margines nie zawiera tła elementu
  • padding zawiera tło elementu
Tekst z ogromnym lewym marginesem (huge margin left):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac dui id lacus fringilla rutrum. Integer pulvinar nec ante vitae pellentesque. Proin finibus semper sem, in luctus ipsum. Ut sit amet tortor felis. In pellentesque tortor ut orci accumsan scelerisque. Aliquam ornare odio vel velit malesuada, ut aliquam libero gravida. Maecenas lobortis turpis eget ex vulputate, eget mollis velit venenatis. Integer nec leo et ipsum vehicula fermentum. Sed ac tincidunt odio. In metus lectus, pulvinar eget mattis non, tempor nec diam. Aliquam ante ex, sodales sed libero id, commodo sollicitudin tortor.

<p class="sf-hugemarginleft">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Praesent ac dui id lacus fringilla
rutrum. Integer pulvinar nec ante vitae pellentesque. Proin
finibus semper sem, luctus ipsum. Ut sit amet tortor felis.
In pellentesque tortor ut orci accumsan scelerisque. Aliquam
ornare odio vel velit malesuada, ut aliquam libero gravida.
Maecenas lobortis turpis eget ex vulputate, eget mollis velit
venenatis. Integer nec leo et ipsum vehicula fermentum. Sed ac
tincidunt odio. In metus lectus, pulvinar eget mattis non,
tempor nec diam. Aliquam ante ex, sodales sed libero id,
commodo sollicitudin tortor.</p>
Tekst z ogromnym prawym paddingiem (huge padding right):

Praesent in ipsum dui. Fusce ultrices ac orci sit amet mattis. Ut vestibulum, ligula vitae ultrices fringilla, justo risus fermentum orci, sed placerat leo ex quis neque. Suspendisse bibendum a odio eget sagittis. Nam condimentum odio non nunc ultrices, et dapibus massa lacinia. Nunc sed felis augue. Aenean volutpat, sapien in viverra consectetur, sapien quam eleifend ipsum, sed scelerisque dui tortor vel enim. Suspendisse efficitur turpis vel nisl auctor, a posuere ligula condimentum. 

<p class="sf-hugepaddingright">Praesent ipsum dui. Fusce
ultrices ac orci sit amet mattis. Ut vestibulum, ligula vitae
ultrices fringilla, justo risus fermentum orci, sed placerat
leo ex quis neque. Suspendisse bibendum a odio eget sagittis.
Nam condimentum odio non nunc ultrices, et dapibus massa lacinia.
Nunc sed felis augue. Aenean volutpat, sapien viverra consectetur,
sapien quam eleifend ipsum, sed scelerisque dui tortor vel enim.
Suspendisse efficitur turpis vel nisl auctor, a posuere ligula
condimentum.</p>

Wszystkie możliwe rozmiary:

  • huge
  • big
  • med
  • small
  • tiny
  • no

Wszystkie możliwe rodzaje:

  • marign
  • padding

Wszystkie możliwe kierunki:

  • all
  • left
  • right
  • top
  • bottom

Przyciski (buttony)

Aby link wyświetlał się jako przycisk, należy dodać odpowiednią klasę do elementu a.
Mamy dwa rodzaje przycisków:
  • solid oznacza wypełniony kolorem przycisk
  • border ozanacza przycisk, który ma tylko kolorowe krawędzie
Każdy rodzaj występuje w przynajmniej dwóch kolorach:
  • Kolor pierwszy (1) oznacza pierwszy kolor akcentu na stronie
  • Kolor drugi (2) oznacza drugi akcent kolorystyczny na stronie

Na szablon.starterfirm.eu drugi kolor jest akurat kolorem #313131, czyli ciemnoszarym, bardzo podobnym do koloru zwykłego tekstu.

Solid button 1
<a class="sf-solidbutton1">Solid button 1</a>
Border button 1
<a class="sf-borderbutton1">Border button 1</a>
Solid button 2 
<a class="sf-solidbutton2">Solid button 2</a>
Border button 2
<a class="sf-borderbutton2">Border button 2</a>

Ankieta

Która odpowiedź na pytanie jest najlepsza?
Czy pierwsza odpowiedź na pytanie w ankiecie jest fajna?
A może druga odpowiedź jest lepsza?
Niektórzy wybrali odpowiedź trzecią

YOOtheme – Podgląd elementów

YOOtheme > STYLE > Zaznaczamy: Preview all UI components
Dzięki temu otrzymujemy podgląd wszystkich elementów dostępnych w YOOtheme: