Boardz.css Examples
Create Pinterest-like boards with pure CSS, in less than 1kB.
Default Boardz
The default view of the Boardz.
-
Ex Nostrud
Lorem ipsum dolor sit amet, et primis ornatus usu, eum ei graeci regione adipiscing. Eu primis nominavi ius, case facete eum at. In per summo sanctus, mea at tamquam nostrud luptatum, alienum convenire per te. Ei vel diceret complectitur. His choro accusam gubergren et. Cu tale saperet sed. Impetus accusata assentior id vel, tantas admodum mel ad. Sed eruditi sanctus fabellas cu, quas alienum sea ea. Cu vero munere disputationi sed, eruditi offendit his ne. Pri ad dolores laboramus.Vix ut affert civibus petentium, has clita dolorum id, an ius odio alia. An mel elitr scaevola adversarium, nibh dissentias inciderint nec ea. Purto integre ex his. Dolor nonumy docendi ad duo. -
Audire Integre
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
-
Eruditi
Lorem ipsum dolor sit amet, te ius feugait persecuti, eirmod tritani ad pro. Copiosae expetendis per no. Nec no enim solum inermis. Minim insolens instructior ne ius, nulla eruditi eam no. Et quo aeterno persecuti disputando, adhuc accusam sea no, an brute justo debitis quo. At eos ipsum putent. -
Constituam Adversarium
* Cu simul oratio indoctum nam, cu offendit moderatius mel. Sea eu euismod consulatu, usu cu audiam perpetua, viris philosophia vis et. Cu sit tibique intellegam, error ludus scripta pri et. His congue aliquam iracundia ei. Has idque fastidii id, mucius erroribus vel ad. Ut posse albucius periculis his, duo an dicunt nostrud deleniti. Modo affert expetenda per ne. Et dolore platonem appellantur cum. Constituam adversarium in sit, mea ne porro vitae, eu pri modus dicam quaeque. At nibh brute sonet sea. Mei simul disputando eu, id vis esse explicari dissentiet, ei agam volutpat usu. Ex vis tollit mollis oportere, mei probatus qualisque te. Mei labore voluptaria ex, mei graeci feugiat definiebas eu. -
Fastidii Electram
Vel adipisci suscipiantur te, nam ullum perfecto ut. Vitae contentiones id sed. Est vitae ponderum facilisis in. Quo illud eligendi similique et, odio detraxit pertinacia ea vix.
-
Mea Ludico
Cetero perpetua ius at, et feugait nostrum sit, mea ne quaeque fastidii electram. Delenit torquatos adipiscing vix ex. Viris tamquam postulant ei mel, ea singulis corrumpit democritum vim. No fierent salutatus vel, in persecuti vituperata eos, at nusquam perpetua hendrerit est. Ne pri odio option nusquam, sed natum admodum eleifend at. Sea putant malorum scripserit ut, ei duo prima eleifend, ea mea agam diceret inciderint. -
Impetus Accusata
Vis omnium saperet ex. Wisi qualisque corrumpit eu vel, usu in vero inimicus mnesarchum. Eruditi vivendum usu at, elaboraret inciderint pri cu. Ius enim zril ad, zril timeam consulatu ex cum. -
Viderer Voluptua
Vis omnium saperet ex. Wisi qualisque corrumpit eu vel, usu in vero inimicus mnesarchum. Eruditi vivendum usu at, elaboraret inciderint pri cu. Ius enim zril ad, zril timeam consulatu ex cum.
-
Morbiso
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. -
Sumo Summo
Ex nostrud verterem mea, duo no delicata neglegentur. Audire integre rationibus ut pri, ex cibo oblique euismod sit, cibo iracundia vix at. Legimus torquatos definiebas an nec, mazim postulant at sit. Ne qui quando vocent accusata, nam tritani fierent no. Ea per vocent voluptatibus. Animal petentium patrioque id eos, et vis delenit reprimique. Vix clita essent expetenda et, duo in soleat graeci complectitur. Sit lorem vitae iudicabit in, malorum discere ne ius. Est eu adhuc blandit, ne copiosae placerat persequeris vim. -
Parabou Tras
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. -
Vix Clita
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
Fitted Boardz
Stretched version of the example above. By just adding the class fitted to the div
of the Boardz element, such as <div class="boardz fitted">, the Boardz object justifies the columns vertically,
making the whole board looking more like a rectangle.
-
Ex Nostrud
Lorem ipsum dolor sit amet, et primis ornatus usu, eum ei graeci regione adipiscing. Eu primis nominavi ius, case facete eum at. In per summo sanctus, mea at tamquam nostrud luptatum, alienum convenire per te. Ei vel diceret complectitur. His choro accusam gubergren et. Cu tale saperet sed. Impetus accusata assentior id vel, tantas admodum mel ad. Sed eruditi sanctus fabellas cu, quas alienum sea ea. Cu vero munere disputationi sed, eruditi offendit his ne. Pri ad dolores laboramus.Vix ut affert civibus petentium, has clita dolorum id, an ius odio alia. An mel elitr scaevola adversarium, nibh dissentias inciderint nec ea. Purto integre ex his. Dolor nonumy docendi ad duo. -
Audire Integre
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
-
Eruditi
Lorem ipsum dolor sit amet, te ius feugait persecuti, eirmod tritani ad pro. Copiosae expetendis per no. Nec no enim solum inermis. Minim insolens instructior ne ius, nulla eruditi eam no. Et quo aeterno persecuti disputando, adhuc accusam sea no, an brute justo debitis quo. At eos ipsum putent. -
Constituam Adversarium
* Cu simul oratio indoctum nam, cu offendit moderatius mel. Sea eu euismod consulatu, usu cu audiam perpetua, viris philosophia vis et. Cu sit tibique intellegam, error ludus scripta pri et. His congue aliquam iracundia ei. Has idque fastidii id, mucius erroribus vel ad. Ut posse albucius periculis his, duo an dicunt nostrud deleniti. Modo affert expetenda per ne. Et dolore platonem appellantur cum. Constituam adversarium in sit, mea ne porro vitae, eu pri modus dicam quaeque. At nibh brute sonet sea. Mei simul disputando eu, id vis esse explicari dissentiet, ei agam volutpat usu. Ex vis tollit mollis oportere, mei probatus qualisque te. Mei labore voluptaria ex, mei graeci feugiat definiebas eu. -
Fastidii Electram
Vel adipisci suscipiantur te, nam ullum perfecto ut. Vitae contentiones id sed. Est vitae ponderum facilisis in. Quo illud eligendi similique et, odio detraxit pertinacia ea vix.
-
Mea Ludico
Cetero perpetua ius at, et feugait nostrum sit, mea ne quaeque fastidii electram. Delenit torquatos adipiscing vix ex. Viris tamquam postulant ei mel, ea singulis corrumpit democritum vim. No fierent salutatus vel, in persecuti vituperata eos, at nusquam perpetua hendrerit est. Ne pri odio option nusquam, sed natum admodum eleifend at. Sea putant malorum scripserit ut, ei duo prima eleifend, ea mea agam diceret inciderint. -
Impetus Accusata
Vis omnium saperet ex. Wisi qualisque corrumpit eu vel, usu in vero inimicus mnesarchum. Eruditi vivendum usu at, elaboraret inciderint pri cu. Ius enim zril ad, zril timeam consulatu ex cum. -
Viderer Voluptua
Vis omnium saperet ex. Wisi qualisque corrumpit eu vel, usu in vero inimicus mnesarchum. Eruditi vivendum usu at, elaboraret inciderint pri cu. Ius enim zril ad, zril timeam consulatu ex cum.
-
Morbiso
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. -
Sumo Summo
Ex nostrud verterem mea, duo no delicata neglegentur. Audire integre rationibus ut pri, ex cibo oblique euismod sit, cibo iracundia vix at. Legimus torquatos definiebas an nec, mazim postulant at sit. Ne qui quando vocent accusata, nam tritani fierent no. Ea per vocent voluptatibus. Animal petentium patrioque id eos, et vis delenit reprimique. Vix clita essent expetenda et, duo in soleat graeci complectitur. Sit lorem vitae iudicabit in, malorum discere ne ius. Est eu adhuc blandit, ne copiosae placerat persequeris vim. -
Parabou Tras
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. -
Vix Clita
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
Image Boardz
Boardz can be used with images as well. Below is an example Boardz that mixes image and text cells.
Beautiful Boardz
Boardz is highly customizable. In order to demonstrate this, a simple `beautiful` mode is included in the library.
By just adding the class beautiful to the main Boardz wrapper, e.g. <div class="boardz beautiful">,
the following board can be achieved.