Framework-и для адаптивного дизайна: нужны ли они?

От автора: Адаптивный дизайн – это построение вебсайта с разметкой на базе сетки, масштабируемыми изображениями и медиазапросами, как его описывает Итан Маркотт (Ethan Marcotte). После того, как он дал определение этой технике, начали появляться framework-и адаптивного дизайна, объединяющие эти принципы. Основанные по большей части на CSS и JavaScript’е, многие из них с открытым кодом, их можно бесплатно скачать и легко модифицировать под себя.

Самые популярные сейчас – это Bootstrap и Foundation. о которых мы и поговорим в этой статье.

По мере роста популярности дизайнерских framework-ов возник жаркий спор: зачем профессиональному дизайнеру ими пользоваться?

Интернет-споры дошли до крайности. Многие заявляют, что framework-и адаптивного дизайна ужасны, и пользуются ими только те, кто не знает HTML и CSS. Вот каковы обычные аргументы против framework-ов:

Дизайнер способен написать собственную систему сеток, и просто обязан это делать, если хоть немного знает HTML и CSS.

Веб-сайты на базе framework-ов медленно грузятся.

Все сайты на их основе выглядят одинаково.

Они обычно слишком раздуты, либо благодаря дополнительным тэгам div, количеству строк CSS, составляющему от 5000, либо из-за больших файлов JavaScript.

Пока очернители громогласно кричат, framework-и адаптивного дизайна продолжают набирать популярность. Я полагаю, что у таких framework -ов есть положительные стороны, даже для самого опытного веб-разработчика программ пользовательского интерфейса, и ниже я о них расскажу.

Веб-сайт американского модерниста Пола Рэнда (Paul Rand ) был создан с помощью Foundation .

Однажды утром я слушал основной доклад Эли Уайта (Eli White) на конференции Northeast PHP. Уайт – разработчик PHP, и его речь была ретроспективой разработки Веба и PHP за последние 20 лет. Он также отметил, что 15 лет назад разработчики строили всю серверную часть «с нуля». В те времена в мире было не так уж много открытых исходников, а патентованные системы управления контентом (CMS) стоили сотни тысяч долларов. Если вы хотели создать для своего веб-сайта опрос, приходилось писать его «с нуля».

Сейчас, в 2014г. разработчики серверной стороны больше так не делают. Зачем это нужно, если можно применить API SurveyMonkey и создать что-то для своих клиентов за 10 часов, а не за 100 или 1000 часов? Является ли код SurveyMonkey самым замечательным в мире, самым эффективным, умнее всего написанным и не содержащим лишнего? Я не разработчик PHP и ответа на этот вопрос не знаю. Однако API протестирован и лишен дефектов, хорошо запускается и готов к внедрению в ваш следующий проект — и это имеет огромное значение.

Если только ваш клиент не желает чего-то очень особенного и способен все это профинансировать, как объяснил Уайт, большая часть разработчиков PHP поспорили бы, что в 2014г. нет особых причин писать «от руки» пользовательский опрос.

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

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

Вторая возможность – это полностью пользовательское решение. Будет нанят графический дизайнер для обсуждения брендинга, и придется выбирать между тремя проектами дизайна и, возможно, провести два раунда оценки прототипа прямо в браузере или конвертировать дизайн в HTML и CSS, объединять дизайн с CMS или клиентской стороной по выбору, если нужно, и представить (надеемся) идеальный результат клиенту.

Положительная сторона в том, что каждый тэг будет аккуратно помещен на свое место, а код будет идеально семантическим с совсем маленьким количеством «жирка» или лишних div’ов.

Чтобы добиться этого, однако, разработчик должен быть высокопрофессиональным и опытным — а там, где участие принимает разработчик такого калибра, ценник соответственно увеличивается, вынося проект за пределы финансовой досягаемости небольших клиентов и добавляя серьезных расходов крупному заказчику. Кроме того, пока не будут потрачены дополнительные средства на документацию (что, по моему опыту, не очень обычно), если уйдет изначальный разработчик, то следующему для модифицирования кода придется его поломать над ним голову. Это – дополнительные расходы клиента.

