DOU Проектор: Орна — фреймворк та CSS-бібліотека в сукупності
От редакции:
В рубрике DOU Проектор все желающие могут презентовать свой продукт (как стартап, так и ламповый pet-проект). Если вам есть о чем рассказать — приглашаем поучаствовать. Если нет — возможно, серия вдохновит на создание собственного made in Ukraine продукта. Вопросы и заявки на участие присылайте на
Данный адрес e-mail защищен от спам-ботов, Вам необходимо включить Javascript для его просмотра.
.
Початок
Всім привіт. Мене звати Дмитро Попов, я Front-end програміст з міста Чернівці. Тривалий час я створював front-end продукти або клієнтську частину продукту на замовлення та реалізовував власні ідеї. Кожен раз під час розробки виникала необхідність створювати певні класи стилів, які я вже створював в інших проектах, або, як мінімум, задавати однакові параметри. Мені захотілось якось це виправити. Також після того, як інтерфейс сайту чи веб-додатку готовий, виникає думка, як би його зробити гарнішим, додати анімацію та інше.
При роботі я використовував різні CSS-бібліотеки, але майже всі вони були направлені на конкретну область. Тобто мені потрібно було вивчати багато назв класів для того, щоб я міг вирішити поставлені задачі. Це забирало багато часу. Для вирішення цих проблем я задумав створити проект, що втілює можливості фреймворку та css-бібліотеки в сукупності, і дав йому назву «Орна» (скорочення від слова орнамент, що означає прикраса).
Ще до початку реалізації проекту я запропонував взяти участь в ньому свого товариша, Віталія Павлінського. Я розповів йому основу мого задуму, і він погодився. Спочатку я взяв на себе обов’язки розробника, а Віталій зайнявся тестуванням та дизайом. Разом ми почали розробляти наш проект, а згодом ще й залучали на аутсорсінг дизайнерів та консультантів з ПО.
Реалізація
Я почав реалізацію з детального дослідження концепцій бібліотек та фреймворків, які мені подобались — але вже з точки зору не користувача, а розробника власної бібліотеки. Створюючи власний проект, помічаєш багато нюансів, які раніше не помічав. Я дослідив багато повноцінних фреймворків та мінімалістичних бібліотек для створення веб-інтерфейсів. Концепції певних рішень черпав з продуктів і бібліотек, які зовсім не призначені для створення веб-інтерфейсів, але підхід розробників до їх створення і організації мене надихали та навчали.
Після дослідження вже існуючих продуктів я почав практичну реалізацію Орни. Для реалізації використовував виключно редактори коду Brackets та Atom. Ці редактори в сукупності дали мені весь функціонал, який мені був потрібен для продуктивної і зручної розробки.
Далі під час розробки я використовував розроблені концепції, такі як FAST та NO PADDING. Концепція FAST передбачає можливість швидкого задання звичайних, основних параметрів. У версії orna 1.3.6 вона розповсюджується на атрибути margin, height, weight, color. Це означає, що ви можете задавати розмір елементу, просто додавши до нього клас height100px, width200px. Концепція FAST не ставить за ціль дозволити задавати всі розміри, а тільки найосновніші. Це зручно для тестування та чіткої блочної розробки дизайну.
Приклад використання концепції FAST color, height, width:<div class="height100px width300px black center"></div>
Цей код створить в центрі сторінки блок чорного кольору з висотою 100 пікселів та шириною 300 пікселів.
Як ви могли помітити, класи height100px та width100px саме і є концепцією FAST.
Позиціонування елементів
Одним з найважливіших аспектів розробки є позиціонування елементів, з яким дуже часто виникають проблеми. Орна включає в собі багато класів для задання позиції елементу. Наприклад, клас textincenter вирівняє весь текст та дочірні inline елементи батьківського елементу, саме до якого він і застосовується по центру.
Наприклад:<div class="textincenter skyblue">Hello, World!</div>
Цей код створить блок з текстом в центрі.
Також у фреймворці передбаченні класи для роботи з відносно новою технологією flexbox.
Код з використанням класів flexbox, які вживаються до батьківського елементу.
<div class="flexcenter lightgray"> <div class="width30 height50px flexcenter flexcenteralt border thin gray whitecolor">1</div> <div class="width30 height50px flexcenter flexcenteralt border thin gray whitecolor">2</div> <div class="width30 height50px flexcenter flexcenteralt border thin gray whitecolor">3</div> </div>
В даному коді класи lightgray, gray — це кольори. Класи flexcenter, flexcenteralt вирівнюють блоки по головній та поперечній осі. Додавши до назви кольору слово color, ви отримаєте колір тексту.
Орна підтримує абсолютне та фіксоване позиціонування класами absolute, fixed, alwaysincenter, absoluteincenter:<div class="width200px height200px circle border thin salmon absoluteincenter"></div>
Код створить блочний елемент у формі кола діаметром 200px по центру вікна браузера.
Клас absoluteincenter — це те саме, що absolute разом з класом center. Тільки absolute може вживатись з класами left100, right100, top100, bottom100, а absoluteincenter — ні.
Приклади фігур, створені класами Орни
Код:
<div class="width100px height100px circle border textincenter">1</div> <div class="width120px height80px circle border textincenter">2</div> <div class="width100px height100px halfcirclebottom border textincenter">3</div> <div class="width100px height100px halfcircleleft border textincenter">4</div> <div class="width100px height100px halfcircleright border textincenter">5</div> <div class="width100px height100px halfcircletop border textincenter">6</div> <div class="width100px height100px border textincenter">7</div> <div class="width100px height100px bottomrightcorneroff topleftcorneroff border textincenter">8</div> <div class="width100px height100px bottomleftcorneroff toprightcorneroff border textincenter">9</div> <div class="width100px height100px corneroff border textincenter">10</div> <div class="width100px height100px roundcorner border textincenter">11</div> <div class="width100px height100px roundcorner border textincenter">12</div> <div class="width200px height100px border textincenter">13</div> <div class="width200px height100px parallelogram20 border textincenter">14</div> <div class="width200px height100px parallelogram-20 border textincenter">15</div>
Орна дозволяє створювати анімації, динаміку, іконки та інші фішки для сайтів, так звані «turnkey solutions».
Супровідна інформація
Детальну практичну інформацію можна прочитати в документації, що входить в пакет. Крім документації, в пакеті міститься файл css та javascript. Завантажити пакет також можна через Bower (bower install Orna) або NPM (npm install orna).
Деякий сегмент Орни працює на основі бібліотеки jquery, яка постачається в пакеті та рекомендована розробниками. У фреймворк вмонтовані елементи з Animate.css, Stroll.js, arcticModal.js, Rainbow.js, що покращило його функціонал та показники.
Додатки та бібліотеки, що залучені у фреймворк:
— daneden.github.io/animate.css;
— arcticlab.ru/arcticmodal;
— ruseller.com/adds/adds2658/example;
— lab.hakim.se/scroll-effects;
— jquery.com.
Подальші плани
Реліз проекту відбувся 2015 року на просторах платформи GitHub, під вільною ліцензією MIT.
Ми задоволені результатами розробки, далі плануємо удосконалювати фреймворк, створювати «екосистему» та підтримувати community. Стараємось продуктивніше та якісніше робити нашу роботу, щоб користувачі фреймворку були задоволені.
