The objective of the OK-SDK project is to explore web pages as a means to rebuild displays seen on the show. On this and the following pages instances of building blocks are introduced. Starting with the most basic ones and then moving on, from simple span and block content to complex layouts that include many different elements at once.
Before showing much of any recognizable elements or layouts, this page illustrates and tests the most basic content parts, the text phrases and special elements that make up a web page. Some or all of these will make the body of the diagrams, and the intention is to investigate each of their appearances.
A page must be able to include and layout text obviously. Such body starts in some corner, and flows horizontally or vertically until the characters fill one line. A margin is observed (also including "padding"), the line "breaks" and the "page" extends in one direction while new lines of characters are added. Rows or columns of them. Aligned and/or justified along each of them in their flow direction. And aligned to a baseline perpendicular to their flow direction.
A diagram is layed out quite differently, and web pages too have evolved text layouts significantly. A modern web page can be hardly recognizable as a linear document, and can lay an enourmous emphasis on graphical layout versus literal content. Such layouts used to be hard to achieve but have become increasingly more flexible and expressive. Nowadays the layout model for text content described above is completely generalized and available as the "Flexbox" model. And for making tabular layouts there is the "Grid" model, that should be very helpful in (re)creating our diagrams.
But first, web pages have their own particular elements and rules. This page will list all of the inline elements. How important those are depends on the writer and the purpose of the document. However within the context of a web page the hyperlink holds a special place. And aside from hypertext, this way we also meet our first piece of "chrome": the button element. This presents us with a design decision: does the button correspond the text height; and is the button label therefor necessarily of a smaller size. Or does instead the button label correspond to (the normal/"regular") text size, and does its padding and margin extend above and below the text.
As seen from the instances on this page, inline bars and buttons are a bit too small for touch interfaces. Larger sizes and more chrome would be needed to operate them without assistive devices, like a stylus or keyboard.
The button element is styled like the button and bar classes. On the next page the sizes of this element are explored. The rest of this page deals with some further testing of the JSON document structure, and examples of all inline and some block elements. More block elements, in particular tables are to be added in a later version. The rest of this page is filler text, including the introduction of the Lorem Ipsum paragraph directive.
Spans of text can be split up, and mixed with other elements. Such as markup. Or hyperlinks. Or even bars or buttons. Using the ok-sdk-bar directive has the same effect as using elements and classes directly such as the two labels before. Using a directive may be more convenient as a shortcut.
Laboris deserunt do officia ea cupidatat quis. Velit nisi incididunt voluptate laborum veniam pariatur elit incididunt dolore enim elit esse minim. Minim anim aute amet quis pariatur et. Pariatur laboris cillum id eu aliquip consectetur officia. Eiusmod sint consectetur sint ea deserunt ullamco proident minim ullamco id elit. Nisi laboris enim amet consequat excepteur commodo sint est.
Commodo commodo culpa laboris officia irure pariatur incididunt. Enim minim occaecat aliqua cupidatat commodo eu nostrud anim elit fugiat ipsum sunt. Id do ad dolore ut consequat eiusmod eu. Nisi fugiat dolore et adipisicing dolor pariatur veniam amet commodo officia. Incididunt reprehenderit aute ipsum labore eiusmod et. Cillum cillum quis nulla enim eiusmod enim occaecat qui sit eiusmod. Dolore voluptate nulla quis duis nulla occaecat et cillum amet amet. Tempor ut ea sunt eiusmod excepteur anim. Do occaecat deserunt anim consectetur occaecat reprehenderit.
Do Lorem sint aute dolore et ad eiusmod exercitation laboris enim aliquip laboris nulla incididunt eu. Excepteur sunt sint aliquip ad sunt Lorem fugiat ad esse do. Occaecat Lorem eiusmod Lorem sit elit sit ullamco ea velit aute ex velit mollit proident. Reprehenderit adipisicing Lorem ullamco in nostrud pariatur ea exercitation duis. Excepteur eu esse veniam nulla amet aliquip veniam irure sint mollit nostrud. Do et fugiat sint ad tempor ullamco velit cupidatat occaecat ullamco id. Incididunt deserunt duis aliquip proident reprehenderit eu reprehenderit esse. Eu sunt est ut irure excepteur in consequat quis nostrud voluptate. Elit anim aliqua officia eu adipisicing qui deserunt incididunt laboris labore.
Labore do excepteur culpa Lorem tempor eiusmod pariatur cupidatat ex. Dolore sit minim duis fugiat labore ex exercitation laborum enim sint. Ipsum voluptate exercitation deserunt sunt eiusmod commodo occaecat laboris eiusmod anim do eu. Tempor ea do amet enim cupidatat adipisicing sunt dolor est nisi amet occaecat cupidatat duis. Sit amet aliqua excepteur cupidatat enim duis amet dolor.
Voluptate excepteur culpa proident ea consectetur occaecat sint non pariatur et. Lorem incididunt cillum ullamco ad voluptate esse exercitation mollit aute. Eu deserunt esse laboris velit nulla cupidatat ea ex dolore incididunt ut laboris proident. Eiusmod ullamco tempor quis do in cupidatat ullamco aliqua minim eu consequat. Culpa anim excepteur nisi adipisicing id esse in sunt sunt qui voluptate laboris. Eu aute labore aliquip deserunt labore veniam ad et ut labore cillum. Dolor fugiat Lorem sit proident in dolor amet.
Nulla irure ex esse qui velit voluptate. Magna ex irure veniam proident aliqua voluptate do amet exercitation. Occaecat dolor cillum anim id ex dolor excepteur velit Lorem sint incididunt. Enim cillum consectetur sit irure et commodo ex aliquip aliqua in elit nostrud exercitation culpa. Occaecat dolor irure proident laboris sunt deserunt sit id voluptate ad dolor ullamco sunt qui voluptate. Voluptate esse mollit exercitation aliquip enim id sunt. Aliqua adipisicing dolor labore excepteur ad aliqua irure. Id non cillum reprehenderit consectetur incididunt est commodo. Enim eiusmod irure sit est velit adipisicing labore.
Cupidatat ea in qui qui cupidatat aute laboris laborum aliqua exercitation non velit ad velit. Esse laboris tempor aute excepteur exercitation cupidatat non enim incididunt voluptate amet. Excepteur magna fugiat tempor ad exercitation ipsum Lorem exercitation deserunt ex velit excepteur cupidatat ad aliqua. Exercitation ex aliquip Lorem incididunt in ullamco irure officia excepteur. Officia duis cupidatat nostrud amet qui exercitation excepteur ullamco dolore sit deserunt amet adipisicing. Quis eiusmod excepteur non laboris occaecat fugiat. Enim sunt nostrud excepteur et aliquip fugiat excepteur sint cupidatat. Enim consequat fugiat deserunt reprehenderit elit culpa pariatur dolore pariatur aliqua. Duis enim aute anim laborum nostrud laboris voluptate minim enim eiusmod ullamco anim dolor deserunt aute. Amet irure sit nisi deserunt voluptate est dolore anim velit. Nulla esse velit eu adipisicing in veniam cillum officia cillum nostrud nulla.
Level four corresponds to regular font size.
Id tempor eiusmod aliquip consequat exercitation voluptate sint eiusmod eu amet. Laboris excepteur mollit duis occaecat amet id irure. Consectetur ut ex nulla minim ea nostrud. Fugiat anim cillum ut fugiat velit irure tempor occaecat nostrud voluptate exercitation. Sint dolore aute aliqua nostrud velit ex eu ipsum sit velit consectetur duis ex esse nulla. Consectetur deserunt et tempor proident dolore labore velit. Eiusmod ea deserunt proident aliqua aliqua laboris proident mollit laborum sit. Laborum ex duis in enim veniam ad ad veniam cupidatat eiusmod veniam. Enim aute labore dolore nisi amet ea Lorem est esse incididunt. Laboris adipisicing quis eiusmod reprehenderit ullamco proident officia Lorem id ad dolore enim reprehenderit dolore. Pariatur consequat consectetur dolor ut magna consequat laboris sunt ipsum.
These paragraphs are intentionally in regular case.
Quis dolor est anim officia deserunt labore veniam incididunt ut Lorem do aliqua. Reprehenderit officia occaecat dolore magna anim nostrud eu id reprehenderit officia aute do. Labore labore exercitation sunt dolore ipsum ad. Et ex aliqua ut non ullamco sit ullamco ipsum consectetur anim id qui tempor elit. Dolor veniam aute elit eu sit est sint ea enim qui ex laborum. Minim ut consequat incididunt sunt nulla commodo et cillum.
Anim et aliqua enim ut do Lorem ea nostrud reprehenderit consequat. Cupidatat reprehenderit commodo exercitation excepteur officia sit laboris excepteur irure. Et esse quis nostrud magna cillum excepteur. Officia quis adipisicing sit deserunt elit aliqua duis laborum labore consequat. Culpa ad voluptate sunt nostrud enim pariatur velit. Nostrud occaecat tempor dolore id qui dolore laborum veniam fugiat incididunt laboris labore ut. Qui id deserunt elit pariatur velit pariatur esse eu excepteur enim ad elit. Culpa voluptate duis deserunt eu consequat laboris cupidatat et do deserunt commodo cupidatat quis laborum occaecat. Cupidatat duis magna sunt elit deserunt sint labore ullamco.
Commodo est in occaecat eu magna in esse exercitation excepteur ipsum deserunt nulla ex incididunt. Sit consectetur occaecat incididunt aliquip officia consectetur ex dolore anim ea sint nostrud velit. Excepteur ipsum amet commodo mollit elit pariatur nisi nisi tempor eiusmod ipsum consectetur enim aute. Fugiat ullamco sint elit exercitation exercitation dolore fugiat velit incididunt nulla.
Labore voluptate fugiat aute veniam commodo nisi voluptate sit ea id reprehenderit. Est proident laboris ad quis aliqua cupidatat labore aliquip. Esse labore officia amet ipsum dolore ea deserunt. Non nostrud ea incididunt ullamco amet duis elit enim ea. Aliquip sint laborum incididunt duis minim voluptate incididunt duis sint. Fugiat cillum qui minim proident exercitation aute aliquip ullamco velit adipisicing culpa aute cupidatat minim. Mollit eiusmod eu tempor minim qui Lorem sunt elit veniam. Pariatur commodo aliqua ipsum et aliquip eiusmod tempor est sunt aliqua. Quis culpa minim elit minim non enim id consequat amet exercitation. Officia officia occaecat amet magna adipisicing nulla elit ut duis.
Aliqua nulla minim elit quis mollit cupidatat cillum elit. Anim eu consequat pariatur nostrud et ipsum nisi.
Fugiat anim officia voluptate fugiat tempor ex qui. Ut ullamco exercitation laboris consequat dolore dolore tempor. Laboris cillum est et et labore qui laborum. Sit ullamco nostrud irure aliqua commodo quis incididunt do irure ex incididunt aliquip. Minim voluptate in nostrud occaecat velit ipsum dolor ipsum dolor cillum non aliqua. Nisi eu ea reprehenderit culpa quis deserunt excepteur. Mollit sint ipsum commodo dolor enim id pariatur laborum nulla. Cupidatat ut non anim ex aliqua Lorem sint quis. Mollit officia irure velit occaecat laboris laborum eu veniam consequat.
Officia cillum anim ut ipsum Lorem dolor elit amet reprehenderit dolor magna laboris. Quis sit anim consectetur sint non fugiat et culpa anim eu exercitation ipsum ad aliqua commodo. Proident anim Lorem quis nisi magna quis commodo. Voluptate nostrud pariatur cillum aute nostrud mollit sit.
Deserunt officia ullamco aute nisi pariatur id eiusmod voluptate. Proident sint velit minim aute laborum est qui proident minim id voluptate mollit. Irure ullamco sint ex dolor exercitation in esse aliqua eu velit eu est Lorem consectetur. Id laboris elit et nulla ut fugiat voluptate velit qui laboris pariatur. Consequat sunt esse est magna ea nostrud. Deserunt proident sunt non quis voluptate et cillum enim laboris mollit sint est consequat qui consectetur.
Elit in proident incididunt anim ipsum laboris sunt commodo anim eiusmod minim exercitation. Esse cupidatat excepteur sint esse enim laborum consequat est ex officia velit. Dolor aute mollit consequat eu laborum sunt. Nostrud reprehenderit non quis quis eiusmod anim exercitation dolor non. Fugiat commodo cillum laboris quis veniam do aliqua do qui officia labore voluptate do est.
Cillum enim elit irure nostrud amet ea ea irure anim. Consectetur irure aliquip aliqua nostrud eiusmod exercitation nulla. Labore eiusmod amet laborum irure irure velit qui sunt ipsum. Occaecat culpa quis dolor duis consequat laboris nulla mollit sint qui occaecat enim do. Ex irure aliquip labore incididunt commodo ex eu do labore magna.
Occaecat sint veniam pariatur sint aute reprehenderit aute cupidatat culpa anim eiusmod enim nisi sunt. Sit qui ullamco aliqua tempor ullamco nisi nostrud. Magna sunt non occaecat consectetur aliqua enim velit reprehenderit dolore irure non mollit ullamco. Amet dolore id quis elit nostrud incididunt pariatur et culpa nulla minim. Ullamco quis id deserunt excepteur qui ullamco est officia ullamco magna nostrud consectetur do est. Non pariatur voluptate laboris dolore nostrud sit aliquip occaecat ad.
These elements are intentionally in regular case.
Example 'abbr' text. Example 'acronym' text. Example 'big' text. Example 'cite' text. Example 'code' text. Example 'del' text. Example 'dfn' text. Example 'em' text. Example 'ins' text. Example 'kbd' text. Example 'q' text.
Example 's' text. Example 'samp' text. Example 'small' text. Example 'strike' text. Example 'strong' text. Example 'sub' text. Example 'sup' text. Example 'tt' text. Example 'var' text. Example 'b' text. Example 'u' text. Example 'i' text.
Form input element,
The quick fox jumps over the lazy brown dog
The quick fox jumps over the lazy brown dog
The quick fox jumps over the lazy brown dog
The quick fox jumps over the lazy brown dog.
Nostrud ex sunt sint ea cupidatat aliqua. Ea labore aliquip laborum ullamco do minim nostrud aliquip est dolor proident eiusmod eiusmod. Minim ullamco mollit pariatur eiusmod laboris minim occaecat fugiat ea ut qui velit veniam. Amet dolore consequat amet culpa laboris dolore pariatur officia. Commodo consectetur velit aute adipisicing consequat anim consequat dolore minim labore dolor officia reprehenderit minim. Reprehenderit eiusmod reprehenderit aliqua aliqua aliquip veniam culpa reprehenderit. Do Lorem sint velit qui adipisicing non sint aliquip. Sunt veniam do dolore veniam consectetur Lorem et consequat duis sit veniam cillum laboris. Occaecat qui est mollit amet reprehenderit eiusmod voluptate aute sint anim. Non dolor laborum consectetur duis consequat veniam non occaecat voluptate. Qui esse aliqua aute nisi enim laboris magna velit dolor excepteur laboris.
Proident amet ad aliqua ut cupidatat dolor ad sunt consequat cillum cupidatat nostrud culpa pariatur. Consectetur aliqua pariatur pariatur ut proident nisi adipisicing magna. Nostrud aliqua in commodo ut commodo anim quis velit do velit ullamco. Sunt esse reprehenderit incididunt Lorem amet commodo nisi veniam consectetur ut laborum officia commodo nisi eiusmod. Elit reprehenderit fugiat nulla ipsum id esse officia pariatur labore exercitation pariatur deserunt eiusmod minim anim. Culpa et adipisicing sunt irure do duis ad quis cupidatat ullamco cillum incididunt proident tempor.
Dolore laboris fugiat est excepteur veniam exercitation. Aliqua dolor duis mollit consectetur cupidatat consequat ad culpa mollit enim. Non minim deserunt amet commodo elit Lorem consequat sit sunt velit eiusmod. Eiusmod anim fugiat id ullamco culpa dolor mollit fugiat voluptate. Fugiat qui esse irure ut in dolore laborum voluptate minim anim fugiat dolore officia consequat nulla. Cillum qui anim fugiat incididunt do velit laborum culpa ad nostrud tempor occaecat sunt. Eu pariatur laborum tempor dolore aliquip excepteur irure eu deserunt laboris labore. Qui sint enim dolore id dolor fugiat pariatur cupidatat sit ad. Elit adipisicing occaecat sit excepteur dolore velit exercitation deserunt incididunt commodo ipsum enim. Laborum eu ad dolor velit ea enim fugiat ipsum cillum excepteur commodo amet ullamco.
Pariatur officia aliquip ea aliqua qui elit nulla eiusmod in laborum eiusmod. Cupidatat in sunt duis cupidatat minim aliqua aliquip officia tempor in aliqua. Deserunt excepteur tempor occaecat voluptate fugiat non anim deserunt qui. Elit ut officia deserunt id enim pariatur eiusmod non Lorem voluptate. Consequat velit tempor laborum amet mollit aliqua ipsum qui. Id fugiat culpa magna ad do magna ipsum ut sit mollit voluptate officia. Esse dolor magna in cupidatat cupidatat est veniam esse anim ut sunt. Excepteur fugiat velit exercitation velit incididunt consectetur velit adipisicing enim magna. Quis adipisicing elit velit velit est nostrud velit minim laborum. Id officia cillum fugiat tempor nulla deserunt aliquip irure voluptate laborum aute nostrud.
Et sint non exercitation nisi est amet ea id nostrud cillum elit cupidatat qui deserunt pariatur. Officia occaecat voluptate eu sunt eu in. Sit nostrud tempor excepteur consequat ad do ipsum sunt dolor adipisicing nisi velit nulla. Ad esse occaecat reprehenderit occaecat velit ut qui magna id adipisicing ad. Incididunt cillum duis ad incididunt fugiat laboris sit laborum excepteur excepteur. Amet sit qui consectetur laboris nostrud sit magna in pariatur nulla qui.
Cupidatat culpa est enim do culpa in esse ipsum qui amet. Dolor exercitation consequat amet aute dolor eiusmod. Cupidatat voluptate proident velit ut deserunt adipisicing laborum aute eiusmod eiusmod laborum laboris in. Consequat dolore ea laborum ad minim pariatur ut do Lorem proident. Consectetur fugiat aliquip minim ipsum exercitation fugiat fugiat nisi ad commodo cupidatat eu Lorem.
Sunt voluptate excepteur nulla sit cillum in culpa esse magna culpa. Sit enim adipisicing excepteur cupidatat officia aliquip aute ut elit laborum occaecat. Sit amet ex esse voluptate nulla commodo dolore velit amet culpa duis do ipsum. Incididunt nostrud minim eiusmod culpa adipisicing non sint pariatur labore. Officia mollit magna cupidatat esse occaecat sit consequat. Consequat enim eiusmod minim qui id voluptate occaecat fugiat magna. Tempor ullamco dolore ea ea labore labore aliqua velit cupidatat commodo elit voluptate exercitation. Non quis ipsum reprehenderit excepteur eiusmod nulla quis commodo duis veniam pariatur sit. Ipsum est est tempor incididunt eu cupidatat consequat nulla sit ullamco. Cupidatat dolor nisi cupidatat ex et irure amet voluptate ex laboris fugiat aute mollit ex cillum. Labore dolore anim exercitation fugiat reprehenderit eu laborum voluptate aute ullamco mollit.
Amet laborum incididunt irure laboris enim ipsum amet cupidatat exercitation magna et. Aliquip amet cillum velit proident ut aliquip elit duis amet elit nisi fugiat ipsum. Elit laboris commodo commodo in eu exercitation voluptate pariatur occaecat elit occaecat excepteur. Amet consequat ex est ex non est. Irure reprehenderit nulla fugiat ut consectetur ipsum magna dolor quis. Cupidatat culpa officia exercitation nisi irure in proident proident cupidatat aliquip irure ullamco. Reprehenderit sunt culpa esse aliqua elit non magna cupidatat in veniam qui aute officia ullamco.
In irure mollit ut aliquip sunt minim ipsum minim sunt laboris sunt veniam ea commodo. Aliqua ea quis cillum elit irure veniam ex. Et mollit ea amet do deserunt tempor consequat. Id anim reprehenderit quis fugiat adipisicing id Lorem anim officia proident irure qui sint anim voluptate.
These are 4+6 additional font sizes (smaller+larger), besides the regular size.
Regular text size. Smaller text size. Even smaller text size. Even smaller (2) text size. Even smaller (3) text size.
Regular text size. Larger text size. Even larger text size. Even larger (2) text size. Even larger (3) text size. Even larger (4) text size. Even larger (5) text size.
[1]HTML Inline elements at MDN web docs