Чи пропонують веб-рамки, такі як Bootstrap або HTML5 котла, дизайнеру (а не розробнику)?

Зауважте, мова йде про дизайн набагато більше, ніж про розробку.

Я будую сайти з нуля за допомогою повністю написаних рукою CSS та HTML.

Я знав про шаблони css для попередньої збірки, такі як Bootstrap або HTML5 Boilerplate . Я їх коротко переглянув у минулому, але ніколи не стрибав, використовуючи їх ні для чого. У мене немає проблем щодо скидання CSS або включення javascript при необхідності або налаштування для вікон перегляду.

Цього вечора я зашифрував основну сторінку HTML5 / CSS. Нічого насправді не руйнує земля з точки зору планування. Просто стрибок з точки. Згодом я вирішив надати Bootstrap кружляння з тим же макетом. Це досить стандартна колонка розміром 960 пікселів, 3 стовпці із зображенням героя.

Коли я змінюю Bootstrap, мені спало на думку, що 80% або більше мого часу витрачався на вивчення того, який клас чи ідентифікатор було застосовано до чогось, а потім виявив, що це в CSS для коригування. Стало ясно, що Bootstrap взагалі не збирається рятувати мене. Насправді Bootstrap значно збільшить терміни виробництва завдяки * надмірно шаблонованому CSS.

* ( під "надмірно шаблонованим" я маю на увазі, що існує велика кількість CSS, яку я, мабуть, не використовував би для будь-якого веб-сайту. Не те, що в цілому є непотрібний CSS. )

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

Однак я не можу не задатися питанням, чи Bootstrap та ін. ін. це просто милиці, які калічать дизайнерів, ложкою подаючи їм свою власну марку коду. Таким чином, замикання на споживчій базі, яке повністю буде покладатися на рішення сторонніх організацій, і це функціонал для всього, або принаймні більшості. Мені це нагадує тих, хто може створити веб-сайт лише у тому випадку, якщо вони можуть використовувати Dreamweaver. І не дай бог, якщо вони не мають доступу до Dreamweaver і потрібні зміни.

Під час створення сайту я використовую власний набір стандартних імен класу та ідентифікаторів. Я структурую CSS, наскільки це інтуїтивно зрозуміло для мене. У мене є власний набір шаблонів попереднього збирання для швидкого налаштування. Тому будь-який сайт, який я створюю, я можу редагувати досить швидко. Використання будь-якого заздалегідь налаштованого фронтального пакету просто означає, що мені потрібно вивчити їхні умови іменування та їх структуру, а не покладатися на мою власну.

• Чи може хтось висловити на мене великі чесноти таких шаблонових систем, як Bootstrap або HTML5 Boilerplate ?
• Що робить їх цінними для вас?
• Ви просто знайомі з системою, якою ви користуєтесь, щоб ви могли легко переміщатися по ній, чи все-таки вам потрібно полювати на предмети?
• Чи можете ви створити сайт без них, якби вам довелося?

Я багато досліджував рамки останній місяць або близько того. Я фактично не занурився ні в одне з рішень, але пара альтернатив рамки, що знаходяться в моєму списку, - це Foundation , Intuit та YAML та Base .

Хороша річ у тому, що вони не мають «Bootstrap» виду і, здається, спонукають дизайнерів до своєї роботи (дизайну), в той час як вони дбають про чуйність.

Ось великий список рамок і додаткова інформація в цій статті .

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

Переваги, як правило, полягають в основному:

• Швидке прототипування (тобто швидкість)
• Вбудована крос-консистенція браузера

Якщо вам потрібно створити сітку, а сітка, яку вам потрібно створити, підходить до заздалегідь побудованої основи CSS, то логіка полягає в тому, що ви перебуваєте на півдорозі, використовуючи рамки.

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

ДОДАТИ:

Я повинен додати ще одну потенційну перевагу:

• це документально підтверджена система

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

Це не означає, що ваш власний домашній каркас не може бути задокументований, це просто те, що документація часто не є пріоритетною.

Я знайомий з котлом HTML5, але я більше знайомий з Bootstrap, тому я поговорю про це. Пам’ятайте, що обидва спрямовані на виконання двох різних завдань (H5BP - це чуйний нормований шаблон, Bootstrap - це набір віджетів HTML / CSS / JS та чуйна сітка.) Насправді їх можна використовувати разом .

Однак я не можу не задатися питанням, чи Bootstrap та ін. ін. це просто милиці, які калічать дизайнерів, ложкою подаючи їм свою власну марку коду. Таким чином, замикання на споживчій базі, яке повністю буде покладатися на рішення сторонніх організацій, і це функціонал для всього, або принаймні більшості. Мені це нагадує тих, хто може створити веб-сайт лише у тому випадку, якщо вони можуть використовувати Dreamweaver. І не дай бог, якщо вони не мають доступу до Dreamweaver і потрібні зміни.