Где же «золотая середина» между скачиванием недорогого дизайна, применяемого во всем Интернете, и созданием чего-то высокопользовательского и дорогого? Где эквивалент API разработчика серверной стороны или библиотеки кодов? Можно ли некоторым образом создать массовую уникальность пользовательского интерфейса? Нам нужна возможность щелкнуть по нескольким предварительно написанным элементам, объединить их с пользовательскими добавками и разработать такое решение, которое станет более модифицировано под клиента, чем заготовленная тема, но менее пользовательское, чем высококлассное решение. Не начиная все «с нуля», мы сэкономим многие часы разработки и деньги клиента.

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

Но у многих клиентов очень ограничены время и деньги, и они, может быть, не могут долго ждать и оплачивать идеал. Можно ли вместо этого получить что-то «довольно хорошее»? Возможно, не каждый div будет идеально размещен, и их может оказаться слегка больше, чем нужно. Возможно, код грузится немного дольше, чем необходимо. Тем не менее, решение будет задокументировано, станет находиться в активной разработке и поддаваться модификации под клиента, и его можно будет быстро выстроить гораздо быстрее пользовательского веб-сайта. В этом есть определенный смысл. Как любая другая технология, имеющаяся в нашем расположении в мире веб-разработки, framework адаптивного дизайна обладает своими положительными и отрицательными сторонами, которые следует обсудить.

Веб-сайт ресторана греческой кухни Grk построен с помощью Bootstrap .

Возьмем Bootstrap 3 и Foundation 5 и разберемся во множестве положительных и отрицательных аспектов построения вашего будущего веб-сайта с помощью одного из этих framework-ов.

БРАУЗЕРНАЯ СОВМЕСТИМОСТЬ

Устранение дефектов для браузеров иногда занимает времени столько же, сколько разработка самого сайта. Если будет возможно снизить количество времени, потраченного на отладку, то вы сэкономите значительные деньги для своего клиента (и собственных волос).

Framework-и адаптивного дизайна уже протестированы в определенном наборе браузеров и устройств, что снижает количество работы, требующейся для запуска веб-сайта. (Количество необходимого тестирования будет отличаться в зависимости от того, насколько сильно вы модифицировали framework. Если поменяли всего несколько цветов, то потребуется минимум тестов. Если вы перекроили систему сеток, то придется проделать обширное тестирование.)

Последние версии Bootstrap и Foundation поддерживают Internet Explorer (IE) 9 и выше. Существуют приемы, которые могут заставить framework-и работать в IE 8, но IE 6 и 7 совершенно не совместимы. В общем, эти framework-и также поддерживают последние версии обычных браузеров, включая Firefox, Safari и Chrome, а также разные наборы мобильных браузеров.

К сожалению, если вы хотите поддерживать непротестированный браузер, то можете обнаружить недостатки, которые придется исправлять в незнакомом вам коде.

МОДИФИЦИРОВАНИЕ ФАЙЛОВ

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

Одно то, что выбранный вами framework поставляется вместе со стилями и JavaScript’ом для поддержки дюжин компонентов, не означает, что вам придется скачивать и интегрировать их все. Bootstrap и Foundation позволяют модифицировать загрузочные пакеты в соответствии с требованиями, поэтому можно взять только тот CSS и JavaScript, который вам нужен для сайта. Это снижает количество лишнего «жирка» и, как результат, уменьшает время загрузки – обычный аргумент против framework-ов.

Позже, если захотите добавить исключенный до того виджет или стиль, вам придется переконфигурировать пакет. Однако этого можно избежать. Я рекомендую сначала разработать веб-сайт, не модифицируя его вида, для того, чтобы точно определить, какие свойства вам нужны. Затем модифицировать загрузочный пакет так, чтобы тот включал код только для этих свойств. Как только framework встанет на свое место, можно будет переделать вид сайта.

Обратите внимание: при выходе следующей сокращенной версии Bootstrap или Foundation вам придется перезагрузить пользовательский пакет. Тщательно запишите, что вы скачивали и что нет, с тем, чтобы можно было повторить этот процесс при обновлении своих файлов.

CMS Critic. веб-сайт, на котором проводится обозрение систем управления контентом, был построен на базе Foundation .

МОДИФИКАЦИЯ КОДА

Возможно, потребуется некоторая модификация согласно пользовательским требованиям. Вам, возможно, захочется изменить цвета. Если обладаете большим опытом, то можете пожелать сломать систему сеток.

