@media В помойку!

Не давно я задумался, а зачем столько css кода в framework'ах? Почему не выкинуть @media запросы, они занимаю слишком много места. К примеру в bootstrap есть куча классов col-sm.. col-xs.. и т.д. Если убрать их bootstrap значительно похудеет! Тут у меня возникает вопрос как выкинуть @media запросы не потеряв адаптивности. И мне приходит очередная зловещая мысль написать jquery плагин, который решил бы данную проблему.
Плагин будет делать одну простую вещь, изменять значение атрибута class. Верстка html будет такая:

Код (PHP):

1. <div data-xs="Какой то класс" data-sm="Какой то класс" data-md="Какой то класс" data-lg="Какой то класс"></div>

Плагин должен брать нужное значение data (Взависимости от ширины окна) и добавлять это значение в атрибут class. Таким образом можно будет значительно уменьшить css код.

На этом у меня фантазия кончилась. И теперь вопрос: Как лучше реализовать такой плагин?

 

Читаю блог bootstrap Moved from Less to Sass. То есть less больше не будет? Скачал bootstrap 4, вижу только scss, печально... Dropped IE8 support and moved to rem and em units. Не пойму что здесь про ишака хотят сказать. Типо поддержки IE8 не будет, а она была? У меня bootstrap 3 на IE11 не работал.

Добавлено спустя 19 минут 59 секунд:

Посмотрел код. Bootstrap 4 из будущего. Они вообще не думают о поддержке старых браузеров. Может только через года 2 можно будет им воспользоваться. Да и с документацией всё плохо.

 

Единственно хорошее)))

К less привык, расставаться не хочется, а придётся. scss Круче!

 

Если бы))) Всё тоже самое, и ещё flex

 

Не хрена не работающий flex. он работает в Internet Explorer 10.0+, Chrome 21.0+, Safari 6.1+, Firefox 18.0+ и то с префиксами. Про Opera не знаю.

Я уже говорил, bootstrap 4 из будущего.

 

Действительно. Давайте оторвёмся от bootstrap 4 и вернёмся к изначальной теме.

 

Это да. Только я пришёл к выводу что это не нужный код. Было бы круто если бы тот же bootstrap ужать скажем до 30-50кб.

Да и прописывать свои @media не хочется к примеру когда мне надо что бы на телефоне была маленькая кнопка а на компе большая. Что бы таблицы меняли свой вид. Что бы иконки в конце концов менялись на другие. Да и кучу всякой хрени можно ещё придумать. А так data атрибут с нужным классом написал и плагин поменяет тебе стиль когда надо.

Суть плагина в том что бы менять атрибут class в зависимости от размера экрана.

 

Мне не только для колонок такая штука нужна. Да и ещё колонки должны складываться.

Я делаю несколько классов. .col1, .col-2, .col3, без медия. И уже работает плагин в html тупо прописав:

Код (PHP):

1. <div data-xs="col3" 
2. data-sm="col1"
3. ></div> 

Чут не понятно?

PHP, JavaScript, SQL и другой код пишите внутри тегов

Код ( (Unknown Language)):

1. [b]php][/b]Тут код[b][/[/b][b]code][/b][/color]

 

Уменьшить количество css. Ускорить загрузку сайта. Решить проблему с @media в ишаке. И ещё куча всего

 

Не в коем случае! Колонки оставить, только @media убрать. В bootstrap есть: .col-xs, .col-sm, .col-md, .col-lg. Синтаксис примерно такой:

Код (PHP):

1. <div class="row">
2.     <div class="col-lg-8 col-sm-6"></div>
3.     <div class="col-lg-4 col-sm-6"></div>
4. </div> 

Классы с суфиксом lg работают без @media, оставить только их и убрать суфикс. Получается что то такое:

Код (PHP):

1. <div class="row">
2.     <div class="col-8"></div>
3.     <div class="col-4"></div>
4. </div> 

В примере выше нет адаптивности вот её и должен делать плагин:

Код (PHP):

1. <div class="row">
2.     <div data-lg="col-8" data-sm="col-6"></div>
3.     <div data-lg="col-4" data-sm="col-6"></div>
4. </div> 

Это бы значительно уменьшило любой framework, и ещё кучу проблем решило бы. С помощью такого плагина можно было бы что угодно сделать адаптивным, к примеру меню превратить в список на телефоне.

Работа плагина:
При экране меньше 768px плагин берёт данные из data-xs и подставляет их в атрибут class.
Больше 768px и меньше 992px. Плагин берёт данные из data-sm и подставляет их в атрибут class.
Больше 992px и меньше 1200px. Плагин берёт данные из data-md и подставляет их в атрибут class.
Больше 1200px. Плагин берёт данные из data-lg и подставляет их в атрибут class.

Ну я не знаю как ещё объяснить.

PHP, JavaScript, SQL и другой код пишите внутри тегов

Код ( (Unknown Language)):

1. [b]php][/b]Тут код[b][/[/b][b]code][/b][/color]

 

Объяснить тебе просто не получается.

Задумка плагина в том что бы он менял атрибут class в зависимости от дисплея. Если выкинуть @media:
Bootstrap 4 grid - 924 строки.
Bootstrap 4 grid (Без @media) - 285 строк.
Как я и говорил bootstrap похудел. Плагин и нужен для того что бы не терять функционал, и ещё даже добавить. Прописав к примеру атрибут data-sm="col-6" то при экране от 768px и до 992px, его значение добавиться в атрибут class сработает стиль и колонка поменяет свою ширину. Тот же bootstrap функционал, только лучше.

• Botstrap худеет
• Bootstrap не теряет функционал
• И вообще это была бы крутая штука для адаптивности, менять class'ы в зависимости от экрана это прикольно. Что угодно можно было бы сделать.
• Нет проблем с IE и @media
• Ускорение проекта
• Ускорение разработки за счёт удаления @media(Их не надо будет прописывать)

Минусы откроются после создания плагина. Только я не представляю как его реализовать, за этим я сюда и пришёл.

Добавлено спустя 2 минуты 21 секунду:
Такой плагин мог бы любой framework сделать адаптивным, уменьшить css код.