21 Sie 2019

Responsive font – dynamiczna wielkość czcionki

Jednym z problemów jakie napotykamy podczas tworzenia strony responsywnej jest problem ze skalowaniem czcionek. Za każdym razem za pomocą breakpoints ustawiać wielkość czcionki. Dla konkretnego elementu.
W związku z tym że praktycznie zawsze korzystam z „rem” oraz „px” to aby podawać pełne wartości nie milion cyfr po przecinku np. „1.52293848rem” ustawiam pewien hack który to ułatwia.
Do elementu html dodaję:

html {
 font-size: 62.5%;
}

Jedynie za pomocą tej wartości mogę zrobić coś takiego jak ustawić „font-size: 20px” a także „font-size: 2rem” 🙂
Nie muszę przeliczać px na rem chodź i tak można zrobić to automatycznie w scss czy less, jakoś wolę ładne cyferki.

A może jest lepszy sposób na to aby za każdym razem nie zmieniać czcionki za pomocą breakpoints. No oczywiście że jest, ale raczej do wykorzystania do stron mało skomplikowanych jak landing page, jakieś prezentacje, itd. Nie widziałem tego rozwiązania w dużych projektach, ale może się mylę.

Dobra zaczynamy. Na początek zwykły tekst który będzie poddawany testom 🙂

<h1>JAKAŚ TREŚĆ</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque sunt quasi quis voluptate tempora laboriosam. Ipsa sequi earum debitis facilis. Modi dolor deserunt voluptatem, earum debitis suscipit blanditiis voluptate doloribus.</p>

Teraz „mięsko” css:

/* 1rem(16px) @ 30rem(480px) increasing to 1.5rem(24px) @ 120rem(1920px) */
@media (min-width: 30rem) {
  :root {
    font-size: calc(1rem + ((1vw - 0.3rem) * 0.5556));
    /* Where: * 0.5556 = 100 * font_Size_Difference / viewport_Width_Difference */
  }
}

/* Prevent font scaling beyond this breakpoint */
@media (min-width: 120rem) {
  :root {
    font-size: 1.5rem;
  }
}

body {
  background-color: #fff;
  color: #24292e;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-size: 1rem;
  max-width: none;
  padding: 1.618em 0 1rem;
  line-height: 1.5;
}

To rozwiązanie działa również na IE11 – przetestowane.
Niestety nie jestem pomysłodawcą tego rozwiązania w związku z tym podaję link do kalkulatora za pomocą, którego można dokładnie dobrać odpowiednie style. Wszystko opiera się o typ czcionki czy jest to px, rem, em. Wielkość czcionki, bo ustalamy jaka jest najmniejsza i największa. Ustalamy również minimalny i maksymalny braikpoint.
Wszystko to znajdziecie tutaj – [ responsive-font-calculator ]

Poniżej działający przykład.

15 Sie 2019

Prosty efekt parallax w css bez javascript

Co to takie parallax, jest to nic innego jak wrażenie głębi w wyświetlanym obrazie podczas skrolowania strony.
Tutaj pokaże bardzo prosty przykład jedno zdjęcie i tekst. Bardziej skomplikowane efekty niestety nie da się zrobić w czystym css ale to co zrobię w zupełności wystarczy do prostej strony – landing page.

Najpierw html, tak jak mówiłem nic szczególnego 😉

<div class="parallax"></div>
<div class="text">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</div>

A teraz css.

body, html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

.parallax {
  background-image: url('https://picsum.photos/id/188/1200/1000');
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.text {
  min-height: 200px;
  padding: 20px;
  line-height: 160%;
}

Najpierw aby strona była na 100% wysokości musimy ustawić ten parametr dla html jak i body.
Do klasy „.parallax”

  • background-image dodajemy nasze zdjęcie
  • height: 100% ustawiamy to zdjęcie na całą wysokość okna
  • background-attachment: fixed który odpowiada a dokładnie decyduje czy położenie danego obrazka jest stałe względem okna, czy też przewija się wraz z zawierającym go blokiem.
  • background-position: center centrujemy element
  • background-repeat: no-repeat zdjęcie nie jest powielane
  • background-size: cover cover skaluje obrazek do jak największych rozmiarów, bez jego rozciągania. Jeżeli proporcje obrazu są inne od elementu jest on przycinany aby nie zostało puste miejsce

5 Sie 2019

Licznik komentarzy Disqus

Naszym celem jest dodanie przy każdym artykule liczby komentarzy, które są dodane do artykułu.

Najpierw konfigurujemy nasz kod. W zakładce

TWOJEKONTO.disqus.com/admin/settings/community/

znajdują się trzy pola „Zero comments”, „One comment”, „Multiple comments”.
Jeżeli chcemy mieć PL tłumaczenie należy je w tych miejscach zmienić.

Niestety w Disqus nie przewidzieli, że nasz język jest tak skomplikowany i występują pewne trudności, przydało by się jeszcze jedno miejsce na wpis.
Bo: 0 komentarzy, 1 komentarz, 2 komentarze ale gdzie miejsce na wpisać 10 komentarzy 🙂
No niestety nie da się tego obejść ja ostatnie pole zmodyfikowałem na taki wpis – komentarzy: 10

Teraz czas na konkrety, na dole strony dodajemy przed zamknięciem body

<script id="dsq-count-scr" src="//kodywig.disqus.com/count.js" async>

Kod ten można użyć zarówno na linkach jak i innych elementach html.

Przykład użycia w linku:

<a href="http://example.com/artykul.html#disqus_thread" data-disqus-identifier="identyfikator-artykulu">artykul</a>

Przykład użycia w elemencie span:

<span class="disqus-comment-count" data-disqus-identifier="identyfikator-artykulu">artykul</span>

lub

<span class="disqus-comment-count" data-disqus-url="http://example.com/artykul.html">artykul</span>
27 Lip 2019

Tworzymy layout strony głównej za pomocą Grid

Nasz layout zostanie oparty o GRID. Bardzo dobrze sprawdza się do zarządzania wyglądem. Niestety jak zwykle wszystko rozbija się o to czy nasza storna ma być wspierana przez starsze przeglądarki jak opera mini czy ie 11, tzn. ie 10 i 11 wspiera grid ale w okrojonym zakresie.
Jeżeli tak to niestety grid nie jest dla nas, ale olejmy stare przeglądarki więcej na caniuse🙂

Założenia

Strona ma składać się z nagłówka w którym z prawej strony znajdzie się reklama, poniżej z lewej strony nawigacja a z prawej główny element strony z artykułem. Na dole strony stopka na całą szerokość.

Header                    Ads
Nav      Article 
Footer

Do rozdzielczości 575px wygląd elementów ma być następujący. Wszystkie elementy w jednej kolumnie.

Header
Article
Nav
Ads
Footer

Najpierw podstawowe style

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: Proxima Nova Regular, Segoe UI, Roboto, Droid Sans, Helvetica Neue, Arial, sans-serif;
  font-size: 20px;
}
17 Lip 2019

Numerowanie rekordów za pomocą CSS

Przejdźmy od razu do rzeczy, chciałbym aby w liście li znajdowała się cyfra, zwykła numeracja. Nie zrobimy tego w js, php tylko w czystym css.

<ul>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
  <li>lista</li>
</ul>

Użyjemy css

ul {
  list-style: none;
  counter-reset: section;
}

li:before {
  padding-right: 10px;
  counter-increment: section;
  content: counter(section);
}