A framework is basically regarded as a software application which aids developers in quickly designing and developing dynamic websites. With the advent of HTML5 and CSS3, design and development is becoming an easier endeavor for nearly everyone..
A well structured CSS framework serves as the basic conceptual foundation by which one can use as “scratch” for their web-projects. For instance, instead of defining global reset, consistent baseline, typographic rules or basic styles for forms over and over again, so that every time you work on a new project — one can now prepare a default-style once, and reuse it in all of their future projects, therefore saving time.
The HTML5 framework provides many useful features such as beautiful typography, video players, form validation, design section and many more features which enable users to easily develop web applications, and well designed websites in a shorter period of time with less effort.
In order to save all of you code geeks some time and frustration, we have collected some of the latest and most recently popular frameworks which will assist you within your coding undertakings and make your life somewhat easier, and also save you time so you can step out and do more things you enjoy in life ! We hope these frameworks will serve your code purpose and projects.
1. cgSceneGraph : Powerful Animation Framework with HTML5 Canvas
cgSceneGraph is an object-oriented and easy-to-use JavaScript animation framework that is built on top of HTML5 canvas. It is created with professional apps and games in mind, works cross-browser and has lots of built-in nodes like images, text, buttons, shapes, etc.
The framework is capable of managing complex scenes, supports mouse and touch events, has attributes for draggable + resizable and comes with a collision + particle system. There is also support for asynchronous image loading, color manipulation and much more.
[zilla_button url=”http://gwennaelbuchet.github.com/cgSceneGraph/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
2. Groundwork : Responsive Front-End Framework
Groundwork is another good alternative that is built with SASS + Compass and offers an advanced responsive layout. It has a flexible, fluid and nestable grid system which makes creating any layout possible. The framework includes many UI components like tabs, buttons, forms, navigation, icons and more. Groundwork is documented very well and there are templates to get started quickly.
[zilla_button url=”http://groundworkcss.github.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
3. Opentip : Beautiful JavaScript Tooltips Framework
Opentip is a pretty cool JavaScript tooltips framework that can work with jQuery, Prototype or standalone. It creates the tooltips with HTML5 canvas so that any creative designs are possible and they are rendered almost equally in all browsers. There is support for calling content into tooltips with Ajax, positioning them wherever wanted or grouping them (so that only one tooltip of the same group can stay open). A nice and unique feature is stems (the little pointers) which auto-arranges themselves into any direction.
[zilla_button url=”http://www.opentip.org/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
4. xyCSS : CSS Template for Responsive Layouts
xyCSS is a simplistic and lightweight CSS framework (with a single CSS file) for building responsive and liquid layouts. It includes styles for the structure + typography and focuses on clean, semantic markup. The CSS reset used is the popular one from Eric Meyer. It is ready to support any device with any resolution and there is a detailed documentation with demos. Also, it has a wide-range of tools for working easier including jQuery plugins for displaying a grid in the background or changing the screen width, xyCSS-compatible WP plugins and more.
[zilla_button url=”http://xycss.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
5. Ink : An Impressive Front-End Development Kit
It is created by the Sapo.pt team (a popular website in Portugal) and consists of lots of cool stuff from a fluid grid to styles for handling typography, menus, pagination, tables, forms, notifications, buttons and more. InK doesn’t rely on any popular JavaScript frameworks but uses its own (LibSAPO.js) and has various
JavaScript components for handling galleries, modals, date-pickers, sortable items, tree-views, tabs, etc.
[zilla_button url=”http://ink.sapo.pt/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
6. Maxmertkit : Front-End Framework
Maxmertkit is a fresh one that looks/feels a bit like Bootstrap but has different things to offer. It uses SASS for the CSS part and includes styles for all major stuff like grid, typography, forms, tables, buttons and lists. There are various widgets like buttons, tabs, grouped elements, badges, dropdowns, tooltips, menus and more. And, some handy JavaScript components exist for notifications, carousel, buttons, modals, etc. Like mentioned it feels like Bootstrap on some parts but differentiates in details where one of them is the choice of the icon fonts which are Font Awesome and Zocial.
[zilla_button url=”http://www.maxmert.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
7. Workless : An HTML5-CSS3 Framework with All the Basics
Workless is an HTML5-CSS3 framework for building cross-browsers websites with ease. It is a project that started as a mashup of Bootstrap + HTML5 Boilerplate, evolved more and now has most of the frequently-used stuff. The framework includes a grid system and styles for forms, tables, buttons, labels, notifications and typography. Also, there is an icon font and few jQuery plugins (modals, tooltips, text formatting) integrated.
[zilla_button url=”http://workless.ikreativ.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
8. Junior : Native- Like Apps with HTML5
Junior is a HTML5 front-end framework for creating mobile apps that look and behave like native. It uses CSS3 transitions for a slick performance, supports swipable carousels and includes various UI components (from Ratchet). The framework uses Zepto (which is nice for jQuery fans as it has a jQuery-like syntax) and has integration with backbone.js views + routers. Junior is pretty easy to use and has the documents + examples to get you started.
[zilla_button url=”http://justspamjustin.github.com/junior/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
9. Framer : Prototyping Tool for Desktop & Mobile
Framer is an open source framework for easily building and testing complex interactions + rich animations for desktop and mobile layouts. It is built with web technologies and works by simply editing a JavaScript file with the functions provided. The layouts created are structured with views (like layers), there are animations provided and everything can be styled with either JavaScript or CSS. And, for the interactions, there are events to the rescue (like click, dblclick, mouseover, mouseout, keydown or touch events).
[zilla_button url=”http://www.framerjs.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
10. Reuze : Front-End Framework with Ready to Use HTML Structures
Reuze is a front-end framework that focuses on offering ready-to-use and lightweight code for frequently-used web structures. These currently include code blocks for articles with/without images, headers, links and in multiple columns. Its website allows customizing the output with various parameters and Reuze provides the generated HTML code. The generated code is RDFa Lite compliant and also works with any other front-end framework like Bootstrap or Foundation. It is a JavaScript-free framework and there are more stuff to come (images, products, etc.).
[zilla_button url=”http://reuze.me/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
No Responses