DOU Проектор: Орна — фреймворк та CSS-бібліотека в сукупності

Від редакції:
В рубриці DOU Проектор всі бажаючі можуть презентувати свій продукт (як стартап, так і ламповий pet-проект). Якщо вам є про що розповісти — запрошуємо прийняти участь. Якщо ні — можливо, серія надихне на створення власного made in Ukraine продукту. Питання і заявки на участь надсилайте на editors@dou.ua.

Початок

Всім привіт. Мене звати Дмитро Попов, я 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. Стараємось продуктивніше та якісніше робити нашу роботу, щоб користувачі фреймворку були задоволені.

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті.

👍НравитсяПонравилось0
В избранноеВ избранном0
Подписаться на автора
LinkedIn



Підписуйтесь: Soundcloud | Google Podcast | YouTube


66 комментариев

Подписаться на комментарииОтписаться от комментариев Комментарии могут оставлять только пользователи с подтвержденными аккаунтами.

Дякую за ваші коментарі, хочь хтось писав що ми на них не зважаємо, ми все таки на них зважаємо, саме для цього ми і опублікували тут проект, в DOU Проектор, щоб побачити реакцію і наші помилки.
Почитавши коментарі і думки ми змінили своє бачення на деякі речі і реалізували їх в бібліотеці Orna JS. Парсер для Атомарного CSS.
ornaorg.github.io
Дякую тим хто коректно і зважено писав

Це реально помилковий напрямок — клас має відображати логічну суть елементу, а не фізичну, наприклад «.post-image», а не «.width87px.height87px.position-absolute.left0.top0». Зараз всі від цього відходять, наприклад у bootstrap — там не «alert-red», а «alert-danger».

Детальна інформація по фреймворку буде публікуватись в групі вк та на сайті
vk.com/ornaorg
ornaorg.github.io
Кожен бажаючий може підключитись до проекту

Це шо, тролінг такий?

Колись росіянин Денис Попов розробив принципово нову систему BolgenOS із нескучними обоями, а тепер українець Діма Попов розробляє принципово новий CSS фреймворк з нескучним оголошенням величин через класи.

Я один з розробників, зробили фреймворк таким як ми хотіли його бачити, ми не кричимо що він принципово новий. Принцип atomic css.

Интересный факт. Это уже не первая статья о «гениальной» идее за последнее время. Почему не один автор статьи/идеи банально не воспринимает критику?

Чому це не сприймає, бо ви так написали? Ми читаємо і робимо свої висновки, ніхто не позиціонує ідею як геніальну lol

Концепция очень напомнила atomic css (о чем уже отписались в комментариях до меня). Я лично использую scss порт вот этой микро библиотеки — github.com/...s/blob/master/atomic.less, работается с ней отлично.

С ней код из вашего примера
height100px width300px black center

превращается в
h-100 w-100 c-b ta-c

По личному опыту скажу, что чем длиннее название класса, тем тяжелее заставить себя его писать. Вы можете возразить о читаемости класса, но поверьте, то же ta-c (text-align: center) гораздо точнее передает смысл, чем center (что именно центрируется: текст или блок? или это просто центральный блок из серии .left-block и .right-block?)

Кстати для пользователей emmet’a ta-c уже знаком, и после expand abbreviation превращается в тот самый text-align: center (это конечно же не единственная команда: w100 превратится в width: 100px; fz18 в font-size: 18px, etc.)

Ну а вообще начинание конечно хорошее, будем следить.

P.S. мне показалось, или в посте нет ссылки на github?

В Орні клас center центрує блокові елементи по центру сторінки, чи бітьківського елементу і вживається безпосередньо до елементу. textincenter центрує весь текст і дочірні inline елементи в центрі батьківського, саме до якого він вживається. При великій кількості класів такі шифри типу

ta-c
стають не зрозумілі.

а есть примеры сайтов, которые используют ваш фреймверк ?

Фреймворк був не так давно опублікований, тому сайти на ньому ще в розробці і не вийшли в продакшн, зараз приклади можна подивитись в пакеті екземплів, але це не готові шаблони сторінок, а конкретні елементи і приклади функціоналу.
github.com/OrnaOrg/ornaexamples

Господи, спаси и сохрани =)

та ні, зайве це ~180кб мініфікованного CSS, в котором все запихули в class и который не понятно что с практической точки зрения делает полезного при таком сумасшедшем весе, да еще тянет за собой, как я понял, стандартный набор html кодера в режиме х*як-х*як и в продакшн типа JQ и еще чего то там. Такой “фронтенд” в кошмарах снится будет в 2016 году.