Если вы пользуетесь framework-ом, это не означает, что ваш веб-сайт должен быть на него похожим. Можно модифицировать CSS и ваш веб-сайт будет выглядеть уникальным, либо с помощью применения LESS (для Bootstrap), либо Sass (для Foundation), или просто написав CSS «с нуля».

Стили в комплекте Bootstrap сами по себе довольно обширные, и могу предположить, что вы не станете сильно их менять. Можно отменить CSS в отдельной таблице стилей или путем применения файлов LESS или Sass. К сожалению, для файлов LESS и Sass существует мало документации, так что вам придется своими силами определить большое количеств кода. Изобилие встроенных в Bootstrap стилей делают его популярным среди неопытных веб-разработчиков клиентской стороны. (Заметьте, что Bootstrap выпустил файлы Sass в последний месяц. До того момента для этого были доступны только файлы LESS.)

У Foundation меньше встроенных стилей. Хотя их можно модифицировать с помощью отдельной таблицы стилей, Foundation гораздо эффективнее модифицируется через свои обширные файлы Sass (для которых существует документация). Приходится отменять меньше CSS, а полностью пользовательский вид легче строится. Однако менее опытные разработчики клиентской стороны могут решить, что с Foundation гораздо труднее из-за того, что требуется больше знания CSS и Sass.

Bootstrap и Foundation также можно модифицировать даже до их скачивания путем простых изменений переменных LESS и Sass. В Bootstrap пользовательские опции переходят на страницы, тогда как в Foundation можно внести лишь небольшие изменения. Но если вы не знакомы с LESS или Sass, то это – быстрый и наспех устроенный способ модифицировать вид framework-а.

Точно так же для модифицирования функциональности можно использовать предусмотренный JavaScript. Самые последним версиям Bootstrap и Foundation для работы пользовательских виджетов требуется jQuery. Если воспользоваться для Bootstrap и Foundation «родными» экранами, то ваш загрузочный пакет будет пользовательским. При выходе следующей сокращенной версии каждого каркаса вам придется заново модифицировать переменные для нового пакета.

Обратите внимание, что JavaScript Foundation’а включает множество хорошо размещенных точек с запятой. В Bootstrap’е имеется очень мало точек с запятой. Это влияет на выбор framework-а некоторыми разработчиками.

Доступность становится для разработчиков все важнее. Оба framework-а предлагают надежный HTML, но давайте обдумаем доступность вне эффективного HTML.

Bootstrap немного продвинулся вперед с помощью Joomla. Joomla, CMS с открытым кодом, объединена с Bootstrap в версии 3. Разработчики Joomla издавна гонятся за доступностью, и не желают, чтобы Bootstrap снизил доступность CMS. Как результат, в Bootstrap 3, помимо прочих улучшений, вы обнаружите коды ARIA и стили, предназначенные только для скринридеров.

Foundation, к сожалению, не ставит доступность в такой степени приоритетом. Он не укомплектован кодами ARIA и стилями для скринридеров. Команда Zurb, тем не менее, заявляет, что хочет сделать нечто большее.

Webflow. строитель веб-сайтов типа «перетащи-и-оставь»,был сделан на базе Bootstrap .

Не существует идеального адаптивного framework-а. Инструменту, выполняющему различную работу, требуется дополнительный код для того, чтобы быть гибким в соответствии с вашими требованиями. Предположим, что полностью пользовательский код наверняка окажется более эффективным для веб-сайта, чем framework.

Некоторые разработчики клиентской стороны говорят мне, что у них собственная система сеток, компоненты CSS и JavaScript’а, поддерживаемые для собственных веб-сайтов. Конечно, в таком подходе нет ничего плохого. Но вам приходится самим поддерживать такой код. Популярный framework минимизирует необходимость поддержки и тестирования.

Я призываю своих коллег – веб-разработчиков клиентской стороны – обдумать перспективы применения framework-ов адаптивного дизайна. Считайте их инструментом производительности, который можно применять полностью или частично. Скачайте лишь систему сеток или возьмите весь пакет со всеми дополнениями. Можно использовать каркас для прототипов или воспользоваться теми его частями, с которыми хорошо знакомы по своему собственному проекту.

