Marx - новый CSS фреймворк (сброса стилей)
Marx - это очередной вариант таблицы стилей, но не "мимо проходящий". Marx действительно полезные стили для использования в различных проектах (преимущественно в малых). Если вам нужно быстро написать приличные стили для нового сайта или переписать старые на новые, то в качестве достойной альтернативы различных сборок, вы можете взять эту таблицу стилей, которая содержит базовый набор стилей, которые будут достойно смотреться на любом сайте (прим. автора).
Особенности
Здесь вы не найдете тяжеловесных компонентов, только чистый CSS и HTML. Ключевыми особенностями Marx являются:
- единство отображения во всех браузерах
- возможность работы с SAAS
- responsive
- мобильность
- чистая, красивая типографика
- формы, таблицы, кнопки и навигация
- сброс стилей
- Marx просто работает
Репозитарий Marx находится на GitHub.
Демо
See the Pen Marx - The stylish CSS reset. by uscms (@uscms) on CodePen.
Структура Marx
Код
. ├── README.md ├── bower.json ├── css │ ├── marx.css │ ├── marx.css.map │ ├── marx.min.css │ └── marx.min.css.map └── scss ├── _buttons.scss ├── _config.scss ├── _forms.scss ├── _html.scss ├── _navigation.scss ├── _sanitize.scss ├── _tables.scss ├── _typography.scss ├── _variables.scss └── marx.scss
Базовый шаблон Marx
Код
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Marx Template</title> <!-- Marx CSS --> <link rel="stylesheet" href="css/marx.min.css"> </head> <body> <!-- main is the container --> <main> <!-- Navigation --> <nav> <ul> <li><a href="#"><b>First</b></a></li> <li><a href="#">Second</a></li> <li><a href="#">Third</a></li> <li><a href="#">Fourth</a></li> </ul> </nav> <!-- article --> <article> <h1>Article</h1> </article> <!-- aside --> <aside> <h1>Aside</h1> </aside> <!-- section --> <section> <h1>Section</h1> </section> <!-- footer --> <footer> <p>© Matthew Blode 2015</p> </footer> </main> </body> </html>