div class="width200px height100px border textincenter"
О да, это много чего решает=)) глубокий смысл...
Ну а с точки зрения повышения скиллов, то конечно полезно писать велосипеды, иногда в них рождается истина, но в таком виде, имхо, это не тот случай=)

мало того что 180кб так еще и в class будет “width200px height600px border textincenter flexbox redcolor bluebg fontsize2em shadow2px bla bla bla”

да я тоже об этом, по сути это перезагрузка инлайновых стилей..
Лучше бы ТС выкинул инлайновые извращения, оформил в виде «модулей» для подмешивания/импорта в SASS и все, какой то смысл в этом бы был а там по ходу дела.
Интересно, но лень смотреть, есть ли там статические правила на все 1-4000px width, height и т.д=)

Кстати, вы не думали о том, чтобы добавить какие-то общие классы (когторые будут содержать более одного стиля). Собственно, как это и сделано в популярных CSS-фреймворках.
Если нет, то как будет выглядеть элемент, который хоть немного сложнее круга, к примеру? В виде 10-20 классов, которые «просто» запомнить? Или проще тогда написать свой класс?
На кого ориентирован данный «фреймворк»?
Ну и последний, но самый интересный вопрос — к чему добавлять сотни классов типа height/width/etc, если 99% из них не будут использованы?

Привіт, готові рішення в Орні є, стиль списків до прикладу. Готові рішення в так званих відомих фреймворках так само не завжди потрібні, це треба розуміти, тому в Орні їх мінімум, щоб розробник компонував свої, це і є перевага концепції atomic css. При використані наприклад jquery чи backbone також не використовується весь потенціал але підвантажується все. Хоча що варта вага цих файлів в порівняні з якісними картинками на сторінці.

Готові рішення в так званих відомих фреймворках так само не завжди потрібні
Но для этого и нужен фреймворк, чтобы предоставлять готовые решения.
щоб розробник компонував свої
Писать стили уже не модно?
При використані наприклад jquery чи backbone також не використовується весь потенціал
Если вы используете jquery только для селектора, то у меня для вас плохие новости. Да и backbone нужно использовать нормально.
Хоча що варта вага цих файлів
Даже минифицированный orna.css весит 186кб, что, к примеру, в полтора раза больше чем тот же бутстрап.цсс. Вот только бутстрап — это полноценный фреймфорк, а не набор элементарных стилей. Оправдано ли это?

Я нічого немаю проти бутстрапа, але повноціний фреймворк, це абстракте значення, це не аргумент. jquery я використовую щоб писати менше, робити більше, це саме і є їх слоган. Якщо ви хочете сказати, що кожен проект на приведених мною бібліотеках використовує весь їх функціонал, то це не так і це факт. Дуже приємно що ви мініфікували orna.css ={)

Круто. Так тримати. Цей проект заслуговує на продовження й підтримку.

На жаль, ні. Найкрутіше в цьому проекті — логотип. Все інше є величезною помилкою. По суті автор вкотре перевинайшов запис CSS як в атрибуті style, тільки класами.

Привіт, я нічого не перевинайшов, якщо грубо то я створював заготовки класів, більше двох тисяч, щоб людина могла ними користуватись, по бажанню. Орну я використовую в своїй роботі, мені зручно, людям яким я її показував на практиці сподобалось.

Особисто я тут зручності не бачу, як фронт-енд інженер я бачу тут лише поганий код і слабке практичне застосування.

Дякую, ми намагаємось зробити щось класне, українське. Орна це тільки один з інструментів над яким ми зараз працюємо.

Слабые разработчики им пользоваться не смогут.
Сильные не захотят.
Все таки, для кого же он?

Не зовсім так. Слабкі можуть, якщо їх навчити, швидко робити круті речі. Сильні якщо захочуть освоять і це їм полегшить роботу. Вчитись кодити треба в любому випадку, це все таки не MUSE але може дати хороший початок для бажаючих навчитись.

Вы конечно молодец что что-то там делаете и придумываете, разрабатываете свои какие-то решения, делитесь ими с людьми, сорри но это — ужас.

Фрейморк. Як тонко і влучно.

я буду гнать свой велосипед )

Але ми щей чужі використовуєм велики, майже всі=)

2278 классов. Можно было что угодно выучить за время их придумывания.

А какой смысл дублировать css точь в точь в названии классов ? Это особо не облегчит работу. А новичкам все равно нужно будет знать css свойства
мне быстрее на emmet написать w100 h100, чем писать классы width100px height100px
И да, на практике у елементов оочень редко бывает ширина прямо 100px )
можно было бы на JS написать парсер классов, который бы класс «widthXXpx» превращал бы в инлайновый style="width: XXpx;" — но это тоже не имеет особо смысла, так как это будет лишняя нагрузка на браузер пользователя

