{"id":1261,"date":"2018-01-31T19:36:45","date_gmt":"2018-01-31T19:36:45","guid":{"rendered":"http:\/\/maquetando.com\/?p=1261"},"modified":"2018-01-31T19:45:14","modified_gmt":"2018-01-31T19:45:14","slug":"bulma-css-un-framework-ligero-y-actual","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/bulma-css-un-framework-ligero-y-actual\/","title":{"rendered":"Bulma CSS:  un framework ligero y poderoso"},"content":{"rendered":"<p><a href=\"http:\/\/maquetando.com\/wp-content\/uploads\/2018\/01\/Bulma-Youtube.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1264\" src=\"http:\/\/maquetando.com\/wp-content\/uploads\/2018\/01\/Bulma-Youtube.jpg\" alt=\"\" width=\"618\" height=\"412\" srcset=\"https:\/\/orpot.com\/blog\/wp-content\/uploads\/2018\/01\/Bulma-Youtube.jpg 618w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2018\/01\/Bulma-Youtube-600x400.jpg 600w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2018\/01\/Bulma-Youtube-300x200.jpg 300w\" sizes=\"(max-width: 618px) 100vw, 618px\" \/><\/a><\/p>\n<p>En el mundo dominado por Bootstrap,\u00a0 Semantic UI\u00a0 y\u00a0 Foundation, es dif\u00edcil que surjan alternativas de frameworks CSS que los puedan alcanzar debido a sus a\u00f1os de desarrollo, pero esto no significa que no existan algunas nuevas herramientas que podrian ser populares entre la comunidad de frontend.<\/p>\n<p>Sin embargo, el tr\u00edo mencionado es bien conocido, maduro y existe en el mercado desde hace mucho tiempo, todos son relativamente pesados y todos ellos requieren un profundo conocimiento del n\u00facleo para\u00a0 hacer personalizaciones (\u00bfalguna vez has hecho dropdowns personalizados en Semantic???!).<\/p>\n<h3>Bulma<\/h3>\n<p>Y ah\u00ed viene\u00a0 Bulma. Hermosa, ligera y elegante (as\u00ed como la de Dragon Ball Z Kai)\u00a0 \u00a0Bulma CSS es una herramienta creada por Jeremy Thomas y su principal ventaja\u00a0 \u00a0es que su modelo de caja\u00a0 est\u00e1 completamente basado en Flexbox. (S\u00ed! No m\u00e1s Floats CSS\u00a0 ni\u00a0 porcentajes!)<\/p>\n<p>Bulma dice que sus principales caracter\u00edsticas son:<\/p>\n<ul>\n<li>100% responsivo<\/li>\n<li>Modular<\/li>\n<li>Moderno<\/li>\n<li>Gratis<\/li>\n<\/ul>\n<h2>La belleza de Flexbox<\/h2>\n<p>Como mencion\u00e9 anteriormente, el grid\u00a0 de Bulma est\u00e1 construido completamente con Flexbox. Lograr un dise\u00f1o flexible con columnas del mismo tama\u00f1o es tan simple como a\u00f1adir una clase de .column al elemento HTML, no tendremos que preocuparnos por cada tama\u00f1o de pantalla\u00a0 (chica, mediana o grande).<\/p>\n<p>Lo mas interesante es que puedes ajustar las columnas para obtener diferentes tama\u00f1os a\u00f1adiendo la clase apropiada , por ejemplo.<strong> is-four-fifths,\u00a0is-two-fifths,\u00a0is-half\u00a0<\/strong> etc.<\/p>\n<p>Bulma se enfoca al m\u00f3vil, lo que hace que cada elemento est\u00e9 optimizado para acomodarse de forma vertical sin utilizar clases extras como col-xs-12 (ups bootstrap).<\/p>\n<p><a href=\"http:\/\/maquetando.com\/wp-content\/uploads\/2018\/01\/bulma_1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1267\" src=\"http:\/\/maquetando.com\/wp-content\/uploads\/2018\/01\/bulma_1.jpg\" alt=\"\" width=\"800\" height=\"483\" srcset=\"https:\/\/orpot.com\/blog\/wp-content\/uploads\/2018\/01\/bulma_1.jpg 800w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2018\/01\/bulma_1-600x362.jpg 600w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2018\/01\/bulma_1-300x181.jpg 300w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2018\/01\/bulma_1-768x464.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<h3>Modularidad<\/h3>\n<p>Pesa 21 kB si lo comprimimos. Todav\u00eda no est\u00e1 mal, pero para hacerlo mejor puedes importar s\u00f3lo los m\u00f3dulos que quieras.<\/p>\n<p>Los bundles se pueden crear con SASS y est\u00e1n divididos en\u00a0 39 archivos. sass parciales. Todos se pueden\u00a0 importar por separado, reutilizar\u00a0 \u00a0estilos SASS y tener acceso a aquellos componentes que s\u00f3lo se necesitan.<\/p>\n<p>En Bulma, la capacidad de personalizaci\u00f3n es simplemente fant\u00e1stica. El c\u00f3digo dividido en archivos separados a trav\u00e9s de\u00a0 componentes, junto con archivos de variables separadas nos permite personalizar casi cada parte de la aplicaci\u00f3n y lograr el resultado que queremos.<\/p>\n<h3>Formularios<\/h3>\n<p>Cuando elijo un framework CSS, lo primero que miro (despu\u00e9s de la personalizaci\u00f3n y el mantenimiento) son los estilos para formularios.<\/p>\n<p>En lo que respecta a los estilos para formularios, soy un tradicionalista &#8211; prefiero las entradas nativas de navegador que utilizar algun plugin JavaScript.<\/p>\n<p>En Bulma tenemos acceso a estilos para todos los elementos de la forma nativa, incluyendo\u00a0 estados de inputs como error, success, warning etc\u00a0 ademas de una\u00a0 variedad de hermosos botones y\u00a0 estilos para incluir iconos dentro de nuestros inputs.<\/p>\n<p>Bulma no requiere crear nuevos\u00a0 elementos adicionales en el DOM .<\/p>\n<p><a href=\"http:\/\/maquetando.com\/wp-content\/uploads\/2018\/01\/bulma_2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1269\" src=\"http:\/\/maquetando.com\/wp-content\/uploads\/2018\/01\/bulma_2.jpg\" alt=\"\" width=\"900\" height=\"479\" srcset=\"https:\/\/orpot.com\/blog\/wp-content\/uploads\/2018\/01\/bulma_2.jpg 1352w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2018\/01\/bulma_2-600x320.jpg 600w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2018\/01\/bulma_2-300x160.jpg 300w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2018\/01\/bulma_2-768x409.jpg 768w, https:\/\/orpot.com\/blog\/wp-content\/uploads\/2018\/01\/bulma_2-1024x545.jpg 1024w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<h3>Componentes<\/h3>\n<p>Bulma viene con muchos componentes adicionales, haciendo nuestras vidas m\u00e1s f\u00e1ciles y los sitios web que creamos son a\u00fan m\u00e1s atractivos. Vale la pena mencionar los \u00abTiles\u00bb\u00a0 para crear una grid con elementos de diferentes tamapos que se ajustaran sin recurrir a plugins como masonry u otra tecnica JS.<\/p>\n<p>Tambi\u00e9n me gust\u00f3 mucho el componente Level, que hace que la alineaci\u00f3n horizontal sea super-f\u00e1cil y Hero que permite la creaci\u00f3n sin problemas de banners.<\/p>\n<p>En resumen, Bulma es un gran framework CSS , con muchas caracter\u00edsticas y componentes integrados que podemos reutilizar y personalizar f\u00e1cilmente.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/MchBPICewgs\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Todav\u00eda est\u00e1 en desarrollo, es realmente estable,\u00a0 maduro y podr\u00eda ganar muchos adeptos este 2018.<\/p>\n<p>Enlace : BulmaCSS<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En el mundo dominado por Bootstrap,\u00a0 Semantic UI\u00a0 y\u00a0 Foundation, es dif\u00edcil que surjan alternativas&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1263,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,144,30,105],"tags":[38],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1261"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=1261"}],"version-history":[{"count":7,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1261\/revisions"}],"predecessor-version":[{"id":1268,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1261\/revisions\/1268"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media\/1263"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=1261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=1261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=1261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}