KSS Style Guide

1.3 #permalink HOME GALLERY - sekcja galerii

Toggle example guides Toggle HTML markup

Oto przerobiony opis bez znaczników i z pogrubionymi nazwami klas, id i atrybutami:

Kod HTML:

  1. photoFirst: Jest to sekcja zawierająca zdjęcia. Klasa "photoFirst" może być wykorzystywana do określania stylu dla tej sekcji.

  2. h2: Jest to nagłówek drugiego poziomu, który jest ukryty (display:none;) i prawdopodobnie jest używany do celów związanych z dostępnością lub stylizacją strony.

  3. photos1, photos2, photos3: Są to trzy obrazy z różnymi identyfikatorami (id) oraz atrybutami src, alt, loading, width i height. Identyfikatory mogą być wykorzystywane do manipulacji tymi elementami za pomocą CSS lub JavaScript.

  4. toggleImages: Jest to pole wyboru typu "checkbox" z identyfikatorem "toggleImages".

  5. showMoreButton: Jest to etykieta powiązana z polem wyboru o identyfikatorze "toggleImages". Ma również klasę "buttonFoto" i zawiera tekst "LOAD MORE PHOTO".

  6. photoSecond: Jest to kolejna sekcja zawierająca obrazy. Klasa "photoSecond" może być wykorzystywana do określenia stylu dla tej sekcji.

  7. Wewnątrz "photoSecond" znajdują się trzy grupy obrazów wewnątrz <div class="animation">, z różnymi identyfikatorami i atrybutami alt, width i height.

  8. photoSecond: Jest to kolejna sekcja o klasie "photoSecond".

  9. showLessButton: Jest to druga etykieta powiązana z polem wyboru o identyfikatorze "toggleImages". Ma również klasę "buttonFoto" i zawiera tekst "LOAD LESS PHOTO".

Kod CSS:

  1. Styl dla elementu main zawiera definicje flex, szerokość i inne właściwości.

  2. Styl dla elementu o identyfikatorze "hamburger" ukrywa ten element.

  3. Styl dla elementu input o identyfikatorze "toggle" ukrywa to pole wyboru.

  4. Styl dla elementu o klasie "cart-icon" definiuje kursor, wyśrodkowanie i inne właściwości.

  5. Styl dla elementu o identyfikatorze "cartCount" definiuje wygląd licznika koszyka.

  6. Styl dla elementu o klasie "section" definiuje maksymalną szerokość i margines.

  7. Styl dla elementów <img> w sekcjach "photoFirst" i "photoSecond" definiuje szerokość i wysokość.

  8. Styl dla etykiet o klasie "button" definiuje różne właściwości, takie jak kolor, rozmiar, podkreślenie, margines itp.

  9. Styl dla etykiet o klasie "buttonFoto" definiuje wygląd przycisków na stronie.

  10. Styl dla elementu o identyfikatorze "toggleImages" definiuje jego wygląd oraz ukrywanie.

  11. Styl dla elementu o identyfikatorze "showMoreButton" ukrywa ten element, gdy pole wyboru jest zaznaczone.

  12. Styl dla elementu o identyfikatorze "showLessButton" ukrywa ten element, gdy pole wyboru nie jest zaznaczone.

  13. Styl dla elementów o klasie "photoSecond" definiuje różne właściwości, takie jak margines, wyświetlanie itp.

  14. Styl dla elementów o identyfikatorach "photos1", "photos2", "photos3" i "photosX" definiuje animacje podczas najechania myszką.

  15. Styl dla elementu o klasie "logoCat" definiuje animację na nieskończoność.

  16. Styl dla elementu o klasie "animation" definiuje różne właściwości, takie jak pozycja, wyśrodkowanie itp.

  17. Styl dla elementów o klasie "glasses" definiuje różne właściwości, takie jak pozycja, przejście itp. Są także zdefiniowane opóźnienia animacji dla niektórych elementów.

  18. Zdefiniowane są również reguły dla mediów, które dostosowują wygląd strony w zależności od szerokości ekranu.

Example

.

Lorem ipsum 1 Lorem ipsum 2 Lorem ipsum 3
oksy1 cot1
oksy2 cot2
oksy3 cot3

.

Lorem ipsum 4 Lorem ipsum 5 Lorem ipsum 6
Markup 
      <section class="photoFirst">
            <h2 style="display:none;">.</h2>
            <img id="photos1" src="img/mainPage4.webp" alt="Lorem ipsum 1" loading="lazy" width="300" height="300">
            <img id="photos2" src="img/mainPage5.webp" alt="Lorem ipsum 2" loading="lazy" width="300" height="300">
            <img id="photos3" src="img/mainPage6.webp" alt="Lorem ipsum 3" loading="lazy" width="300" height="300">
        </section>
        <input type="checkbox" id="toggleImages">
        <label for="toggleImages" id="showMoreButton" class="buttonFoto">LOAD MORE PHOTO</label>
        <div class="photoSecond">
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-regular.svg" alt="oksy1" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot1" width="140" height="140">
            </div>
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-deal-with-it.svg" alt="oksy2" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot2" width="140" height="140">
            </div>
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-hearts.svg" alt="oksy3" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot3" width="140" height="140">
            </div>
        </div>
        <section class="photoSecond">
            <h2 style="display:none;">.</h2>
            <img class="photosX" src="img/mainPage1.webp" alt="Lorem ipsum 4" loading="lazy" width="300" height="300">
            <img class="photosX" src="img/mainPage2.webp" alt="Lorem ipsum 5" loading="lazy" width="300" height="300">
            <img class="photosX" src="img/mainPage3.webp" alt="Lorem ipsum 6" loading="lazy" width="300" height="300">
        </section>
        <label for="toggleImages" id="showLessButton" class="buttonFoto">LOAD LESS PHOTO</label>
Source: styleIndex.css, line 1902