{"id":865,"date":"2014-04-25T01:51:47","date_gmt":"2014-04-24T17:51:47","guid":{"rendered":"https:\/\/www.ookangzheng.com\/?p=865"},"modified":"2020-05-24T16:02:14","modified_gmt":"2020-05-24T08:02:14","slug":"15-best-html-css-frameworks-2014-for-web-designers","status":"publish","type":"post","link":"https:\/\/www.ookangzheng.com\/15-best-html-css-frameworks-2014-for-web-designers\/","title":{"rendered":"15 Best HTML &#038; CSS Frameworks 2014 for Web Designers"},"content":{"rendered":"<p>Today we come up with some highly useful best HTML and CSS frameworks for web designers. Visit this list and share your views with us.<\/p>\n<h3><\/h3>\n<h3>CSS Frameworks<\/h3>\n<p>&nbsp;<\/p>\n<h3>1) A CSS Framework \u2013\u00a0<a style=\"color: #3e5d9d;\" href=\"https:\/\/daneden.me\/toast\/\/\" target=\"_blank\" rel=\"noopener noreferrer\">Toast<\/a><\/h3>\n<p>Toast is a CSS framework made as simple as it can be, but no simpler. 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 single thing.<\/p>\n<p><a style=\"color: #3e5d9d;\" title=\"A CSS Framework\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/toast.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-103\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/toast-e1389529449564.png\" alt=\"toast\" width=\"550\" height=\"334\" \/><\/a><\/p>\n<h3>2)\u00a0A CSS Framework \u2013\u00a0<a style=\"color: #3e5d9d;\" title=\"A CSS Framework\" href=\"http:\/\/www.yaml.de\/\" target=\"_blank\" rel=\"noopener noreferrer\">Yaml<\/a><\/h3>\n<p>A modular CSS framework for truly\u00a0<em>flexible<\/em>,\u00a0<em>accessible<\/em>\u00a0and\u00a0<em>responsive<\/em>\u00a0websites.\u00a0YAML 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.\u00a0All layout modules are well prepared for HTML5 and CSS3 and make use of them to benefit from the latest web technologies.<\/p>\n<p>Features: –<\/p>\n<ul>\n<li>Bulletproof flexible grid system<\/li>\n<li>Flexible forms toolkit with theme-support<\/li>\n<li>Focussed on web standards &amp; accessibility<\/li>\n<li>Optimized typography for all standard elements<\/li>\n<li>Matched building blocks for rapid prototyping<\/li>\n<li>Namespacing avoids conflicts with third-party CSS<\/li>\n<li>Well prepared for HTML5 and CSS3<\/li>\n<li>Very slim framework core (5.9 kB)<\/li>\n<li>Build on Sass<\/li>\n<\/ul>\n<p><a style=\"color: #3e5d9d;\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/yaml.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-104\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/yaml-e1389529720967.png\" alt=\"yaml\" width=\"550\" height=\"334\" \/><\/a><\/p>\n<h3>3)\u00a0A CSS Framework –\u00a0<a style=\"color: #3e5d9d;\" href=\"http:\/\/gumbyframework.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gumby<\/a><\/h3>\n<p>Gumby 2 is built with the power of Sass. Sass is a powerful CSS preprocessor which allows us to develop Gumby itself with much more speed \u2014 and gives you new tools to quickly customize and build on top of the Gumby Framework.\u00a0Gumby 2 is an amazing responsive CSS Framework. Websites built today must be mobile friendly in order to survive.<\/p>\n<p><a style=\"color: #3e5d9d;\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/gumby.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-105\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/gumby-e1389530258403.png\" alt=\"gumby\" width=\"550\" height=\"334\" \/><\/a><\/p>\n<h3>4)\u00a0A CSS Framework \u2013\u00a0<a style=\"color: #3e5d9d;\" title=\"A CSS Framework\" href=\"http:\/\/responsive.gs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Responsive<\/a><\/h3>\n<p><a style=\"color: #3e5d9d;\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/responsive.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-106\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/responsive-e1389531045308.png\" alt=\"responsive\" width=\"548\" height=\"332\" \/><\/a><\/p>\n<h3>5)\u00a0A CSS Framework –\u00a0<a style=\"color: #3e5d9d;\" title=\"A CSS Framework\" href=\"http:\/\/lessframework.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Less Framework<\/a><\/h3>\n<p>Less Framework is a\u00a0<abbr>CSS<\/abbr>\u00a0grid system for designing adaptive web\u00adsites. It contains 4 layouts and 3 sets of typography presets, all based on a single\u00a0grid.<\/p>\n<p><a style=\"color: #3e5d9d;\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/lessframework.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-107\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/lessframework-e1389531352634.png\" alt=\"lessframework\" width=\"550\" height=\"334\" \/><\/a><\/p>\n<h3>6)\u00a0A CSS Framework \u2013\u00a0<a style=\"color: #3e5d9d;\" title=\"CSS Framework\" href=\"http:\/\/www.columnal.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Columnal<\/a><\/h3>\n<p>The Columnal CSS grid system is a \u201cremix\u201d 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.<\/p>\n<p><a style=\"color: #3e5d9d;\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/columnal.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-108\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/columnal-e1389531673398.png\" alt=\"columnal\" width=\"547\" height=\"334\" \/><\/a><\/p>\n<h3>7)\u00a0A CSS Framework –\u00a0<a style=\"color: #3e5d9d;\" title=\"CSS Framework\" href=\"http:\/\/foundation.zurb.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Foundation<\/a><\/h3>\n<p>Foundation 5 is our fastest, best build yet. It\u2019s packed with features to help you code and learn faster than ever before.<\/p>\n<p><a style=\"color: #3e5d9d;\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/foundation.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-110\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/foundation-e1389532047465.png\" alt=\"foundation\" width=\"550\" height=\"334\" \/><\/a><\/p>\n<h3>8)\u00a0A CSS Framework \u00a0–\u00a0<a style=\"color: #3e5d9d;\" title=\"CSS Framework\" href=\"http:\/\/susy.oddbird.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">Susy<\/a><\/h3>\n<p>&nbsp;<\/p>\n<p><a style=\"color: #3e5d9d;\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/susy.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-111\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/susy-e1389532717873.png\" alt=\"susy\" width=\"550\" height=\"334\" \/><\/a><\/p>\n<h3>9)\u00a0A CSS Framework –\u00a0<a style=\"color: #3e5d9d;\" title=\"CSS Framework\" href=\"http:\/\/imperavi.com\/kube\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kube<\/a><\/h3>\n<p>Minimalistic and sufficient for everything, adaptive and responsive.\u00a0Revolutionary flexible grid and beautiful typography. Absolute freedom with no imposed styling.<\/p>\n<p><a style=\"color: #3e5d9d;\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/kube.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-112\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/kube-e1389533339692.png\" alt=\"kube\" width=\"550\" height=\"334\" \/><\/a><\/p>\n<h3>10)\u00a0A CSS Framework \u2013\u00a0<a style=\"color: #3e5d9d;\" href=\"http:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Get Bootstrap<\/a><\/h3>\n<p>&nbsp;<\/p>\n<p><a style=\"color: #3e5d9d;\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/bootstrap.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-113\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/bootstrap-e1389533812979.png\" alt=\"bootstrap\" width=\"550\" height=\"334\" \/><\/a><\/p>\n<h3>HTML Framework<\/h3>\n<p>&nbsp;<\/p>\n<h3>11) A HTML Framework –\u00a0<a style=\"color: #3e5d9d;\" title=\"A HTML Framework\" href=\"http:\/\/www.99lime.com\/elements\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML Kick Start<\/a><\/h3>\n<p>Ultra\u2013Lean HTML5, CSS, &amp; JS Building Blocks\u00a0for Rapid Website Production.<\/p>\n<p><a style=\"color: #3e5d9d;\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/99lime.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-114\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/99lime-e1389534266756.png\" alt=\"99lime\" width=\"550\" height=\"334\" \/><\/a><\/p>\n<h3>12)\u00a0A HTML Framework –\u00a0\u00a0<a style=\"color: #3e5d9d;\" title=\"A HTML Framework\" href=\"http:\/\/html5boilerplate.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML5 Boilerplate<\/a><\/h3>\n<p>HTML5 Boilerplate helps you build\u00a0fast,\u00a0robust, and\u00a0adaptable\u00a0web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.<\/p>\n<p><a style=\"color: #3e5d9d;\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/html5framework.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-115\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/html5framework-e1389534654367.png\" alt=\"html5framework\" width=\"550\" height=\"331\" \/><\/a><\/p>\n<h3>13)\u00a0A HTML Framework –\u00a0<a style=\"color: #3e5d9d;\" title=\"A HTML Framework\" href=\"http:\/\/www.getskeleton.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Get Skeleton<\/a><\/h3>\n<p>&nbsp;<\/p>\n<p><a style=\"color: #3e5d9d;\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/skeleton.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-116\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/skeleton-e1389535042872.png\" alt=\"skeleton\" width=\"550\" height=\"334\" \/><\/a><\/p>\n<h3>14)\u00a0A HTML Framework –\u00a0<a style=\"color: #3e5d9d;\" title=\"A HTML Framework\" href=\"http:\/\/montagejs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Montagejs<\/a><\/h3>\n<p>MontageJS is a modern, full stack HTML5 framework designed to create single-page applications\u2014fast! MontageJS uses time-tested design patterns and software principles, allowing you to easily create a modular architecture for your projects and help deliver a high-quality user experience. This allows designers and developers to work collaboratively and quickly.<\/p>\n<p><a style=\"color: #3e5d9d;\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/montagejs.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-117\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/montagejs-e1389535343850.png\" alt=\"montagejs\" width=\"550\" height=\"334\" \/><\/a><\/p>\n<h3>15)\u00a0A HTML Framework –\u00a0<a style=\"color: #3e5d9d;\" href=\"http:\/\/zebra.gravitysoft.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Zebra<\/a><\/h3>\n<p>&nbsp;<\/p>\n<p><a style=\"color: #3e5d9d;\" href=\"http:\/\/designzum.com\/wp-content\/uploads\/2014\/01\/zebra.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-118\" src=\"https:\/\/www.ookangzheng.com\/wp-content\/uploads\/2014\/04\/zebra-e1389536100883.png\" alt=\"zebra\" width=\"550\" height=\"334\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today we come up with some highly useful best HTML and CSS frameworks for web designers. Visit this list and&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-865","post","type-post","status-publish","format-standard","hentry","category-life"],"_links":{"self":[{"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/posts\/865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/comments?post=865"}],"version-history":[{"count":0,"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/posts\/865\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/media?parent=865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/categories?post=865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ookangzheng.com\/wp-json\/wp\/v2\/tags?post=865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}