framework предназначен для быстрой работы веб-сайта и минимальной борьбы с дефектами. Какого черта, модифицируйте его настолько, чтобы тот смотрелся совершенно по-иному, или измените всего несколько цветов и остановитесь на этом. Как бы вы им не пользовались, у вас получится стандартизированный, задокументированный код, который можно легко передать другому разработчику для поддержки и настройки, который прекрасно выглядит и отлично функционирует. Конечно, код не идеальный, но довольно хороший. Он снижает время создания веб-сайта, что также немного снизит его стоимость.

В мире наверняка найдется место для полностью пользовательских сайтов. Я не предлагаю забросить их ради массовой модификации. Однако в следующий раз, когда клиент захочет немного больше дизайна, но будет ограничен бюджетом, возможно, будет правильным вспомнить о framework-е адаптивного дизайна. Он окажется весьма полезным для вашего арсенала – для быстрого создания прототипов, тестирования или даже готового кода — расширяя ряд ваших продуктов и делая клиента более счастливым.

Автор: Jen Kramer

Редакция: Команда webformyself.

15 Best HTML - CSS Frameworks 2014 for Web Designers - CODECALL

We all know it’s great, that designing it alludes to a kind of creation that is not regular around the masses. You won’t get an individual who will make something out of nothing. Graphic designing is something that is more regularly than not contrasted with the demonstration of outlining and an imagination also. To talk positively is also correct. To add to it, if the issue is identified with graphic outlining then the chances gets much slimmer. It has frequently been seen that individuals with extraordinary expertise of arranging and outlining neglect to amplify on the plot in view of the way that that don’t have the quality or the information that will permit them to play with the apparatuses and the codes that are needed for that reason.

For individuals who themselves have the knowledge about designing will uncover the spaces notably all the more simple to fill in as there will be no viable issue by exploring different avenues regarding the configuration of the site. Subsequently here comes the inquiry regarding how to plan an online journal or e–Book such that it gets classified as the best. This opportunity offers them to randomize the mixes themselves and search for the best mix that meets expectations. In any case for the individuals who are not masters in this field will definitely be in a fix trying to manage the issue.  Well, when you don’t have the flexibility to get it plus the investigations you will doubtlessly need to hinge on upon the works that are accessible.

This is where you will find the newly developed HTML – CSS3 extremely useful. There is no doubt that this has revolutionized the way of designing. There are so many frameworks that you can choose from and then get on with your design. The frameworks actually make the life of the designers much simpler as they do not need to put their heads into the act of creating every last bit and parcel of the website. The tools offered by the frameworks also provide a lot of better tools that can be effectively used to redefine the design of your website. There have been a lot of frameworks that have been designed in the year 2013 and most of them will surely be launched in 2014. Thus it is expected that the journey will get a bit easier for those who are into the act of designing websites.

Today we will share with some highly useful best HTML and CSS frameworks for web designers. Check out the list and share your views with us.

Toast is a CSS framework made as simple as it can be. A plain-English responsive grid makes simple layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a sweat.

A modular CSS framework for truly flexible , accessible  and responsive  websites. YAML provides a complete set of matched building blocks to create complex websites. Grids, navigation, forms, typography module and all provided add-ons work seamlessly together. All layout modules are well prepared for HTML5 and CSS3 and make use of them to benefit from the latest web technologies.

• Bulletproof flexible grid system
• Flexible forms toolkit with theme-support
• Focussed on web standards & accessibility
• Optimized typography for all standard elements
• Matched building blocks for rapid prototyping
• Namespacing avoids conflicts with third-party CSS
• Well prepared for HTML5 and CSS3
• Very slim framework core (5.9 kB)
• Build on Sass

Gumby 2 is built with the power of Sass. Sass is a powerful CSS preprocessor which allowed us to develop Gumby itself with much more speed — and gives you new tools to quickly customize and build on top of the Gumby Framework. Gumby 2 is an amazing responsive CSS Framework. Websites built today must be mobile friendly in order to survive.

Less Framework is a CSS  grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. Columnal is an elastic grid, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.

10 Frameworks to Build Mobile Application with HTML, CSS - JavaScript

For many web developers, which may only be familiar with HTML, CSS, and JavaScript, developing a native mobile app could be unfamiliar territory. Technically speaking, mobile apps in Android, iOS, and Windows Phone are built using completely different programming languages; an Android app uses Java. an iOS app uses Objective-C. while a Windows Phone app uses .NET .