А можно еще 100 классов добавить width1px...width100px. Это же ФРЕЙМОРК:)

Якщо я вірно зрозумів, то ви продублювали вже існуючу і документовану функціональність прописування css властивостей у атрибуті style.

Объясните, пожалуйста: чем это отличается?

Это называется atomic css, и этот способ организации стилей заслуживает на существование и более того используется не побоюсь предположить во множестве существующих сайтов. Пусть не все стили, может не 180кб, но тем не менее.

Не говоря уже о том, что приоритеты классов и приоритеты inline стилей вообще-то совсем разные.

Если вкратце — это просто ужасно. Нет, ребята, вы, очевидно, проделали нефиговую работу, но результат...

Как вы себе представляете написание кода согласно вашей... «методологии», вашему «фреймворку»? Перечислять все CSS-свойства прямо в имени класса? Вы серьёзно?

243 кб CSS? Эй, опомнитесь. Посмотрите лучше в сторону БЭМа, о котором вы наверняка так много слышали, но так и не смогли, судя по всему, понять (и которому уж десяток лет стукнет в этом году, пора бы), или в сторону CSS Modules.

Фреймворк Орна ми не пропонуємо як панацею від всіх незручностей. Мені подобається БЕМ і також інші методологіє, розробник сам вирішує коли і чим він хоче користуватись. Писати чи графічно створувати або взагалі через СMS, в такому випадку і фреймворк не потрібний і я навіть сперечатись небуду. Сам деякі задачі через CMS роблю. На смак і колів всі олівці різні=) Наша задача і мета не промити людям мозок і навіювати дим на інші класні фішки, а створити щось класне і дати їм для користування. Орна це опеп сорс проект.

Якщо у вас буде перевантаження класів, це погано в такому випадку Орна вам не підійде. Користуйтесь БЕМ. Це логічно, оцінка задачі на сам перед, щоб потім не ловитись за голову при вигляді локшини в коді.

Також БЕМ методика для людей з досвідом, які знають як створити анімацію та інше самі. В Орні з сторони фреймворку є готові анімації та анімації включені з бібліотеки Animate.css. Мені достатньо на пальцях пояснити початківцю як зробити анімацію і він її зробить. Не всі люди які кодять хочут вміти саме кодити, деякі хочуть просто створити щось гарне для інших цілей. Власний лендінг пейдж, та навіть можливо html Новорічну відкритку.

Это не фреймворк, это просто список CSS-классов с сомнительной именовательной семантикой (и наверняка с кучей багов при их комбинировании), которые вам захотелось завернуть в один файл. Попытка использовать подобную концепцию на любом проекте, где хоть как-то подразумевается не только разработка, а еще и поддержка, обернется крахом, потому что уже через недельку-другую вам просто надоест добавлять всё новые классы в CSS, и поддерживать эту солянку классов в разметке.

Примеры в статье — мимо кассы, все как один. К чему эти довольно странные геометрические фигуры? Эти примеры вообще как будто для уроков работы в Paint, ну честно.
БЭМ и анимация — оооооокей. Он немного про другое.

Если идея вашего, кхм, вашей поделки в том, чтобы помочь людям создать лендинг или новогоднюю открытку — ОК! Вам стоило об этом написать в самой статье, для этого, может быть, он и сгодится. Непонятно только, зачем ради пары анимаций тащить 250 килобайт CSS.

Поймите, практической пользы в хоть каком-то логичном применении подобного инструмента в верстке нет — по крайней мере, вы опоздали лет на 7-9, потому что в середине 2000-ых было множество подобных идей (да даже таких же) и реализаций, в довольно крупных компаниях. Но всех их ждал один исход — тупик, тупик как в плане поддержки проекта с такой концепцией CSS, так и в плане самой концепции.

Как вы себе представляете написание кода согласно вашей... «методологии», вашему «фреймворку»? Перечислять все CSS-свойства прямо в имени класса? Вы серьёзно?

Абсолютно серьезно. И вы не поверите, но вот все эти люди используют эту же методологию:

github.com/...hresults&type=Code&utf8= (1,735 code results)

github.com/....margin0&type=Code&utf8= (2,209 code results)

github.com/...hresults&type=Code&utf8= (17,868 code results)

Ну вы не совсем правы. У этих людей это всего лишь небольшие хелперы. Кроме того, у некоторых p-10 — это не padding: 10px.
По сути, данная выдача — это тоже самое, что поискать по .pull-right (только будет уже 1.5кк результатов). Но суть когмментария была в том, что используя данный «фреймворк» нужно будет не один хелпер добавить (к примеру, тот же pull-right), а 10-20 классов ради достижения необходимого результата.

