| white #ffffff rgb(255, 255, 255) |
lightgray #f5f5f5 rgb(245, 245, 245) |
gray #c6c6c6 rgb(165, 165, 165) |
darkgray #9b9b9b rgb(115, 115, 115) |
black #3f3f3f rgb( 60, 60, 60) |
Everything there is responsive and flexible and griidy. But with great responsiveness comes great responsibility. This is what Ingrid, Moresette and Bugsy are all about. Or: a responsive, column based, mobile last, mobile aware, CSS3, rem measured, elastic, typographic, touch enabled, grid system, CSS reset, HTML5 framework, Javascript framework with common web components.
Based on Mydevice.io, Viewport Sizes and Device Metrics.
The minimum set of external Javascript libraries depedencies.
| Percentages | 5% | 10% | 12.5% | 16.6% | 20% | 25% | 33.3% | 50% | 100% |
|---|---|---|---|---|---|---|---|---|---|
| 100ths | 5 | 10 | 12.5 | 16.6 | 20 | 25 | 33.3 | 50 | 100 |
| Fractions | 1/20 | 1/10 | 1/8 | 1/6 | 1/5 | 1/4 | 1/3 | 1/2 | 1 |
| CSS classes | .column-5 .column-1-20 |
.column-10 .column-1-10 .column-2-20 |
.column-12 .column-1-8 |
.column-17 .column-1-6 |
.column-20 .column-2-10 .column-1-5 |
.column-25 .column-5-20 .column-2-8 .column-1-4 |
.column-33 .column-2-6 .column-1-3 |
.column-50 .column-10-20 .column-5-10 .column-4-8 .column-3-6 .column-2-4 .column-1-2 |
.column-100 |
10
1/10
10
1/10
10
1/10
10
1/10
10
1/10
10
1/10
10
1/10
10
1/10
10
1/10
10
1/10
12.5
1/8
12.5
1/8
12.5
1/8
12.5
1/8
12.5
1/8
12.5
1/8
12.5
1/8
12.5
1/8
15
15
15
15
15
15
10
16.6
1/6
16.6
1/6
16.6
1/6
16.6
1/6
16.6
1/6
16.6
1/6
20
1/5
2/10
20
1/5
2/10
20
1/5
2/10
20
1/5
2/10
20
1/5
2/10
25
1/4
2/8
25
1/4
2/8
25
1/4
2/8
25
1/4
2/8
30
3/10
30
3/10
30
3/10
10
1/10
33.3
1/3
2/6
33.3
1/3
2/6
33.3
1/3
2/6
35
35
30
37.5
3/8
37.5
3/8
25
2/8
40
2/5
4/10
40
2/5
4/10
20
1/5
2/10
45
45
10
50
1/2
2/4
3/6
4/8
5/10
50
1/2
2/4
3/6
4/8
5/10
55
45
60
6/10
40
4/10
62.5
5/8
37.5
3/8
65
35
66.6
2/3
4/6
33.3
1/3
2/6
70
7/10
30
3/10
75
3/4
6/8
25
1/4
2/8
80
4/5
8/10
20
1/5
2/10
83.3
5/6
16.6
1/6
90
9/10
10
1/10
100
generic inline element
25 inline
25 inline
block
Floated
floated
floated
floated
floated
This is the container
Floated
floated
floated
75 center
50 center
25 center
40 left
40 right
33.3 left
33.3 right
16.6 left
16.6 right
element 1 block large-hidden desktop-block laptop-hidden tablet-block mobile-hidden
element 1 block/hidden
element 2 hidden large-block desktop-hidden laptop-block tablet-hidden mobile-block
20 margin-40
33.3 margin-33.3
50 margin-25
66.6 margin-16.6
75 margin-12
90 margin-5
25
25 margin-25
25 margin-25
25 margin-25
25
25 margin-25
25 margin-25
25 margin-25
20
20 margin-20
20 margin-20
20 margin-20
20 margin-20
20
20 margin-20
20 margin-20
20 margin-20
20 margin-20
12.5 margin-12.5
12.5 margin-12.5
12.5 margin-12.5
12.5 margin-12.5
12.5 margin-12.5
12.5 margin-12.5
12.5 margin-12.5
12.5 margin-12.5
12.5 margin-12.5
12.5 margin-12.5
12.5 margin-12.5
12.5 margin-12.5
12.5 margin-12.5
12.5 margin-12.5
12.5 margin-12.5
12.5 margin-12.5
column
column
column
column
column
column
column
column
...
generic 30, tablet 100
...
...
...
generic 50, tablet 100
...
...
...
...
generic 20, tablet 100
...
...
generic 50, laptop 100
...
...
...
...
generic 30, laptop 50, tablet 100
...
...
...
generic 20, laptop 50, tablet 100
...
The basis of the grid, but gutters build up as columns are nested.
100
50
50
50
50
50
50
50
50
50
50
50
50
50
50
Nested columns can be wrapped in rows, so that gutters are undone.
100
50
50
50
50
50
50
50
50
50
50
50
50
50
50
Sweet for grid building, but no gutters means no breathing space.
100
50
50
50
50
50
50
Nice, but a container hell.
100
50
50
50
50
50
50
Elastic, responsive, can be enabled and disabled, has API.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum reprehenderit nesciunt quas facere sapiente fugiat maxime. Repellendus iure consectetur hic alias distinctio commodi quibusdam culpa dolor quam modi repellat at nulla saepe laboriosam aliquid exercitationem reiciendis quidem doloribus error cumque. Tempora dolore debitis ipsam aliquid perspiciatis sit assumenda porro dolorem quos ducimus vero nemo adipisci quibusdam reprehenderit impedit dolores a. Officia unde voluptates amet reiciendis dolor non facere modi quae?
This fancy paragraph has a bold first line. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum reprehenderit nesciunt quas facere sapiente fugiat maxime. Repellendus iure consectetur hic alias distinctio commodi quibusdam culpa dolor quam modi repellat at nulla saepe laboriosam aliquid exercitationem reiciendis quidem doloribus error cumque. Tempora dolore debitis ipsam aliquid perspiciatis sit assumenda porro dolorem quos ducimus vero nemo adipisci quibusdam reprehenderit impedit dolores a. Officia unde voluptates amet reiciendis dolor non facere modi quae?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos magni distinctio nostrum animi quidem magnam alias hic voluptatibus a at pariatur excepturi libero aut harum beatae architecto enim nam dolor officiis illum ad dolore quo voluptates dolorem nemo aspernatur recusandae maxime temporibus officia quibusdam deserunt et est accusamus obcaecati error labore sed eius impedit asperiores fuga nesciunt voluptas quaerat maiores molestias reprehenderit aliquam! Cupiditate veritatis in id praesentium a excepturi commodi earum soluta natus nihil vel quibusdam expedita laboriosam nulla sunt minima repellendus molestiae aliquam modi reiciendis eligendi neque ratione velit aspernatur deleniti error iusto enim officia fugiat beatae! Dolore!
This oldie paragraph has a big first letter. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea ipsam error ab at architecto aspernatur porro autem molestiae atque veritatis repellendus harum nostrum maiores quos voluptas dolorem accusamus sit fugiat aliquam iure pariatur voluptatem labore asperiores excepturi eius! Placeat inventore aspernatur accusantium praesentium earum et minus possimus unde ut dolorem facilis voluptatem repellat optio sed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto a earum molestiae culpa doloribus obcaecati commodi vel perspiciatis et praesentium.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo tenetur deleniti debitis modi nesciunt rem id iusto expedita sed vitae perferendis ipsa voluptates molestias sit autem. Repudiandae magnam esse accusamus sapiente quam eligendi optio animi perspiciatis magni exercitationem eum quas vitae sequi perferendis unde sit consequatur tenetur! Facere excepturi quia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam asperiores porro incidunt dolorum libero amet excepturi sequi minus nulla aut nam consectetur repellendus architecto in quas quo aliquid earum placeat illo quis eveniet accusamus fugiat delectus a autem natus tempora consequatur quisquam vel similique vero ratione quaerat quae dolore veritatis nisi voluptate omnis quod blanditiis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis dolorum delectus aspernatur porro officia praesentium maxime quis accusantium blanditiis ea omnis non vel vero harum necessitatibus et debitis totam sed assumenda animi sunt temporibus incidunt minus magnam at dolorem voluptatem. Sed officia rem veritatis eum laborum quasi eaque amet magni odit earum blanditiis nostrum sit necessitatibus nemo quos voluptas repellat.
Ut et purus aliquam leo sodales tristique. Quisque vitae blandit lorem, sed placerat risus. Duis placerat congue nisi, eget venenatis ipsum fringilla eget. Sed odio turpis, facilisis id mauris et, molestie viverra velit. Nam ac orci eget ligula commodo dapibus eget at urna. Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur veniam commodi blanditiis voluptatem odit maxime architecto rem nemo vero similique doloribus pariatur qui aut ipsum beatae deleniti incidunt in officiis explicabo expedita harum ullam asperiores dignissimos labore dolorum vitae illo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima obcaecati nobis iste eaque minus dolorem numquam odio quas impedit cum magni quod debitis corporis quam eos voluptatum optio! Quam velit saepe quo eos ducimus rerum quod enim tenetur! Incidunt sequi maxime labore voluptatum vitae atque consectetur facilis accusamus modi libero quam inventore doloribus ducimus consequuntur fugit beatae tempora fuga a eum facere commodi non mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error tempora perferendis voluptate consequuntur quo inventore dolore corporis aut ipsam aliquam harum velit sequi ea hic reiciendis excepturi voluptatibus corrupti odio officia temporibus cupiditate earum doloribus accusamus deserunt non nesciunt veritatis assumenda tenetur obcaecati amet magnam sit distinctio nemo nostrum ipsa.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia nulla voluptatem ipsum doloremque. Facere ipsum dolorem expedita eius mollitia reprehenderit sequi ipsam vero at ab voluptates alias atque natus. Nostrum quisquam reprehenderit perferendis illo natus totam iure culpa tempora laboriosam consectetur aut facilis voluptatem iste magnam distinctio quos ut cumque hic officiis recusandae nesciunt officia earum saepe delectus ducimus ipsum accusantium architecto pariatur neque unde? In error quibusdam sit repellendus.
Velit officiis voluptatum debitis blanditiis natus nihil quia nulla consequatur ea rerum doloribus sed vero dignissimos earum mollitia! Fuga assumenda qui error nam delectus similique ipsa hic quibusdam consequatur unde nobis velit vitae sequi ratione est reprehenderit eius consequuntur magni architecto cupiditate corporis quos harum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid nulla sed dolore. Quasi harum quos quibusdam qui voluptas quam fuga rem alias architecto itaque placeat voluptate cumque commodi reiciendis magni unde odio deleniti dignissimos corporis?
Hi, Johnathan,
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia nulla voluptatem ipsum doloremque. Facere ipsum dolorem expedita eius mollitia reprehenderit sequi ipsam vero at ab voluptates alias atque natus. Nostrum quisquam reprehenderit perferendis "illo natus totam iure" culpa tempora laboriosam consectetur aut facilis voluptatem iste magnam distinctio quos ut cumque hic officiis recusandae nesciunt pariatur neque unde? In error quibusdam sit repellendus.
O tempora o mores, consectetur adipisicing elit. Dicta qui perferendis iure ipsam facere atque tempora reprehenderit tenetur explicabo doloribus numquam inventore accusantium dolore ullam sit hic vel. Officia dolorem ab quod aperiam quasi pariatur vero porro quibusdam aliquid quo.
Peace & love,
Takis
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo tempora quod ea qui eaque deserunt in laudantium vitae dolores mollitia aperiam magnam architecto expedita illum impedit error laborum reprehenderit quia facere pariatur fugiat recusandae temporibus consequatur cum labore porro cupiditate itaque doloremque quasi ab? Possimus mollitia quos eos facere id!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita fugiat doloribus tempora omnis nostrum deleniti autem id non dignissimos soluta quaerat incidunt ab excepturi enim magni quae fuga ea dolorem reprehenderit aliquid repellendus quibusdam eos accusantium modi rerum. Consectetur excepturi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quam earum suscipit voluptatem asperiores rerum ducimus illum repudiandae doloribus exercitationem sapiente explicabo porro dolorem quia quo. Hic omnis recusandae ea porro tempore! Repellat eius repudiandae!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi architecto error inventore veniam voluptatibus consequatur deleniti fugit aspernatur doloremque porro aliquid facilis explicabo impedit dolorum necessitatibus animi quos blanditiis incidunt ut sapiente harum tenetur expedita tempore vitae soluta similique aliquam vel voluptates ullam quas repellat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil voluptates ratione quasi praesentium quas unde consequuntur dicta molestias blanditiis aut error iusto magni eveniet culpa beatae adipisci esse! Nisi neque beatae recusandae totam fugit ad incidunt ducimus enim quas pariatur.
— so said the Zaratustras
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsa similique! Quos rem minus quia dignissimos perspiciatis velit sit. Optio officiis quos veniam saepe officia eveniet accusantium eaque quisquam excepturi quibusdam! Soluta quis esse voluptates nihil recusandae nobis numquam excepturi voluptatibus voluptas dicta rerum ab accusantium minima vel cupiditate modi eligendi placeat optio veniam vero ut magni quasi. Dolorum provident.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil voluptates ratione quasi praesentium quas unde consequuntur dicta molestias blanditiis aut error iusto magni eveniet culpa beatae adipisci esse! Nisi neque beatae recusandae totam fugit ad incidunt ducimus enim quas pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum doloribus officia quas obcaecati quod incidunt maxime vero id necessitatibus dolores natus quaerat porro magnam fugiat velit rem officiis culpa.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae sint nemo voluptates reiciendis repellat minus quidem iure maiores. Sit vitae dolorem deleniti maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit iste sequi soluta itaque assumenda ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil voluptates ratione quasi praesentium quas unde consequuntur dicta molestias blanditiis aut error iusto magni eveniet culpa beatae adipisci esse! Nisi neque beatae recusandae totam fugit ad incidunt ducimus enim quas pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quasi cupiditate sint neque hic rem odit repudiandae natus quam exercitationem incidunt id minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ab in nulla rerum ea perferendis dolores doloribus quibusdam alias sint accusamus molestiae nesciunt itaque officia eos repellat libero sit esse aperiam inventore. Iste aliquid dolorem similique beatae magni maxime voluptatem amet hic fugit officia? Similique maxime consequatur molestias quaerat consequuntur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quod fugit sapiente atque iure mollitia accusantium doloribus nobis earum est esse ut dignissimos vel sit reiciendis obcaecati pariatur cumque. Dolore deserunt nemo optio ea sed consequatur dolorum aliquam ad quia quibusdam sapiente et earum doloribus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id delectus earum sed laudantium autem facere eveniet reiciendis quos laborum deserunt nulla nesciunt. Unde sit nihil aperiam repellat maxime ea eum quisquam et veniam consectetur molestiae recusandae dolores ab dignissimos quae nobis dolor sed nisi vitae consequatur ad cupiditate at saepe minima excepturi ipsa accusantium ipsum!
Left lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad velit autem similique sequi obcaecati reprehenderit! Ducimus pariatur consequatur magni deserunt possimus at tenetur aliquid eum libero ratione impedit quis aliquam alias voluptatem molestiae nam unde tempore autem. Quaerat repudiandae odio beatae animi ullam quo possimus hic harum dolorum iste dolor veritatis delectus nemo earum itaque consequatur placeat blanditiis ad sequi quis amet praesentium.
Center lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum dicta dolor voluptatibus animi modi recusandae cumque eaque odit et sequi. Sapiente laboriosam atque aperiam eligendi laudantium voluptates. Cupiditate reprehenderit asperiores illo nam autem quibusdam itaque numquam assumenda perspiciatis reiciendis hic accusantium alias eligendi. Impedit nihil vel itaque possimus dolorum in natus non soluta veritatis libero. Aut inventore cupiditate assumenda ratione provident excepturi!
Justify lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore animi esse iste sapiente doloribus iusto aliquid distinctio deleniti velit inventore quis minima perspiciatis! Ratione beatae porro autem dolor accusamus doloremque velit itaque repellat quisquam quia deleniti quo magni culpa exercitationem dolorem nisi repellat cumque temporibus. Esse perferendis!
Right lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem adipisci laboriosam eligendi fugit sapiente quae distinctio omnis suscipit illo nostrum rerum a nobis enim quaerat debitis. Reprehenderit eius laborum delectus quaerat dolorum quibusdam explicabo provident voluptas. Quas facere nostrum quae incidunt. Placeat necessitatibus officia sed magnam ipsa similique rem aut laboriosam illum cum nobis cumque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ipsa modi magni nam ducimus molestias. Magni, provident dicta culpa. Rem maiores, ut aut ab sapiente rerum debitis nesciunt qui nihil consectetur. Id error recusandae nemo distinctio expedita architecto nesciunt quibusdam, veritatis laudantium voluptatibus facilis, quos nulla omnis soluta, est hic deleniti ea excepturi beatae in? Animi, non error ipsam. Corporis.
^^^ This was it!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis illum ipsam vel eveniet laboriosam esse ad rem atque quia amet, quos provident ea nisi nam saepe nesciunt soluta nihil labore temporibus id! Temporibus voluptates iste amet totam sint provident magni blanditiis, repellendus ipsa sapiente, ipsam ullam nam voluptatum illo perspiciatis aperiam, qui quia ratione? Tenetur voluptatem architecto sunt, illum placeat error ipsam explicabo, fugit fuga quos.
^^^ This was it!
I am the a tag example.
I am the a tag example probably visited.
I am the b tag example.
I am the strong tag example.
I am the em tag example.
I am the i tag example.
I am the code tag example.
I am the del tag example.
I am the sub tag example.
I am the sup tag example.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur iusto obcaecati numquam minus labore delectus
quibusdam dolores quos itaque facilis similique doloremque corporis ab deserunt ut illum
totam ipsam quo natus officiis amet dignissimos iure quod maiores voluptate. Incidunt saepe
voluptatum quibusdam nam eaque nobis dolorum quam odio ea officia vel illum ex dolores neque dignissimos eligendi
ut doloremque fugiat impedit quia. Doloribus commodi rerum maxime laudantium. Temporibus beatae illo tempora
quod! Odit quisquam porro saepe cumque sapiente eos voluptatem enim necessitatibus quasi consectetur
numquam quos atque ea fugiat arimbaaa recusandae perspiciatis totam blanditiis
voluptate a aut hic laboriosam assumenda pariatur akouilat inamis rotinhe ll amicio rubiko.
/**
* Some comments here.
*/
package gr.nevma.cms.entities;
import java.util.*;
import javax.servlet.http.*;
public class Category extends WebEntity {
public Category () {
super();
}
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda exercitationem temporibus quo porro ducimus quis sed eaque ex. Vel ratione iusto eius incidunt molestiae accusamus labore error explicabo voluptatum nemo praesentium ipsa impedit ut.
Reprehenderit deserunt tempora ab in vel iure consequuntur totam velit magnam eaque numquam est ea qui ad debitis dolorem culpa nobis alias aliquid possimus quidem autem cumque deleniti voluptate voluptatem incidunt facere amet doloribus consectetur laborum.
Iste numquam necessitatibus quaerat eum culpa maxime enim tempora? A ipsum nam facilis quis velit aliquam tempora nemo expedita quae voluptatem quasi doloremque illo voluptate quas nisi minima eum consequuntur labore nostrum qui suscipit asperiores id commodi praesentium molestiae.
Column quarter
Column quarter
Column quarter
Column quarter
Column quarter
Column quarter
Column quarter
Column quarter
| Title1 | Title2 | Title3 | Title4 |
|---|---|---|---|
| Contents 11 | Contents 12 | Russia | 475 |
| Contents 21 | Contents 22 | Brazil | 845 |
| Contents 31 | Contents 32 | United States of America | 4234 |
| Contents 31 | Contents 32 | United kingdom | 234 |
| A general footah | |||
| Title1 | Title2 | Title3 | Title4 |
|---|---|---|---|
| Contents 11 | Contents 12 | Russia | 475 |
| Contents 21 | Contents 22 | Brazil | 845 |
| Contents 31 | Contents 32 | United States of America | 4234 |
| Contents 31 | Contents 32 | United kingdom | 234 |
| A general footah | |||
| Title1 | Title2 | Title3 | Title4 |
|---|---|---|---|
| Contents 11 | Contents 12 | Russia | 475 |
| Contents 21 | Contents 22 | Brazil | 845 |
| Contents 31 | Contents 32 | United States of America | 4234 |
| Contents 31 | Contents 32 | United kingdom | 234 |
| A general footah | |||
| Title1 | Title2 | Title3 | Title4 |
|---|---|---|---|
| Contents 11 | Contents 12 | Russia | 475 |
| Contents 21 | Contents 22 | Brazil | 845 |
| Contents 31 | Contents 32 | United States of America | 4234 |
| Contents 31 | Contents 32 | United kingdom | 234 |
| A general footah | |||
| Title1 | Title2 | Title3 | Title4 |
|---|---|---|---|
| Contents 11 | Contents 12 | Russia | 475 |
| Contents 21 | Contents 22 | Brazil | 845 |
| Contents 31 | Contents 32 | United States of America | 4234 |
| Contents 31 | Contents 32 | United kingdom | 234 |
| A general footah | |||
| Title1 | Title2 | Title3 | Title4 |
|---|---|---|---|
| Contents 11 | Contents 12 | Russia | 475 |
| Contents 21 | Contents 22 | Brazil | 845 |
| Contents 31 | Contents 32 | United States of America | 4234 |
| Contents 31 | Contents 32 | United kingdom | 234 |
| A general footah | |||
| Title1 | Title2 | Title3 | Title4 |
|---|---|---|---|
| Contents 11 | Contents 12 | Russia | 475 |
| Contents 21 | Contents 22 | Brazil | 845 |
| Contents 31 | Contents 32 | United States of America | 4234 |
| Contents 31 | Contents 32 | United kingdom | 234 |
| A general footah | |||