{"id":3534,"date":"2012-08-17T12:26:13","date_gmt":"2012-08-17T12:26:13","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=3534"},"modified":"2019-03-05T16:54:45","modified_gmt":"2019-03-05T16:54:45","slug":"fluid-960-grid-system","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/","title":{"rendered":"Fluid 960 Grid System"},"content":{"rendered":"<p>960 Grid System es un framework CSS, que no es m\u00e1s que una declaraci\u00f3n de estilos que dispone las clases necesarias para implementar columnas en una p\u00e1gina web, de diversos tama\u00f1os, con las que maquetar nuestros contenidos f\u00e1cil y ordenadamente.<\/p>\n<p>Podr\u00edamos hacer un sistema propio para maquetar una p\u00e1gina con diversas columnas, pero utilizando un framework como 960 Grid ya tendremos la mayor parte del trabajo realizado, pues simplemente tendremos que colocar a cada contenedor de elementos las clases disponibles en el sistema, para que tenga la anchura y posici\u00f3n deseadas.<\/p>\n<p>Adem\u00e1s, lo que me resulta m\u00e1s interesante de este framework es que si minimizas la pantalla del navegador, los contenedores se ajustan a este ancho y alto.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/fluid960.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3973\" title=\"fluid960\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/fluid960.png\" alt=\"\" width=\"873\" height=\"430\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/fluid960.png 873w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/fluid960-300x147.png 300w\" sizes=\"auto, (max-width: 873px) 100vw, 873px\" \/><\/a><\/p>\n<p>Utilizar un framework CSS no aporta nada de creatividad para realizar un dise\u00f1o bonito, pero nos permite anclar contenidos en la p\u00e1gina de una manera sencilla. Nosotros, por tanto, seremos los que nos encargaremos de dise\u00f1ar una p\u00e1gina web que tenga un aspecto agradable, pero podremos partir de una estructura en columnas, donde ce\u00f1ir los espacios para que quede todo bien colocado.<\/p>\n<p>960 Grid System lleva este nombre porque es un sistema de rejilla para hacer p\u00e1ginas con 960 p\u00edxeles de ancho. Las columnas que podremos colocar en la rejilla tendr\u00e1n distintas anchuras, pero siempre el ancho total de la p\u00e1gina ser\u00e1 de 960 p\u00edxeles. Se ha elegido este valor porque 960 es divisible por una buena cantidad de n\u00fameros, lo que lo hace m\u00e1s vers\u00e1til para poder alcanzar p\u00e1ginas resultantes de la m\u00e1s variada gama.<\/p>\n<p>Este framework tambi\u00e9n incorpora algunas funcionalidades de jQuery o Mootools que podr\u00e1s comprobar en <a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/fluid960gs\/\" target=\"_blank\" rel=\"noopener noreferrer\">ejemplo que muestra todo su contenido<\/a>.<\/p>\n<p>Utilizando este framework vamos a crear una estructura que contiene cabecera, columna izquierda, contenido y pie de p\u00e1gina.<\/p>\n<p>En este ejemplo solo incluimos en nuestra p\u00e1gina el archivo \u00abgrid.css\u00bb que incorpora el framework y utilizando sus clases.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/fluid960gs\/ejemplo2.html\" target=\"_blank\" rel=\"noopener noreferrer\">Ver el ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>960 Grid System es un framework CSS, que no es m\u00e1s que una declaraci\u00f3n de estilos que dispone las clases necesarias para implementar columnas en una p\u00e1gina web, de diversos tama\u00f1os, con las que maquetar nuestros contenidos f\u00e1cil y ordenadamente. Podr\u00edamos hacer un sistema propio para maquetar una p\u00e1gina con diversas columnas, pero utilizando un [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3973,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,13,12,5],"tags":[74,181],"class_list":["post-3534","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-herramientas","category-html","category-jquery","tag-contenedores","tag-mootools"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Fluid 960 Grid System - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fluid 960 Grid System - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"960 Grid System es un framework CSS, que no es m\u00e1s que una declaraci\u00f3n de estilos que dispone las clases necesarias para implementar columnas en una p\u00e1gina web, de diversos tama\u00f1os, con las que maquetar nuestros contenidos f\u00e1cil y ordenadamente. Podr\u00edamos hacer un sistema propio para maquetar una p\u00e1gina con diversas columnas, pero utilizando un [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-08-17T12:26:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-05T16:54:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/fluid960.png\" \/>\n\t<meta property=\"og:image:width\" content=\"873\" \/>\n\t<meta property=\"og:image:height\" content=\"430\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/\",\"name\":\"Fluid 960 Grid System - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/fluid960.png\",\"datePublished\":\"2012-08-17T12:26:13+00:00\",\"dateModified\":\"2019-03-05T16:54:45+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/fluid960.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/fluid960.png\",\"width\":873,\"height\":430},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fluid 960 Grid System\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fluid 960 Grid System - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Fluid 960 Grid System - Jose Aguilar Blog","og_description":"960 Grid System es un framework CSS, que no es m\u00e1s que una declaraci\u00f3n de estilos que dispone las clases necesarias para implementar columnas en una p\u00e1gina web, de diversos tama\u00f1os, con las que maquetar nuestros contenidos f\u00e1cil y ordenadamente. Podr\u00edamos hacer un sistema propio para maquetar una p\u00e1gina con diversas columnas, pero utilizando un [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-08-17T12:26:13+00:00","article_modified_time":"2019-03-05T16:54:45+00:00","og_image":[{"width":873,"height":430,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/fluid960.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/","url":"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/","name":"Fluid 960 Grid System - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/fluid960.png","datePublished":"2012-08-17T12:26:13+00:00","dateModified":"2019-03-05T16:54:45+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/fluid960.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/fluid960.png","width":873,"height":430},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/fluid-960-grid-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Fluid 960 Grid System"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=3534"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3534\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/3973"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=3534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=3534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=3534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}