Sass-tutorial-complete/index.html at master · EmOlsz/Sass-tutorial-complete · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kurs Sass</title>
    <link rel="stylesheet" href="dist/css/main.css" />
    <link href="https://fonts.googleapis.com/css?family=Dynalight|Lato:300,400,500,600,700,800,900" rel="stylesheet">
</head>
<body>

<!-- Header -->
<header class="header">
    <div class="header__container">
        <a class="header__logo">
            <img class="header__logo-item" src="dist/images/sass-logo.png" />
        </a>
    </div>
</header>
<main class="main-content container">

    <!-- Introduction section -->
    <section class="introduction block">
        <div class="introduction__image">
            <img class="introduction__image-item" src="dist/images/sass-logo-big.png" />
        </div>
        <div class="introduction__description">
            <p class="introduction__description-paragraph">Sass to język skryptowy rozszerzający możliwości czystego CSS'a. Dzięki szerokiej puli funkcjonalności, używany jest do osiągnięcia zaawansowanego, czystego i łatwego w utrzymaniu kodu.</p>
            <a class="introduction__description-button" href="http://sass-lang.com">Strona Sass</a>
        </div>
    </section>

    <!-- Features section -->
    <section class="features-section">
        <article class="features features__variables block">
            <h1 class="features__heading">Zmienne</h1>
            <div class="features__description">
                <p class="features__description-paragraph">
                    Pozwalają na przechowywanie dowolnych wartości używanych do tworzenia styli ; wartości liczbowych, stringów, kolorów etc.
                </p>
                <p class="features__description-paragraph">
                    Dzięki re-używalności możliwe jest zastosowanie jednej zmiennej w wielu miejscach projektu - w przypadku edycji wartości zmiennej, korekta zostanie wprowadzona we wszystkich miejscach.
                </p>
            </div>
        </article>
        <article class="features features__nesting block">
            <h1 class="features__heading">Zagnieżdżanie</h1>
            <div class="features__description">
                <p class="features__description-paragraph">
                    Symulują ideę zagnieżdżeń znaną z HTML'a, poprawiając mniej czytelną metodologię czystego CSS'a.
                </p>
                <p class="features__description-paragraph">
                    Wprowadzona koncepcja selektora rodzica pozwala na szybkie określenie pseudoklas elementów.
                </p>
            </div>
        </article>
        <article class="features features__partials block">
            <h1 class="features__heading">Struktura</h1>
            <div class="features__description">
                <p class="features__description-paragraph">
                    Rozbijanie projektu na mniejsze, bardziej szczegółowe części odnoszące się do konkretnych funkcjonalności / bloków kodu.
                </p>
                <p class="features__description-paragraph">
                    Pozwalają na logiczne rozdzielenie większej całości oraz łatwe utrzymanie i edycję styli.
                </p>
            </div>
        </article>
        <article class="features features__mixins block">
            <h1 class="features__heading">Mixiny, extend</h1>
            <div class="features__description">
                <p class="features__description-paragraph">
                    Wprowadzają koncepcję zapisania deklaracji CSS'a w postaci re-używalnej zmiennej.
                </p>
                <p class="features__description-paragraph">
                    Tak samo jak zmienne, pozwalają na łatwą implementację i edycję powielanych mechanizmów. Mogą przekazywać podane bezpośrednio przy implementacji parametry.
                </p>
            </div>
        </article>
        <article class="features features__operators block">
            <h1 class="features__heading">Operatory matematyczne</h1>
            <div class="features__description">
                <p class="features__description-paragraph">
                    Umożliwiają przeprowadzanie działań matematycznych.
                </p>
                <p class="features__description-paragraph">
                    Dzięki operatorom możliwe jest obliczanie wartości na podstawie określonych danych. Zastosowanie ich w połączeniu z mixinami pozwala na zaawansowane operacje.
                </p>
            </div>
        </article>
        <article class="features features__functions block">
            <h1 class="features__heading">Listy, mapy i logika</h1>
            <div class="features__description">
                <p class="features__description-paragraph">
                    Przybliża funkcjonalność języków programowania.
                </p>
                <p class="features__description-paragraph">
                    Listy i mapy swoją strukturą i zastosowaniem nawiązują do tablic i obiektów, natomiast logika oddaje charakter instrukcji warunkowych oraz funkcji. Możliwe jest definiowanie nowych, własnych rozwiązań.
                </p>
            </div>
        </article>
    </section>

    <!-- Pros and cons section -->
    <section class="pros-cons-section">
        <article class="pros-cons pros block">
            <h1 class="pros-cons__heading">Zalety</h1>
            <div class="pros-cons__background-container pros__background-container"></div>
            <div class="pros-cons__description">
                <label class="pros-cons__description-label">
                    <input class="pros-cons__description-input" type="checkbox">
                    <span class="pros-cons__description-group">
                            <span class="pros-cons__description-counter pros-cons__description-counter_1">1.</span>
                            <span class="pros-cons__description-text pros-cons__description-text_1">Wprowadzony szereg nowych funkcjonalności</span>
                        </span>
                </label>
                <label class="pros-cons__description-label">
                    <input class="pros-cons__description-input" type="checkbox">
                    <span class="pros-cons__description-group">
                            <span class="pros-cons__description-counter pros-cons__description-counter_2">2.</span>
                            <span class="pros-cons__description-text pros-cons__description-text_2">Łatwiejsze tworzenie i utrzymanie kodu</span>
                        </span>
                </label>
                <label class="pros-cons__description-label">
                    <input class="pros-cons__description-input" type="checkbox">
                    <span class="pros-cons__description-group">
                            <span class="pros-cons__description-counter pros-cons__description-counter_3">3.</span>
                            <span class="pros-cons__description-text pros-cons__description-text_3">Rozszerzenie możliwość OOCSS</span>
                        </span>
                </label>
            </div>
        </article>
        <article class="pros-cons cons block">
            <h1 class="pros-cons__heading">Wady</h1>
            <div class="pros-cons__background-container cons__background-container"></div>
            <div class="pros-cons__description">
                <label class="pros-cons__description-label">
                    <input class="pros-cons__description-input" type="checkbox">
                    <span class="pros-cons__description-group">
                            <span class="pros-cons__description-counter pros-cons__description-counter_1">1.</span>
                            <span class="pros-cons__description-text pros-cons__description-text_1">Brak umiaru w zagnieżdżaniu może się zemścić</span>
                        </span>
                </label>
                <label class="pros-cons__description-label">
                    <input class="pros-cons__description-input" type="checkbox">
                    <span class="pros-cons__description-group">
                            <span class="pros-cons__description-counter pros-cons__description-counter_2">2.</span>
                            <span class="pros-cons__description-text pros-cons__description-text_2">Niekonsekwentny kod jest trudny w utrzymaniu</span>
                        </span>
                </label>
                <label class="pros-cons__description-label">
                    <input class="pros-cons__description-input" type="checkbox">
                    <span class="pros-cons__description-group">
                            <span class="pros-cons__description-counter pros-cons__description-counter_3">3.</span>
                            <span class="pros-cons__description-text pros-cons__description-text_3">Rozbudowana funkcjonalność wymaga wiedzy</span>
                        </span>
                </label>
            </div>
        </article>
    </section>
</main>
<footer class="footer">
    <div class="footer__container">
        <section class="footer__title">
            <h1 class="footer__title-heading">Sass website</h1>
        </section>
        <aside class="footer__credits">
            <h1 class="footer__credits-heading">Credits:</h1>
            <ul class="footer__credits-list">
                <li class="footer__credits-element">
                    <span class="footer__credits-info">Sass logo: </span>
                    <a class="footer__credits-link" href="http://sass-lang.com">Sass website</a>
                </li>
                <li class="footer__credits-element">
                    <span class="footer__credits-info">Hamburger menu icon: </span>
                    <a class="footer__credits-link" href="https://www.iconfinder.com/DLugo">Denis Mikhutin</a>
                </li>
                <li class="footer__credits-element">
                    <span class="footer__credits-info">Close menu, minus, plus icons: </span>
                    <a class="footer__credits-link" href="https://www.iconfinder.com/Enesdal">Enes Dal</a>
                </li>
            </ul>
        </aside>
    </div>
</footer>
</body>
</html>