Вы правы, я защищаю не «фреймворк», а методологию. Как раз для таких хелперов сам использую порт от этой микро-библиотеки github.com/...s/blob/master/atomic.less, выпиливаете все лишнее, классы генерируете через миксины, и voilà.

выпиливаете все лишнее, классы генерируете через миксины
Ну так это отлично) Маленькие хелперы — это хорошо. Но только если их не больше, чем нужно :)

О боже, ещё один... Это НЕ методология. И это НЕ фреймворк, просто по определению, на это уже несколько раз указывали.

Такие классы могут заехать как небольшое подспорье для определенных целей (флоаты, возможно, позиционирование, что-то еще из такого разряда, довольно узкое), но оно совершенно бессмысленно для широкого спектра свойств, — что нам, собственно, и предлагают.

Мне уже неинтересно даже спорить о целесообразности существования этой поделки. Здесь плюсов нет от слова «совсем», и огромная куча минусов со всех сторон. Любому защищающему данный «фреймворк» — взять это г..но и попробовать что-то сверстать с его помощью.

Написать простыню, а потом добавить «мне уже не интересно спорить об этом». Если вам не интересно спорить, о чем тогда речь? Фломастеры разные, на этом и разойдемся.

мені потрібно було вивчати багато назв класів
Ну от этого не спасет никакой фреймворк, в том числе и описаный в данном топике...

У фремворці Орна більшість назв класів представлені у вигляді CSS коду без пробілів і крапок.
Приклад: height20px, width200px.
Щоб задати інші розміри потрібно змінити лише число, яке і запамятовувати не потрібно, можна просто спробувати і знати послідовність розмірів. Класи кольорів описані зрозуміло для людини, red, green, blue, black, white, gray, pink, orange і тд. Щоб задати колів на подію миші, допишіть onhover, blackonhover. Тобто треба знати структуру, а не унікальні назви.

більшість назв класів представлені у вигляді CSS коду
Большинство, но не все. Хотя бы те, что придставлены в последнем куске кода.
Щоб задати інші розміри потрібно змінити лише число
Да, длинный список класов для высот и ширин увидел :)
Класи кольорів описані зрозуміло для людини
Одному мне hex понятнее?..
Тобто треба знати структуру, а не унікальні назви
Все-равно нужно что-то запоминать...

Логотип симпатичный у вас :)
Наверное стандартный вопрос: в чем отличие от бутстрапа того же?
Классами можно задать только абсолютные размеры?

Дякую! Розміри можна задавати не тільки абсолютні. У фреймворці є сегмент класів для змінних розмірів, наприклад minheight100px, maxheight100px. Також є класи ширини у відсотках width40 (40%).

Відмінність від Бутстрапа дуже велика. 1. Це не Bootstrap =), концепція зовсім інша і не підвязана до Бутстрапа, ми розвиваємось окремо. 2. В Орні максимум 10% класів де задано більше двох значень. Більшість класів задають тільки один параметр, що саме і є ціль бібліотеки, не задавати зайвих параметрів. Верстальщики на Бутстрапі зазвичай роблять основну глобальну розмітку та деякі відносно дрібні елементи, також стуктурами. За допомогою Орни можна робити навіть дрібні спецефічні елементи з закругленями, відступами, прозорістю та подіями, без допису СSS коду. Це саме і вдається зарахунок Класів з одним параметром, параметр до параметра і виходить вилечезна кількіть унікальних комбінацій.
Також Орна спрямована не Адекватний мінімалізм, це можна побачити зрівнявши пакети орни та бутстрапа. Зараз це важко зрозуміти, в нас на GitHub є екземпли але їх ще не багато, згодом ми зробимо відео уроки, більше прикладів та шаблонів де все наглядно буде видно. Саме цим зараз і займаємось. І ще одне я б хотів побачити верстальщика на Бутстрапі який б робив лайф версту під диктовку креативного замовника=)

щодо креативного замовника і верстальника-в-реальному-часі. це в корені хибний підхід, замовлення має бути повністю сформульованим та зафіксованим у письмовій формі _до_ початку виконання робіт. так в результаті виходить дешевше ;)

Прочел два раза текст, но концепции фреймворка, я так и не понял ..

Дима, если я верно понимаю, то назначение любого фреймворка — облегчить жизнь тому, кто будет этим инструментом пользоваться. Можете выложить видео процесса верстки простого интерфейса (если это фронтенд фреймворк). Например того же todoMVC.com.

Было бы интересно увидеть ускорение работы, в сравнении например со стеком Jade + Emmet + Haiku

Працюєм над цим, дякую за пораду

Подписаться на комментарии