But now, anyone with a decent knowledge of HTML, CSS, and JavaScript can build a mobile application. One key advantage of using web technology to build your app is Portability. Using a packager/compiler, like PhoneGap. you will be able to port and install your app on many different platforms.

There are a number of frameworks that make this possible. They also have done half of the hard work to bridge the gap between web and mobile platforms. Here we have put together 10 of the best mobile frameworks that we could find. If you are ready to build the next billion-dollar app let’s check out the list.

jQueryMobile is a robust mobile development framework to build cross-mobile-platform app. jQuery Mobile support a wide range of different platforms, from a regular desktop, smart phone, tablet, or an e-reader device like Nook or Kindle. Similar to its sibling, jQuery UI, jQuery Mobile comprises a number of UI that, in this case, is optimized for mobile and touch-enabled device s.

10 Best Hybrid Mobile App UI Frameworks: HTML5, CSS and JS

Native developers love working with native code but that doesn't always go well with the business case or result in effective use of effort and time. We often see scenarios where developers end up building same mobile app for android, iOS, windows and other mobile platforms using native APIs and libraries of individual platform.

HTML5 mobile UI frameworks like Ionic let you create cross platform hybrid mobile apps with native look and feel by using the technology that you already know i.e. HTM5, CSS and JavaScript. Whether you are a web developer planning to pitch into mobile apps development, or an experienced native apps developer, hybrid mobile apps development is the easiest way to start building cross platform mobile apps. You do not need to learn anything more than what you already know and yet create enterprise grade mobile applications.

The biggest reason for hybrid apps growth is that you write the hybrid mobile app once and run it on every platform without putting in any extra efforts. You design the app as a regular web app, a responsive web app that fits different screen sizes by using the components provided by mobile HTML5 UI frameworks. The access to native hardware components like Camera or accelerometer is achieved by native JavaScript APIs like the ones that Cordova (PhoneGap) offers. Your app is then compiled into platform specific native packages, ready to be deployed on your mobile device or on app stores.

Over the last few weeks, I have been busy evaluating the HTML5 mobile UI/UX frameworks. There are way too many frameworks out there now so i decided to cover the best of mobile app frameworks available in the market as of today.

Over the last couple of years, ionic has established itself as leader in the hybrid mobile apps development space. Ionic team keeps the framework updated by adapting to the latest trends, ahead of the competitors. Its closest competitors sell commercially while Ionic is free to use and open source, moreover, its ecosystem has grown so huge that you can easily find tons of development resources from the community to get started within no time.

Recently, ionic folks upgraded the framework by adding out of the box support for material design. Under the hood, ionic is wrapping Angular framework and that is what gives this framework most of the hidden superpowers. Like most of the other hybrid app frameworks, Ionic also utilizes Cordova to go native for iOS, Android, windows phone and other platforms.

Ionic framework is maintainable and scalable, uses clean and easy to read markup, comes packed with highly mobile-optimized library of CSS (Powered by Sass), HTML and js components. It also features tools and gestures to ensure interactive apps development with ease.

You can read more about Ionic at - ionicframework .

Onsen UI is relatively new but giving a tough competition to Ionic. It is open source and available under Apache license. Onsen UI also utilizes Angular directives and Topcoat framework for most of its UI components.

For jQuery fans, it comes packed with jQuery based components. One can choose not to use Angular in favor of jquery to build hybrid apps. Onsen UI features a large collection of ready to use components, responsive out of the box that allows you to build mobile, tablet as well as desktop versions of your apps, Allows you to write apps in HTML5 and JavaScript and push through Phonegap & Cordova to go native.

I am personally very impressed with the ease of use, flexibility, semantic markup and performance that Onsen UI brings on table. Onsen UI like Ionic is open source and free to use, read more about Onsen UI at - onsen.io .

Intel XDK is the new kid on the block and a little different from the rest of the pack, it includes the complete range of tools that support development, emulation, and testing as well as debugging and publishing cross platform HTM5 hybrid apps. Intel XDK packs basic ready to use app templates built using "app framework".

