http://CursorStudentsGroup.github.io/teamwork-1
Перед початком верстки нам треба було розподілити між собою роботу.Важливим моментом було створення головного html та css файлів, які містили базуву структуру та базові стилі які б приймалися до всієї сторінки. Це дозволяє уникнути деяких конфліктів при вже в кінці роботи коли потрібно скласти все до купи. Вирішили писати без Bootstrap щоб більше було практики та розуміння того які стилі задавати елементам .Так як робота була на тижні css. тим самим уникнули використання скриптів або підключення вже готових рішень.Це також cтосується і іконочних шрифтів , замінили SVG. Брали до уваги що можливо додаватимуться нові секції або нові елементи в вже існуючі, тому не задавали секціям фіксованих висот та деяких фіксовани величин елементам секцій.Для деяких блоків використали контейнер для позиціювання внутрішнього контенту.Оптимізовували картинки.Для css файлу використовували autoprefixer , для scss coala/autoprefixer.
Тепер коли створені основні файли, кожен починає виконувати свою роботу.На цьому етапі важливим є ,звичайно, відповідність між зробленим та прикладом та правильного фіксування інформації щодо зробленої тобою роботи.Тут мається на увазі лаконічні але змістовні коміти.
Коли окремі блоки вже сворені потрібно їх обєднати в один структурований потік. І тут може виникнути конфлікти в коді. Щоб їх вирішити потрібно підійти до нього з різних сторін. Для цього треба задіяти всіх учасників розробки, щоб знайти найкращий варіант їх вирішення.
Після того як конлфікти вирішені і сторінка має повний узгоджений код за допомогою github.io даємо лінк на готову веб-сторінку. Наш проект був не великим тому для його виконання не було потрачено багато часу. А звідси випливає питання: наскільки важко і довго створювати більш великі проекти коли коду не одна сотня строк і задіяно більше людей і т.д і т.п.? Ми вирішили стоврити цей самий проект але за допомогою препроцесора Sass. Чому саме Sass? На наш погляд він є найбільш зручним у використанні.Це стосується не тільки функціоналу, швидкості написання коду, а й відносно легкого розумінню написаного.Основні функції, які ми задіяли у проекті:
- Змінні: Часто виникає ситуація коли нам потрібно приміняти одне і теж значення кілька разів.Це може бути колір, розміри, шрифт і т.д.І щоб не повторювати їх кожного разу на допомогу приходять саме змінні. Правила вложеності: Це дозволяє не тільки легше і швидше писати стилі а й краще розуміти структуру html
- Доповнення(mixin): Дає можливість уникнути повтореню кускам коду.Той код який повторюється присвоюється у змінну і в разі необхідності записуємо змінну. Компілятор , розмпізнає змінну і втсавить код .
- Розбиття css коду на модулі також нереально крута штука. Окрім перелічених вище Sass має ще кілька переваг. Ми могли написати більше але це все є вдокументаціях і нам хотілося розказати про ті, що були використані нами.