{"id":69,"date":"2013-01-10T11:00:02","date_gmt":"2013-01-10T10:00:02","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/?p=69"},"modified":"2018-10-21T16:55:41","modified_gmt":"2018-10-21T15:55:41","slug":"frameworks-css","status":"publish","type":"post","link":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/css\/frameworks-css\/","title":{"rendered":"Frameworks CSS"},"content":{"rendered":"<p>[Darrera actualitzaci\u00f3: 21\/10\/2018]<\/p>\n<p>Un <i>framework<\/i> \u00e9s, en termes inform\u00e0tics, un conjunt de biblioteques o classes, reutilitzable, que ens permet economitzar recursos a l&#8217;hora de desenvolupar aplicacions. Quan parlem de CSS, un <i>framework<\/i> \u00e9s un conjunt d&#8217;arxius CSS amb una s\u00e8rie de classes predefinides i estils aplicats tant als elements est\u00e0ndard d&#8217;HTML com a aquestes classes. Molts <i>frameworks<\/i> inclouen tamb\u00e9 elements de disseny de ret\u00edcula que ajuden en el proc\u00e9s de maquetat. (Molts <i>frameworks<\/i> inclouen, a m\u00e9s, parts sobre JavaScript o un arxiu .htacess, per exemple.)<\/p>\n<p>Un bon <i>framework<\/i> ens permet, per tant, dissenyar p\u00e0gines de manera m\u00e9s r\u00e0pida i eficient. Per\u00f2 el seu \u00fas no est\u00e0 exempt d&#8217;inconvenients. El primer \u00e9s inherent a l&#8217;\u00fas de plantilles: totes les p\u00e0gines dissenyades amb un mateix <i>framework<\/i> tendeixen a tenir un aspecte molt similar, pel que \u00e9s dif\u00edcil diferenciar-les entre si. Un segon problema \u00e9s que, si no &#8216;netegem&#8217; el codi, molt probablement acabem carregant amb un important nombre de definicions per elements i classes que no estem usant, amb el conseg\u00fcent impacte negatiu sobre el rendiment de la p\u00e0gina. Finalment, un tercer problema principal \u00e9s que, per la seva universalitat, les classes que s&#8217;usen tenen noms molt poc sem\u00e0ntics. Tots aquests problemes s\u00f3n superables amb un esfor\u00e7 moderat, per\u00f2 cal tenir-los en compte en el proc\u00e9s de disseny.<\/p>\n<p>Dos exemples bastant populars de frameworks s\u00f3n <a href=\"http:\/\/html5boilerplate.com\/\">HTML5 Boilerplate<\/a> (<a href=\"https:\/\/github.com\/h5bp\/html5-boilerplate\/blob\/master\/dist\/doc\/TOC.md\">HTML5 Boilerplate documentation<\/a>, tamb\u00e9 compta amb una <a href=\"http:\/\/html5boilerplate.com\/mobile\/\">versi\u00f3 m\u00f2bil<\/a>) i <a href=\"http:\/\/getbootstrap.com\/2.3.2\/\">Bootstrap<\/a>. Existeix una eina web, <a href=\"http:\/\/www.initializr.com\/\">Initializr<\/a> (<a href=\"https:\/\/docs.spring.io\/initializr\/docs\/current\/reference\/htmlsingle\/\">guia de refer\u00e8ncia<\/a>) que permet generar projectes utilitzant qualsevol d&#8217;aquests dos frameworks.<\/p>\n<p>D&#8217;altres frameworks:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/naileditdesign\/Bedrock\">Bedrock<\/a> \u00e9s un framework <i>responsive<\/i>, <i>mobile first<\/i> de 18 columnes.<\/li>\n<li><a href=\"http:\/\/unsemantic.com\/\">Unsemantic<\/a> \u00e9s un framework de ret\u00edcula de columnes fluides.<\/li>\n<li><a href=\"http:\/\/yuilibrary.com\/\">YUI<\/a><\/li>\n<li><a href=\"http:\/\/foundation.zurb.com\/\">Foundation<\/a><\/li>\n<li><a href=\"http:\/\/semantic.gs\/ hreflang=\"> The Semantic Grid System<\/a><\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>[Darrera actualitzaci\u00f3: 21\/10\/2018] Un framework \u00e9s, en termes inform\u00e0tics, un conjunt de biblioteques o classes, reutilitzable, que ens permet economitzar recursos a l&#8217;hora de desenvolupar aplicacions. Quan parlem de CSS, un framework \u00e9s un conjunt d&#8217;arxius CSS amb una s\u00e8rie de classes predefinides i estils aplicats tant als elements est\u00e0ndard d&#8217;HTML com a aquestes classes. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/css\/frameworks-css\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Frameworks CSS&#8221;<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-69","post","type-post","status-publish","format-standard","hentry","category-css","entry"],"_links":{"self":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":15,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"predecessor-version":[{"id":474,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/69\/revisions\/474"}],"wp:attachment":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}