App framework is open source JavaScript framework supported by Intel. App framework themes support iPhone, iPad, Tizen, Windows phone, Blackberry and Android look and feel. Apart from app framework, Intel XDK supports jQuery mobile, Bootstrap 3 and Topcoat UI framework.

Due to the clean development workflow and rich feature set, Intel XDK is fast becoming a preferred choice among developers for building cross platform hybrid mobile apps. Intel XDK can be installed on Windows, OSX and Linux and it allows you to build apps for any platform on any platform, of course.

With Intel XDK, You can build apps for iOS, Windows Phone, Android, Tizen and Firefox OS as well as Amazon, Facebook and Chrome web apps. Intel XDK looks quite promising and might be the game changer in hybrid mobile app development space.

Read more about Intel XDK at - intel-xdk .

Sencha Touch is an enterprise grade product for building cross platform end to end mobile web apps with HTML5 and JavaScript. You can call it as the big daddy of mobile application development platforms in the commercial space, mostly enterprises. Sencha has a wide range of products that work hand to hand with Sencha Touch, most of these products carry heavy price tag.

For individual developers and freelances, ionic would make a better choice but for Enterprises, Sencha Touch easily leads the way.

ExtJS, one of the most popular JavaScript frameworks is at the core of Sencha touch platform which helps create high performance apps with near native experience. Sencha Touch packs ready to use widgets with native look and feel for all leading platforms including iOS, android, Windows Phone and Blackberry. Sencha also features a drag and drop HTML5 visual application builder with tons of ready to use templates. Custom components can also be built and added to the library for reuse across apps.

You can read more about Sencha Touch at its official website - Sencha overview .

Kendo UI is another framework for building any kind of web app or hybrid mobile app with HTML5, JavaScript and CSS. It relies heavily on jQuery and comes packed with 70+ ready to use jQuery widgets. Kendo UI allows integration with Angular as well and supports Bootstrap UI framework.

Kendo UI also packs built in ready to use themes including themes featuring material design look and feel. There is a theme builder available as well for creating custom themes, which is one of the biggest advantages of Kendo UI framework.

Kendo UI is maintained and supported by Telerik and comes with open source as well as commercial licensing options. Open source of course is slightly limited in terms of features and you do not get dedicated technical support.

Like Sencha, Kendo UI is also very popular among enterprises. It has a huge customer base including companies like Sony, Nasa, Microsoft, Volvo and Toshiba. You can read more about Kendo UI framework at its official website - t elerik.com/kendo-ui .

Framework 7 leads the race among hybrid app frameworks in iOS mobile apps development space. It is not an apple to apple comparison between Framework 7 and other frameworks like Ionic and Onsen UI since Framework 7 doesn't provide support for building cross platform hybrid apps. But it definitely is the finest and most feature rich framework for iOS hybrid apps development.

The main advantage of Framework 7 is that it empowers developers to build iOS apps with just CSS, JavaScript and HTML, the technology that web developers already know. Framework 7 is so close to native iOS apps that it even provides features like swipe back, out of the box. There are many other ready to use UI elements including list views, media lists, side panels, modals etc. that can be used as is without the need to get into JavaScript.

Framework 7 is completely free and open source under MIT license. You can read more about Framework 7 at its official website - Framework7 .

jQuery suite is still in the game and holding the ground tight against the feature rich hybrid mobile app development frameworks like Ionic, Onsen UI and Framework 7. The die-hard jQuey fans community has built this minimalist jQuery Mobile package on top of solid jQueyr and jQuery UI foundation.

The focus of jQuery mobile is to empower developers to build web apps and mobile apps that run seamlessly and with unique user experience across mobiles, tablets and desktops. It doesn't focus much on providing native look and feel to apps for individual platforms like iOS or Android.

You can read more on jQuery Mobile at  - jquerymobile.com .

This one is for the fans of Bootstrap and Angular. With Mobile Angular UI, you get best of both Bootstrap 3 and Angular framework to build HTML5 mobile applications. Angular UI is more like an extension to Bootstrap 3 but without any dependencies to bootstrap js or jQuery. It utilizes fastclick.js and overthrow.js for smooth and better mobile experience.

Mobile Angular UI provides directives for building UI component like overlays, switches, sidebars, scrollable areas and absolute positioned navbars that don’t bounce on scroll. These essentially are the components that you find missing in Bootstrap 3 for building mobile apps.