Аналогія тут не вдається, оскільки ви маєте повний доступ до джерела Bootstrap. Якщо вам не подобається, як щось працює, ви можете змінити це. Для мене це протилежність милиці - ви можете використовувати вихідний код, щоб вивчити методи css.

Я не погоджуюся, що "розробка веб-сайту" повинна бути наближеною до металу, ніж я вважаю, що C-кодерам потрібно мати глибокі знання мови складання. Хоча навіть ця аналогія стає рівною, тому що коригування HTML / CSS - це просто розширення селекторів та додавання того, що вам потрібно.

Чи може хтось висловити на мене великі чесноти таких шаблонових систем, як Bootstrap або HTML5 Boilerplate?

Для мене вбивчою особливістю Bootstrap є послідовна та проста у застосуванні стилізація віджетів та компонентів Javascript. Хочете, щоб посилання виглядало як кнопка? Додайте клас ".btn". Хочете столик? Додайте клас ".table". Хочете елемент навігації? Створіть не упорядкований список та додайте класи навігації.

До елементів, що мають атрибути даних, легко додаються випадаючі списки, перемикання, сповіщення тощо. Bootstrap включає в себе дуже красивий набір піктограм, які можна легко інтегрувати у віджети.

Що робить їх цінними для вас?

• Може швидко прототипувати сайти
• Вся налагодження крос-браузера та крос-платформного css зроблена для мене.
• Легко налаштований CSS з широким вибором змінних, щоб я міг швидко експериментувати та прототипувати макети.
• Стандартні віджети для навігації
• Вихідний код відкритий і вільний, я можу забруднити руки та налаштувати МЕНШЕ, якщо мені потрібен новий міксин або змінити поведінку так, як мені потрібно.

Ви просто знайомі з системою, якою ви користуєтесь, щоб ви могли легко переміщатися по ній, чи все-таки вам потрібно полювати на предмети?

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

Чи можете ви створити сайт без них, якби вам довелося?

Так, але це явно більше роботи. Я можу зосередитися на макетів UX та швидко прототипах із готовими віджетами, які добре виглядають, та стабільною функціональністю.

Приємна річ у шаблонуванні систем і рамок полягає в тому, що вони можуть заощадити вам багато часу, якщо ви працюєте так, як вам хочеться. Отже, з Bootstrap, як тільки ви вивчите їх семантику виконання каруселі JS, це практично кримінально просто здійснити. Крім того, Bootstrap, здається, стає набагато простішим, якщо ви або скочуєте свій власний, перш ніж почати роботу, або використовувати щось на зразок bootstrap-sass в Rails для зміни цих змінних на ходу; це позбавить вас змінити все навколо пізніше.

DA01 говорить про послідовність браузера ... це для мене великий фактор. Ось чому я використовую jQuery, хоча будь-яка кількість людей на SO нагадує вам, що додавання великої бібліотеки лише для виконання кількох речей є марною витратою ресурсів. Я знаю, що коли я використовую jQuery, він буде працювати в певному наборі браузерів, і тому, хоча я, мабуть, можу самостійно домогтися більш легкого рішення, я вважаю більш вигідним дізнатися, як jQuery хоче, щоб я писав JavaScript, а потім зробити це по-своєму.

Зрештою, я схильний вважати рамки HTML / CSS обмежувальними; Мені достатньо контрольного виродка, який я все одно люблю кодувати вручну, коли можу. Але я поважаю той факт, що люди розумніші та просунутіші за мене витратили багато часу, щоб створити ці шаблони / рамки.

З інтересу чи хтось із вас працює у великій команді для великої компанії?

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

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

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

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

Я все ще вважаю за краще писати власний код з наступних причин:

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

• Проектно-орієнтована структура. Кожен новий сайт / додаток матиме різні потреби від попередніх, тому файли та ресурси можуть бути організовані окремо.

• Індивідуальні перегляди для різних пристроїв.

Якщо ви не робите дуже обмежену сторінку, ви в кінцевому підсумку додасте все нові й нові стилі до нових елементів та перезаписуєте існуючі.

Оскільки я люблю працювати з гнучкими конструкціями, головна причина, чому я б не користувався ними, полягає в тому, що я вважаю за краще розробляти кожен чуйний крок "окремо" і в цілому. І ці шаблони зазвичай працюють з більш-менш жорсткою сіткою, яку ви не можете повністю переробити.

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

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

