CSS and Markup links

CSS Best Practices:
https://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners—net-6741
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

Markup:
http://habrahabr.ru/post/203440/
http://habrahabr.ru/post/19362/
http://habrahabr.ru/post/108142/
http://habrahabr.ru/post/151931/
http://habrahabr.ru/post/202408/

Реклама

10 полезных фреймворков, о которых нужно знать разработчику

1) UIkit

getuikit.com

99% проблем юзабилити возникают из-за медленного ответа веб-интерфейсов. Очень важно создавать быстрые интерфейсы. UIKit полезен именно для этого. Он лёгкий, модульный, и идеальный для разработки фронтенда. Предоставляет богатый набор HTML, JavaScript и CSS компонентов.

2) Reveal.js

lab.hakim.se/reveal-js/#

Желаете создавать симпатичные презентации в HTML? Хотите добавить движухи, переходов между слайдами? Это можно сделать при помощи Reveal.js. Он помогает создавать презентации, оптимизированные для сенсорных устройств, которые везде смотрятся приятно. Есть выбор эффектов перехода — Fade, Zoom и так далее.

3) TouchStone.js

touchstonejs.io

Для тех, кто хочет разрабатывать красивые гибридные мобильные приложения. Touchstone.js работает на основе React.js, и имеет такие возможности, как нативное поведение для сенсорных экранов, функции навигации, компоненты форм и многое другое.

4) Skel.js

getskel.com

Легковесный фреймворк, помогающий создавать сайты и приложения с отзывчивым дизайном. Содержит богатый набор возможностей. Что он умеет:

  • CSS Grid System
  • Responsive Handler
  • CSS Shortcuts
  • Plugin System

 

5) Foundation

foundation.zurb.com

Ещё один хороший фреймворк для фронтенда, любимый многими разработчиками отзывчивого дизайна. Этот фреймворк помогает разрабатывать сайты быстро. У него есть много возможностей – отзывчивая сетка, сниппеты, кнопки и другие компоненты интерфейса. Это проект с открытым кодом, доступным на Github

6) Whiteboard Framework

whiteboardframework.com

Позволяет без лишних действий создать тему для WordPress. Минималистический дизайн позволяет просто и легко сделать тему без ненужных функций. Включает код, оптимизирующий юзабельность темы, поддержку мобильных устройств и SEO.

7) Mootor

mootor.voolks.com

Фреймворк на основе HTML5 для разработки минималистичного дизайна мобильных приложений.

8) Knockout

knockoutjs.com

Идеальный фреймворк для разработчиков, создающих упрощённый интерфейс с использованием JS на основе шаблона Model View View (MVVM). Библиотека на чистом JS, работающая в связке с любой серверной или клиентской технологией и в любом современном браузере.

9) Base

matthewhartman.github.io/base

Отзывчивый фреймворк на основе Normalize.css. Работает со старыми и современными браузерами. Содержит только самое необходимое для создание темы с нуля для любых устройств.

10) WordPress Plugin Boilerplate 3.0

github.com/DevinVinson/WordPress-Plugin-Boilerplate

Советы по использованию media query

Вступление

В статье я собрал советы по использованию media query. Расскажу, как можно более эффективно использовать media query. В конце статьи есть список использованных источников.

  • Внешнее подключение media query
  • Больше чем просто размер viewport
  • Не только смартфоны
  • Инструмент для работы с media query
  • Выделяйте специфичное
  • Breakpoints когда и сколько?
  • Второстепенные breakpoints
  • Относительные единицы измерения
  • Условная загрузка
  • Список использованных ресурсов

Continue reading «Советы по использованию media query»

Адаптивный и мобильный дизайн с CSS3 Media Queries

Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев. Эта статья покажет вам как создавать кросс-браузерный адаптивный дизайн при помощи HTML5 и CSS3 media queries.

Continue reading «Адаптивный и мобильный дизайн с CSS3 Media Queries»