Baseline UI

Baseline UI is an, er, baseline framework for your web and mobile projects. It provides a number of basic and sensible defaults for a number of common elements. It does not try to be the entirety of your UI. You could also import other UI frameworks into your project as well with minimal collision.

Basic Elements

Baseline UI has a few basic text display components...

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph text...

This is some text with a link.

Pre text...

Code text...

A blockquote...

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Inline quotes and boxes...

Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Grid

Baseline UI will give you a nice standard modern responsive grid system...

100%
50%
50%
25%
25%
25%
25%
33%
33%
33%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%

Buttons

Baseline UI gives you a nice variety of default buttons both flat style...

Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text
Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text
Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text

and a more rounded gradient style...

Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text
Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text
Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text Button Text

Forms

Baseline UI will give you some decent lookin' forms...

Apples Oranges Peaches

Alerts

Alerts will provide a nice UI to give your website or application notifications...

This is an accepted alert box.
This is a warning alert box.
This is a cancel alert box.
This is an information alert box.

Modal Dialogs

Modal dialogs can be easily initialized in the following manner...

var modal = new Baseline.Components.Modal('#myModalSelector')

You will want to give the constructor a selector for your modal dialog. The dialog can then be called like so...

modal.show()

Show Modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut arcu non enim vehicula tempus quis aliquam eros. Nam egestas enim ut risus feugiat eget bibendum sem elementum. In eget leo eu ante porttitor facilisis. Praesent in placerat urna. Curabitur eu velit velit. Phasellus placerat mi vitae leo fringilla sed convallis dui varius. Maecenas ornare dui mattis lorem vestibulum interdum. Pellentesque malesuada faucibus purus in vestibulum. Phasellus tempus, augue nec luctus euismod, turpis dolor viverra mauris, ut dignissim sem nulla ac ligula. Sed risus dolor, consequat et euismod non, interdum quis ante. Suspendisse eget purus vitae sapien pharetra luctus vitae quis sapien. Etiam quis sagittis lacus. Nunc aliquam pretium erat, in rhoncus elit ultrices ut. Vestibulum in lorem velit. Duis vitae est ut augue aliquam dapibus. Curabitur sem nulla, placerat quis egestas vitae, scelerisque et ligula.

Donec pellentesque arcu convallis sapien bibendum vitae egestas ante tincidunt. Nunc libero ligula, tempor vitae euismod a, consectetur a nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida mollis mollis. Suspendisse gravida pretium arcu at volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum egestas ipsum, vitae cursus sapien egestas quis. Phasellus vitae nisl at nibh rutrum varius. Vestibulum elementum congue mi sit amet bibendum. Etiam semper scelerisque libero, eu aliquam arcu lacinia id.

Tabs

A tab box...

Tab 1...
Tab 2...
Tab 3..

Accordion

An accordion...

One
Mauris quis tellus sed mi bibendum vulputate. Nam nec fermentum leo. Donec ante nisl, varius nec scelerisque nec, pulvinar id ipsum. Phasellus sodales tellus quis odio tincidunt quis feugiat sapien mollis. Ut hendrerit nisl eu turpis mattis sit amet accumsan ante pretium. Vestibulum neque justo, rutrum eu interdum sed, aliquam sit amet nulla. Pellentesque ultricies enim sit amet urna fringilla venenatis. Etiam eleifend dolor ut felis sagittis quis dignissim neque venenatis. In posuere tempus sodales. Aliquam tellus ante, posuere vitae congue at, tempus sed dolor. Etiam ac urna leo, at pellentesque augue osuere vitae congue at.
Two
Nullam leo velit, placerat quis condimentum vulputate, sagittis a tellus. Curabitur iaculis est ac odio lobortis sit amet elementum dui cursus. In malesuada semper odio et adipiscing. Aliquam pellentesque placerat sapien, id egestas arcu bibendum sed. Nunc luctus aliquet ante sit amet lobortis. Aenean eget est purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam posuere iaculis placerat. Aenean iaculis justo quis est imperdiet ac euismod leo viverra. Maecenas convallis, lectus sit amet eleifend vehicula, sapien sem pretium dolor, in tincidunt est sapien eget orci. Sed vel libero urna. Aliquam ornare sodales egestas. Duis feugiat vulputate libero id tempor. Pellentesque elementum molestie nisi ac elementum.
Three
Nunc elit nisl, vestibulum ac laoreet nec, cursus sed leo. Aenean sit amet nibh justo. Quisque dui arcu, pharetra non sollicitudin nec, rhoncus at ligula. Etiam placerat porttitor adipiscing. Aenean fermentum nulla a justo malesuada id pulvinar urna sagittis. Morbi urna orci, faucibus sed sollicitudin sit amet, faucibus dictum massa. In sit amet enim at nisi rutrum vulputate. Vestibulum quis mattis nulla. Duis viverra orci ut enim tincidunt auctor. Ut molestie eros eget mauris consectetur eget tristique arcu elementum.
Four
Nulla sollicitudin laoreet nulla quis suscipit. Curabitur tristique, dolor vel condimentum molestie, purus leo sodales enim, ac vehicula sem est eget eros. Sed vehicula, metus vel convallis tempus, mauris lorem tristique ipsum, ac condimentum arcu tellus vel nisi. Aliquam mauris est, adipiscing a pharetra ut, molestie egestas mi. Fusce vulputate blandit sagittis. Praesent eget dignissim felis. Integer ac libero eu felis congue cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce vel dui a sapien posuere consequat in quis mi. Proin eros nisi, lacinia id tempus id, congue eget justo. Proin ac justo non mi pretium vehicula sed id odio. Vivamus felis nibh, facilisis ut adipiscing at, blandit vitae magna. Praesent tellus est, molestie ut elementum at, pretium nec eros. Etiam diam nisl, varius non gravida eu, facilisis eu nunc.