Використовуючи такий фреймворк, як Twitter Bootstrap, ви можете фактично протестувати сторінки, поки вони ще знаходяться в дизайні, і навіть можуть розкрити проблеми юзабіліті та інші проблеми з користувацьким досвідом. У рамках є багато класів для багаторазового використання, з якими ви ознайомитесь і заощадите ваш час.

Ви згадали, що багато кодуєте з нуля. Коли у мене є щось, що має бути дуже звичайним або дуже легким, я йду зі Скелетом

Протягом багатьох років я коментував все, але в наш час я, як правило, використовую Bootstrap. Чому я це роблю?

1. У мене виходить чуйний макет з дуже малою роботою. На деяких веб-сайтах, над якими я працював, потрібно лише кілька незначних налаштувань, щоб отримати макет, оптимізований для планшетів та мобільних пристроїв. Чуйний навиворіт - це один з моїх улюблених компонентів завантаження.
2. Елементи керування за замовчуванням не узгоджуються між браузерами та ОС, не кажучи вже про те, що вони завжди некрасиві, незалежно від ОС чи браузера, якими ви користуєтеся. За допомогою завантажувального пристрою ви отримуєте гідний, послідовний вигляд і відчуваєте мало роботи. Якщо ви хочете все-таки змінити всі елементи управління, то так, Bootstrap не заощадить вам багато часу, але, на мій досвід, більшу частину часу у вас не буде достатньо часу, щоб переосмислити всі елементи управління, але все ще відчуєте себе роздратованим потворним замовчуванням контролю.
3. Це ставить межу для того, що ви хочете зробити, що є хорошою справою, тому що, працюючи в чистому CSS, ви, як правило, хочете налаштувати кожну дрібницю (колір, товщину межі, градієнт, тінь, радіус межі, переходи, і список продовжується), хоча окремо вони займають мало часу, загалом це головний проміжок часу. Працюючи над проектами із строком, ви хочете обмежити те, що ви можете, а що не можете робити; використання фреймворків дозволяє думати про більш грубозернисті компоненти замість того, які властивості CSS слід налаштувати.
4. Деякі рамки сервера мають інтеграцію з завантажувальним інструментом. Наприклад, використовуючи django-bootstrap, ви можете просто зробити {{ form|as_bootstrap }}форми для стилю завантажувального стилю, включаючи червоне виділення на повідомленнях про помилки тощо.

Коли я змінюю Bootstrap, мені спало на думку, що 80% або більше мого часу витрачався на вивчення того, який клас чи ідентифікатор було застосовано до чогось, а потім виявив, що це в CSS для коригування.

Ось де ви помилитесь. Якщо ви хочете отримати користь від Bootstrap, ви не повинні занадто сильно налаштовувати; ви відмовляєтесь від гнучкості до необхідності та можливості налаштувати все під час використання заздалегідь складених компонентів. Ви не повинні витрачати час на пиляння або різьблення дерев’яних дощок, декоруючи приміщення з компонентів IKEA.

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

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

Це фактично перевага використання популярного пакету. Простіше передавати проект іншому розробнику, коли ви обидва знаєте, що робить "btn-група", "btn-btn-велика", з особистими рамками вони повинні були б дізнатися ваші особливості (або, звичайно, вони просто каскадують ваш css зі своїми змінами, і не турбуючись намагатися розшифрувати або змінити код).

Ви просто знайомі з системою, якою ви користуєтесь, щоб ви могли легко переміщатися по ній, чи все-таки вам потрібно полювати на предмети?

Звичайні такі, як btn, table, row *, span * тощо, були б природними. Але для html для основних компонентів набагато швидше просто скопіювати та вставити зі своїх прикладів, а не набирати їх.

Чи можете ви створити сайт без них, якби вам довелося?

Був там, робив це, багато разів.

вони гарні лише для:

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

особисто я маю власні методи і не маю бажання йти цим маршрутом, тому що я вже навчився кодувати CSS, HTML та jQuery. Я бачу в цьому користь для людей, які не мають поняття і намагаються навчитися кодувати. Було б приємно побачити щось подібне близько п’яти років тому. Крім того, як ви вже заявляли, знадобиться більше часу, щоб реалізувати це у своїх сучасних методах виробництва.

EDIT: не намагаюся викрасти нитку, але мені теж цікаво те саме, що стосується WordPress. Я з легкістю використовував WordPress, але не знаю, чи зручна рамка. Я планував піти по старомодному шляху, поки не зможу знайти головну вигоду.

Bootstrap хороший як відправна точка для чуйного планування. Але що стосується дизайну, я думаю, його досить не вистачає. Це робить його єдиний "завантажувальний" вигляд, який, оскільки його шаблон надзвичайно використаний.

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