Дизайн + вёрстка сайта на css-фреймворке

Нужно сделать вёрстку и css для 4-х страниц сайта на css-фреймворке (не bootstrap).

Интересны фреймворки: bulma , Semantic-UI и MaterializeCSS. Можно предложить свой вариант, но это должен быть популярынй фреймворк. Я ориентировался на этот список https://github.com/topics/css-framework?o=desc&s=stars

Есть парочка сайтов на bootstrap {укажу_в_переписке}. Нужно сверстать нечто похожее, но на другом фреймворке из стандартных элементов.

Не нужно делать 100% копию!

Цветовую схему следует изменить.

На всех страницах сайта, которые нужно верстать, есть таблицы. Это самое важное содержимое сайта.

Требования

1. Адаптивность.

Нормальное отображение для мобилы с минимальным разрешением 320px по ширине (iPhone 5).

Важные точки:

• =320px чтобы работало для iPhone 5 [320*568] (почти 8% посетителей)
• =360px чтобы работало для Samsung Galaxy S5 [360*640] (таких устройств 26-36%).
• =568px iPhone 5 повёрнутый горизонтально
• =768px iPad вертикально
• =1024 iPad Pro вертикально
• =1280 и больше ,как правило, это уже десктопы. Ограничиваем max-width 1440px.

3. Минимальный размер CSS.

С этой целью желательно использование FlexBox.

4. Элементы, которые надо сверстать:

• шапка сайта
• футер
• верхнее меню
• кнопки выбора элементов списка
• панели для группировки элементов
• таблицы, нужен класс для вывода стандартной таблицы с заголовком и раскраской строк, чтобы можно было взять любую страницу прописать в ней класс, например, table-std и получить некое стандартное оформление. Числовые значения в таблицах выравниваем по правому краю, текстовые по левому. На маленьких экранах некоторые столбцы таблицы могут быть спрятаны.
• конвертер

активно используем тэги

• main
• section
• header
• nav
• aside
• footer

Либо минимальное использование чистого JS без jQuery.

jQuery если он реально нужен.

7. Не использовать экзотические шрифты. На каком-то стандартном сделать.