Insane18 22 мая 2012 в 15:00

Адаптивная верстка: CSS&JS фреймворк Skeleton

4 мин

68K

Веб-разработка*CSS*HTML*

Из песочницы

+78

Комментарии 36

НЛО прилетело и опубликовало эту надпись здесь

sphinks 22 мая 2012 в 18:37

+1, но кстати когда искал что еще есть помимо bootstrap такое же простое и удобное, альтернативы не нашел. Вот теперь можно на что то посмотреть.

Fesor 22 мая 2012 в 21:06

bootstrap как по мне предназначен только для одной цели. Если у вас мало времени и нету денег на дизайнера, а сами вы таковым не являетесь, лучше взять оный набор стилей и сделать быстро, красиво и шаблонно. Я считаю что использовать бутстрап или любой другой фреймворк такого типа имеет смысл лишь в бэкэнд системах. Ну или там оформить страничку на гитхабе.

НЛО прилетело и опубликовало эту надпись здесь

Eternalko 9 июн 2012 в 23:36

Есть несколько сайтов построенных на бутстрапе. И это совсем не умаляет их достоинств.
Содержание важнее формы.

artem_kovardin 23 мая 2012 в 00:46

http://foundation.zurb.com/ к примеру

maxvipon 24 мая 2012 в 06:52

Есть еще совсем простенький Simpliste.

bo883 22 мая 2012 в 15:20

Спасибо возьмем на вооружение.

KenAdams 22 мая 2012 в 15:21

А вот и первые баги нововведения [dog]media преобразуется в ссылку на пользователя :)

SibProgrammer 22 мая 2012 в 15:26

В типичном веб-приложении (не сайте) обычно есть таблицы. И весь responsive design упирается в них. У bootstrap нет нормального решения. Здесь, видимо, тоже. Поэтому, все будет прекрасно смотреться на всех устройствах только до появления первой таблицы.

Seldon 22 мая 2012 в 15:41

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

web36m 22 мая 2012 в 22:26

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

Seldon 23 мая 2012 в 10:37

А кто говорил о полном отказе от таблиц? Просто скажем на мобильно, таблица с 15 колонками ну нафик не нужна, человек там потеряется. Если в контенте есть боьшие талицы, то я бы давал ссылку на отдельную страницу с ними для мобильных, где открывалась бы только таблица и юзер бы нативными средствами браузера мог бы дергать страницу в лево в право, это намного менее глючно чем какой-нибудь скроллин в диве.

Glivera 22 мая 2012 в 16:39

в таком случае можно спокойно использовать враппер с overflow и при маленьких размерах экрана будет появляться прокрутка что бы можно было просмотреть всю таблицу

Seldon 22 мая 2012 в 17:16

Боюсь на мобильном прокручивать вот так страницу не столь удобно. Вообще я голосую за то чтобы делать 2 разных сайта — мобильную и обычную версию, да более трудоемко, но зато все индивидуально и позволяет съэкономить трафик юзеров.

coocheenin 22 мая 2012 в 17:27

В идеале — да, поддерживаю. Так как это реализовано на wikipedia.org или discogs.com, например.

sHaggY_caT 19 сен 2014 в 02:06

Посоветуйте плиз какой-нибудь фреймворк для самописной веб-панели. В панели всё на таблицах :( Вообще всё :( Панелька нарисована на PHP.

coocheenin 22 мая 2012 в 15:59

Хотелось бы видеть в статье упоминание об отличиях/преимуществах в сравнении с аналогами, bootstrap того же.

Пост — полезный.

+12

BupycNet 22 мая 2012 в 16:25

max-width: 767px мой 7 дюймовый планшет с 1024x600 смотрит на вас с ненавистью. А ведь таких не мало.

cyberbobs 22 мая 2012 в 16:36

А есть ещё смартфоны с 1280x720 :)

Insane18 22 мая 2012 в 17:47

Ну собственно а зачем Вам с таким разрешением видеть планшетную версию. У Вас по ширине влезает вполне себе обычная десктопная версия.

BupycNet 22 мая 2012 в 20:55

А мне разве не мобильную выкинет? У меня кстати с софтом под андроидом проблемы в плане определения планшетности. Например ВКонтакте не врубает свой интерфейс или новый Firefox. Они просто думают, что у меня большой телефон…

-1

Insane18 22 мая 2012 в 23:40

Не выкинет. Тут идет именно расчет разрешения, так что все будет отображаться как на десктопе.

vittore 22 мая 2012 в 16:47

здесь

<div class="sixteen columns">
    <h1>Full Width Column</h1>
</div>

должно было быть twelve columns, так?

Insane18 22 мая 2012 в 17:50

Все верно. Поправил. Спасибо!

Davert 23 мая 2012 в 01:48

В PSD файле на сайте тоже 16 колонок.
Что странно. Так сколько их всё-таки?

Insane18 23 мая 2012 в 11:27

Итак, вернул sixteen. Теперь объясняем почему:
На сайте самого фреймворка — 4 колонки занимает вертикальное левое меню — соответственно в указанном примере показано 12 колонок.
Таким образом сетка имеет 16-колонок Собственно *my bad*. Исправляю.

Insane18 23 мая 2012 в 11:43

Аррр… Экспериментальным путем выяснилось что колонок все-таки 12. Класс sixteen просто не работает. Работает только twelve. На предыдущий коммент внимания не обращаем.

ilyaplot 22 мая 2012 в 17:33

А что то новое в нем есть?

НЛО прилетело и опубликовало эту надпись здесь

ElaSTiC 22 мая 2012 в 18:27

Только некоторые. Да и то спорно.

etc 22 мая 2012 в 19:05

Мне даже больше, чем bootstrap нравится.

НЛО прилетело и опубликовало эту надпись здесь

VolCh 23 мая 2012 в 03:15

Когда вижу подобные фреймворки (речь только о layout части) постоянно возникает вопрос: чем такая вёрстка лучше старой доброй табличной, кроме семантичности?

А по сути: а на 1920 адаптировать можно? И откуда вообще пошла мода ограничивать ширину сайта половиной ширины довольно распространенного разрешения, да ещё называть это адаптирующейся вёрсткой?

-1