Mobile Angular UI is available as open source and free to use under MIT license, you can get the source code at github - mobile-angular-ui .

Read more about Mobile Angular UI at official website- mobileangularui.com .

Famo.us is another powerhouse html5 apps development framework and targets to provide near native experience in hybrid apps. The main difference between famo.us and other hybrid html5 frameworks is that it focuses more on graphics rendering, 2d and 3d and hence is more suitable for games development.

Read more about Famo.us at official website - f amous.org .

Monaca is another commercial mobile app development platform with a huge list of products for managing end to end app development life cycle. Monaca features a cloud based IDE for developing hybrid mobile apps and lets you compile and publish to multiple platforms, utilizing Cordova.

The range of modules and products that Monaca offers is huge and i prefer to cover that in a separate article, keep watching for that and until then read more about Monaca at the official website - monaca.io .

I have already covered 10 of the best mobile app development frameworks but am finding it a little difficult to leave Trigger.io out from this list. Trigger.io takes a different approach and doesn't utilize Cordova for native access.

Trigger.io has its own platform for bridging the gap between html5 development and native access. They claim (Though I am still in the process of validating it) that it produces hybrid applications that have much better performance than Cordova based applications.

Trigger.io uses Forge JavaScript API for access to native functions like accelerometer and camera etc. Keep an eye on Trigger.io and read more about it at its official website - trigger.io .

The mobile app development landscape is changing very rapidly with developers moving from native to HTML5 based hybrid app development options. The biggest advantage of hybrid mobile apps is “write once and run everywhere” approach.

Hybrid app development using javaScript "however" is not the only alternative to native mobile app development. There are other platforms also like Xamarin from Microsoft that let you write your application in c# and the compliers compile the application to native code of various mobile platforms including iOS, Android and windows.

While frameworks like Xamarin match native performance but none of these in my opinion beats the ease of building mobile apps with JavaScript, css and html – the hybrid way. Do share with our other readers your favorite hybrid mobile app development framework via comments. Cheers!

What are Frameworks? 22 Best Responsive CSS Frameworks for Web Design

This post aims to present what frameworks are and what they are used for, alongside a selection of the best that can be got for free on the internet. In this way, we want to help web designers and developers who are starting out to discover new resources and possibilities, as well as setting out concepts that can sometimes be too abstract for those who have already travelled far in the world of web design.

A framework is a standardized set of concepts, practices and criteria for dealing with a common type of problem. which can be used as a reference to help us approach and resolve new problems of a similar nature.

In the world of web design, to give a more straightforward definition, a framework is defined as a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of websites, as a basis to start building a site.

Most websites share a very similar (not to say identical) structure. The aim of frameworks is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, frameworks allow us to cut out much of the work and save a lot of time.

To summarize: there’s no need to reinvent the wheel.

There are basically 2 types to differentiate: backend and frontend (this distinction is drawn depending on whether the framework is for the presentation layer or the application/ logical layer.

It’s important to understand that frameworks are a conceptual notion: a pre-prepared standard kit from which to work. The concept of a framework can be applied to different processes carried out on the web: the programmer’s layer which connects the database to the site content and uses PHP language, and the designer’s layer, where that content must be presented in HTML documents with defined CSS style sheets so it can ultimately be viewed in a browser.

They can be backend (a set of files with libraries to access databases, template structures, session management) or frontend. We’re going to focus on frontend frameworks.

Frontend frameworks usually consist of a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.)

The usual components are:

About responsive frameworks . Currently the rise of responsive web design techniques, which facilitate the development of websites that can adapt to various resolutions for different mobile and desktop devices, is leading to the emergence of responsive frameworks. That is, they solved the common problem of making a responsive site. These frameworks. to offer a responsive solution from the point of installation.

Within CSS frameworks, we can draw a distinction between two types of framework according to their complexity: simple frameworks and complete frameworks. This distinction is subjective, and doesn’t mean one is better than the others but rather that they give different solutions depending on the level of complexity and/ or flexibility required.

These are often called simply “grid systems” but are frameworks nonetheless. They offer style sheets with column systems to facilitate the distribution of different elements according to the established design.

The 1140 CSS Grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense. Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.

Golden Grid System

A folding grid for responsive design.

Mueller Grid System

MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.

Responsive Grid System, by Graham Miller

Spectacularly Easy Responsive Design. Inspired by Ethan Marcotte's responsive web design, this site was set up in the spirit of giving something back. I found something that works for me, and I want to share it.

A CSS framework for responsive web designs. Titan Framework comes in two versions, with 12 and 16 columns

Responsive Grid System, by Denis LeBlanc

Simple CSS framework for fast, intuitive development of responsive websites. Built using the 'Mobile First' approach, 'clearfix' for clearing floats, box-sizing: border-box for adding additional padding to elements, and weighs less then 1kb compressed. Responsive design isn't hard, you've just never used responsive.gs.

Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Gridiculo.us

Gridiculous was created after I tried out a bunch of different responsive grids and realized that none of them offered all of the features I required.

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.

Toast is a CSS framework as simple as it can be, but no simpler. A twelve column responsive grid makes layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

Ingrid is a lightweight and fluid CSS layout system, whose main goal is to reduce the use of classes on individual units. Making it feel a bit less obtrusive and bit more fun to reflow for responsive layouts.

960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Super Simple Responsive Framework built to work on mobile devices, tablets, netbooks and desktop computers

Responsive grids for Compass. Susy is based on Natalie Downe's CSS Systems, made possible by Sass, and made easy with Compass. You can use it anywhere, from static sites to Django, Rails, Wordpress and more. It even comes packaged as part of Middleman, to make your life easy.

They usually offer complete frameworks with configurable features like styled-typography, sets of forms, buttons, icons and other reusable components built to provide navigation, alerts, popovers, and more, images frames, HTML templates, custom settings, etc.

Sleek, intuitive, and powerful front-end framework for faster and easier web development. Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

Foundation 3

An advanced responsive front-end framework. Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself — and gives you new tools to quickly customize and build on top of Foundation.

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development. Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

A modular CSS framework for truly flexible, accessible and responsive websites. YAML is tested and supported in major modern browsers like Chrome, Firefox, Opera, Safari and Internet Explorer.

Not trying to compete with Bootstrap or Foundation because they play in another league. Just worry about creating responsive and fully extensible sites easily.

Gumby Framework is a responsive 960 grid CSS framework which includes multiple types of grids with different column variations which enables you to be flexible throughout an entire project's lifecycle.

CSS-framework for professional developers. Minimal and enough. Adaptive and responsive. Revolution grid and beautiful typography. No imposed styles and freedom.

Groundwork

GroundworkCSS has been built from the ground up with the incredibly powerful CSS preprocessor, Sass.

ResponsiveAeon

ResponsiveAeon is an elegant & minimalistic css3 grid system framework, now with a responsive grid all based in percentage with mediaqueries, html5 starting point and javascript.

Choosing the right framework for my site is far from simple, for several reason:

1. Every site is different and will require different characteristics. Using a very complete framework for a single page site may give an adequate result, but surely misses out on many resources.
2. Currently there aren’t many significant differences: they’re all very complete and easy to use.

However, we’ll give you some pointers to keep in mind when it comes to choosing a suitable framework:

• Speed of installation: some are very simple to install and start using. Others require more time to configure.
• Ease of understanding: some are a bit of a pain to get to grips with, complicated. Others, by contrast, are comparatively more straightforward.
• Options: some frameworks are more complex than others and offer more configuration options, widgets and interface options. These will allow you to do better things with your site.
• Integration with other systems.
• Best long-term support: Some digital projects lack continuity in time and updates and support services stop. It’s always better to opt for those that offer continued support guarantees. Many of them are supported by companies that offer other professional products on the market.

Advantages

• Speeds up the mock-up process
• Clean and tidy code
• Solutions to common CSS problems
• Browser compatibility
• Learn good practices
• Having a single procedure to resolve common problems makes maintaining various projects more straightforward.
• Helpful in collaborative work

Disadvantages

• Mixes content and presentation
• Unused code leftover
• Slower learning curve
• You don’t learn to do it yourself

Not necessarily. The developer must take the final decision on whether or not to use a framework. This will depend on several of the issues we’ve looked at. Frameworks are a resource that can be extremely useful for many people, but that doesn’t mean they are necessarily useful for you. Now you know what they are, which ones are out there, and the advantages and disadvantages of using them.