CodePen Embed

Live
​x
 
<html>
  <head>
    <title>Moja Strona</title>
    <style>
      /* Definiujemy style dla bloku o nazwie "form". Te style zostaną
      nadane na każdy blok z tą klasą - dzięki czemu możemy łatwo
      dodawać kolejne, już ostylowane formularze na naszą stronę. */
      .form {
        width: 400px;
        background-color: antiquewhite;
        margin: 10px;
        padding: 0 20px;
        font-family: sans-serif;
      }
      /* Nie każdy formulrz musi wyglądać dokładnie tak samo. Jeżeli
      chcemy wprowadzić zmiany w odniesieniu do głównego formularza, to możemy
      to zrobić za pomocą modyfikatora (--). Dzięki temu wiemy, że nie popsujemy
      nic na innych formularzach. Tutaj dodajemy pomarańczowy "border" do
      formularzy kontaktowych. */
      .form--contact {
        border: 3px solid orange;
        border-radius: 20px;
      }
      /* Każy formularz może posiadać tytuł. Jest on elementem bloku "form". Klasy
      tej używamy TYLKO wewnątrz bloku "form" i nie możemy użyć jej na innym,
      nie związanym z tym blokiem elemencie. */
      .form__title {
        text-align: center;
      }
     /* W tym przypadku element "label" nie posiada dodatkowych styli, więc korzysta
      z domyślnego stylowania. Jeżeli jednak chcemy na niektórych elementach "label"
      posiadać pogrubiony tekst, to możemy skorzystać z poniższej klasy. */
      .form__label--bold {
        font-weight: 600;
      }
​
      .form__input {
        width: 100%;
        margin-bottom: 10px;
      }
​
      /* Każdy modyfikator powinien dokładnie opisywać jaką zmianę wprowadza
      względem podstawowej wersji elementu. Widzą modyfikator o nazwie 
      "big-border" to bez czytania kodu HTML będziemy wiedzieli jakie 
      wizualne zmiany wprowadzi na wybranym elemencie. */
      .form__input--big-border {
        border-width: 3px;
      }
      /* W naszym przykładzie znaczik z tą klasą (opsijącą element bloku "form")
      posiada również klasę tworzącą nowy blok ("buttons-group"). Kod CSS
      napisany dla elementu powinien stylować ten element w odniesieniu 
      do formularza. Ostylowanie samych przycisków będzie już po stronie 
      bloku "buttons-group". */ 
      .form__buttons {
        margin: 20px 0;
      }
      /* Blok ten jest zagnieżdżony wewnątrz bloku "form". Jest to 
      dopuszczalne zachowanie. Blok "buttons-group" jest niezależnym 
      komponentem i może być używany wielokrotnie w różnych częściach strony.*/
      .buttons-group {
        text-align: center;
      }
      /* Stylujemy element należący do grupy "buttons-group". */
      .buttons-group__button {
        padding: 5px 0;
        width: 100px;
        border: none;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
        border-radius: 12px;
        margin: 0 10px;
        font-weight: 600;
        cursor: pointer;
      }
​
      /* Nazwy modyfikatorów, jeżeli tylko to mozeliwe, 
      powinny bardziej wskazywać na funkcję, nie na wygląd. */
      .buttons-group__button--send {
        background-color: seagreen;
        color: white;
      }
​
      .buttons-group__button--cancel {
        background-color: lightcoral;
        color: white;
      }
    </style>
  </head>
  <body>
    <!-- Klasa "form" tworzy nam nowy blok -->
    <form class="form form--contact">
      <!-- Blok zazwyczaj składa się z wielu elementów -->
      <h2 class="form__title">Formularz kontaktowy</h2>
      <label class="form__label" for="surname">Nazwisko:</label>
      <input class="form__input" type="text" name="surname" />
​
      <label class="form__label" for="age">Wiek:</label>
      <!-- Pojedyńczym myślnikiem możemy rozdzielać nazwy dwu członowe -->
      <input
        class="form__input form__input--big-border"
        type="number"
        name="age"
      />
​
      <label class="form__label form__label--bold"
        >Przeczytałem regulamin:
        <!-- Elementy mogą być w sobie zagnieżdżone -->
        <input class="form__checkbox" type="checkbox" name="terms" />
      </label>
​
      <!-- Wewnątrz bloku może znajdować się kolejny blok.
      Tutaj tworzymy blok o nazwie "buttons-group" -->
      <div class="form__buttons buttons-group">
        <!-- Teraz poniższe elementy należą już do grupy "buttons-group" -->
        <button
          class="buttons-group__button buttons-group__button--send"
          type="button"
        >
          Wyślij
        </button>
        <button
          class="buttons-group__button buttons-group__button--cancel"
          type="reset"
        >
          Anuluj
        </button>
      </div>
    </form>
  </body>
</html>
This Pen is owned by frontstack on CodePen.
See more by @frontstack on CodePen
External CSS

This Pen doesn't use any external CSS resources.
External JavaScript

This Pen doesn't use any external JavaScript resources.