Curo Material Interface

View on GitHub Download .zip Download .tar.gz

Material design ui extracted from Curo CMS

Most of the ui elements are to Google`s Material Design concept.

Headline h1

Headline h2

Headline h3

Headline h4

Headline h5

Headline h1 lined

Headline h2 lined

Headline h3 lined

Headline h4 lined

Headline h5 lined

Line

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Cur, nisi quod turpis oratio est? Duo Reges: constructio interrete. Ergo id est convenienter naturae vivere, a natura discedere. Sed quid attinet de rebus tam apertis plura requirere? Quid, quod res alia tota est? Quae cum dixisset, finem ille.

Paragraphs and sub formats

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Cur, nisi quod turpis oratio est? Duo Reges: constructio interrete. Ergo id est convenienter naturae vivere, a natura discedere. Sed quid attinet de rebus tam apertis plura requirere? Quid, quod res alia tota est? Quae cum dixisset, finem ille.

em

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

strong

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

small

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

links

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.text-light

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.text-primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Navbar

.cmi-navbar

Überschrift

Überschrift

.cmi-navbar.cmi-navbar-padding

Hallo Welt

Navbar with alert

Hallo Welt

My awesome alert message...

Hallo Welt

My awesome alert message...

Navbar with danger alert

Hallo Welt

My awesome alert message...

Hallo Welt

My awesome alert message...

Icons

See google material design icons with community extension:

Buttons

Flat (default)

.cmi-btn
Button
.cmi-btn.cmi-btn-default
Button
.cmi-btn.cmi-btn-primary
Button
.cmi-btn.cmi-btn-danger
Button
.cmi-btn.cmi-btn-danger-flat
Button
.cmi-btn.cmi-btn-default.cmi-btn-small
Button
.cmi-btn.cmi-btn-default.cmi-btn-large
Button
.cmi-btn.cmi-btn-default.cmi-btn-block
Button

Raised

.cmi-btn.cmi-btn-raised
Button
.cmi-btn.cmi-btn-raised.cmi-btn-default
Button
.cmi-btn.cmi-btn-raised.cmi-btn-primary
Button
.cmi-btn.cmi-btn-raised.cmi-btn-danger
Button
.cmi-btn.cmi-btn-raised.cmi-btn-danger-flat
Button
.cmi-btn.cmi-btn-raised.cmi-btn-default.cmi-btn-small
Button
.cmi-btn.cmi-btn-raised.cmi-btn-default.cmi-btn-large
Button
.cmi-btn.cmi-btn-raised.cmi-btn-default.cmi-btn-block
Button

Button circle flat

.cmi-btn.cmi-btn-circle
.cmi-btn.cmi-btn-circle.cmi-btn-default
.cmi-btn.cmi-btn-circle.cmi-btn-primary
.cmi-btn.cmi-btn-circle.cmi-btn-danger
.cmi-btn.cmi-btn-circle.cmi-btn-danger-flat
.cmi-btn.cmi-btn-circle.cmi-btn-default.cmi-btn-small
.cmi-btn.cmi-btn-circle.cmi-btn-default.cmi-btn-large

Button circle raised

.cmi-btn.cmi-btn-raised.cmi-btn-circle
.cmi-btn.cmi-btn-raised.cmi-btn-circle.cmi-btn-default
.cmi-btn.cmi-btn-raised.cmi-btn-circle.cmi-btn-primary
.cmi-btn.cmi-btn-raised.cmi-btn-circle.cmi-btn-danger
.cmi-btn.cmi-btn-raised.cmi-btn-circle.cmi-btn-danger-flat
.cmi-btn.cmi-btn-raised.cmi-btn-circle.cmi-btn-default.cmi-btn-small
.cmi-btn.cmi-btn-raised.cmi-btn-circle.cmi-btn-default.cmi-btn-large

Button circle slide content

.cmi-btn.cmi-btn-circle.cmi-btn-default
My sliding content
.cmi-btn.cmi-btn-circle.cmi-btn-primary
My sliding content
.cmi-btn.cmi-btn-circle.cmi-btn-danger
My sliding content
.cmi-btn.cmi-btn-circle.cmi-btn-danger-flat
My sliding content
.cmi-btn.cmi-btn-circle.cmi-btn-default.cmi-btn-small
My sliding content
.cmi-btn.cmi-btn-circle.cmi-btn-default.cmi-btn-large
My sliding content

Button circle slide content direction

.cmi-btn.cmi-btn-circle.cmi-btn-primary
My sliding content
.cmi-btn.cmi-btn-circle.cmi-btn-primary.cmi-btn-circle-left
My sliding content

Tables

.cmi-table

Column 1 Column 2 Column 3 Column 4
Row 1 - 1 Row 1 - 2 Row 1 - 3 Button
Row 2 - 1 Row 2 - 2 Row 2 - 3 Button
Row 3 - 1 Row 3 - 2 Row 3 - 3 Button

.cmi-table.cmi-table-striped

Column 1 Column 2 Column 3 Column 4
Row 1 - 1 Row 1 - 2 Row 1 - 3 Button
Row 2 - 1 Row 2 - 2 Row 2 - 3 Button
Row 3 - 1 Row 3 - 2 Row 3 - 3 Button

.cmi-table.cmi-table-hoverable

Column 1 Column 2 Column 3 Column 4
Row 1 - 1 Row 1 - 2 Row 1 - 3 Button
Row 2 - 1 Row 2 - 2 Row 2 - 3 Button
Row 3 - 1 Row 3 - 2 Row 3 - 3 Button

.cmi-table.cmi-table-striped.cmi-table-hoverable

Column 1 Column 2 Column 3 Column 4
Row 1 - 1 Row 1 - 2 Row 1 - 3 Button
Row 2 - 1 Row 2 - 2 Row 2 - 3 Button
Row 3 - 1 Row 3 - 2 Row 3 - 3 Button

With active rows: .cmi-table.cmi-table-striped

Column 1 Column 2 Column 3 Column 4
Row 1 - 1 Row 1 - 2 Row 1 - 3 Button
Row 2 - 1 Row 2 - 2 Row 2 - 3 Button
Row 3 - 1 Row 3 - 2 Row 3 - 3 Button
Row 4 - 1 Row 4 - 2 Row 4 - 3

With active rows: .cmi-table.cmi-table-striped.cmi-table-hoverable

Column 1 Column 2 Column 3 Column 4
Row 1 - 1 Row 1 - 2 Row 1 - 3 Button
Row 2 - 1 Row 2 - 2 Row 2 - 3 Button
Row 3 - 1 Row 3 - 2 Row 3 - 3 Button
Row 4 - 1 Row 4 - 2 Row 4 - 3 Button

Lists

Normal lists

.cmi-ul and cmi-li

  • Row 1
  • Row 2
  • Row 3

Flex list table

.cmi-flex-list-table and .cmi-ul and cmi-li

  • Column 1
  • Column 1
  • Column 1
  • Column 1
  • Row 1 - 1
  • Row 1 - 2
  • Row 1 - 3
  • Button
  • Row 2 - 1
  • Row 2 - 2
  • Row 2 - 3
  • Button
  • Row 3 - 1
  • Row 3 - 2
  • Row 3 - 3
  • Button

.cmi-flex-list-table.cmi-flex-list-table-hoverable and .cmi-ul and cmi-li

  • Column 1
  • Column 1
  • Column 1
  • Column 1
  • Row 1 - 1
  • Row 1 - 2
  • Row 1 - 3
  • Button
  • Row 2 - 1
  • Row 2 - 2
  • Row 2 - 3
  • Button
  • Row 3 - 1
  • Row 3 - 2
  • Row 3 - 3
  • Button

.cmi-flex-list-table.cmi-flex-list-table-striped.cmi-flex-list-table-hoverable and .cmi-ul and cmi-li

  • Column 1
  • Column 1
  • Column 1
  • Column 1
  • Row 1 - 1
  • Row 1 - 2
  • Row 1 - 3
  • Button
  • Row 2 - 1
  • Row 2 - 2
  • Row 2 - 3
  • Button
  • Row 3 - 1
  • Row 3 - 2
  • Row 3 - 3
  • Button

With active rows: .cmi-flex-list-table.cmi-flex-list-table-striped and .cmi-ul and cmi-li

  • Column 1
  • Column 1
  • Column 1
  • Column 1
  • Row 1 - 1
  • Row 1 - 2
  • Row 1 - 3
  • Button
  • Row 2 - 1
  • Row 2 - 2
  • Row 2 - 3
  • Button
  • Row 3 - 1
  • Row 3 - 2
  • Row 3 - 3
  • Button

.cmi-flex-list-table.cmi-flex-list-table-striped.cmi-flex-list-table-hoverable and .cmi-ul and cmi-li

  • Column 1
  • Column 1
  • Column 1
  • Column 1
  • Row 1 - 1
  • Row 1 - 2
  • Row 1 - 3
  • Button
  • Row 2 - 1
  • Row 2 - 2
  • Row 2 - 3
  • Button
  • Row 3 - 1
  • Row 3 - 2
  • Row 3 - 3
  • Button

Cards

.cmi-card

My highlighted topic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. At Zeno eum non beatum modo, sed etiam divitem dicere ausus est.

.cmi-card with image and action bar

Such kitty

My highlighted topic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. At Zeno eum non beatum modo, sed etiam divitem dicere ausus est.

Do this Do that

.cmi-card with separator

My highlighted topic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. At Zeno eum non beatum modo, sed etiam divitem dicere ausus est.

Do this Do that

.cmi-card colored

My highlighted topic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. At Zeno eum non beatum modo, sed etiam divitem dicere ausus est.

Do this Do that

.cmi-card with image and action bar and header

Card with header

Such kitty

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. At Zeno eum non beatum modo, sed etiam divitem dicere ausus est.

Do this Do that

.cmi-card - headers

Card with header

And sub headline

Such kitty

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.cmi-card - headers

Card with header and image

And sub headline

Such kitty

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Flex Modal

Modal with following specs:

  • Fixed
  • 90% screen width (5% left/right margin)
  • max. 90% height (5% top margin, min. 5% bottom margin)
  • Header/Footer always visible
  • Content overflow scroll
Open example modal 
.cmi.cmi-flex-modal
  .cmi-flex-modal-dialog
    %header.cmi-header
      .cmi-flex-modal-header-inside
        .cmi-pull-left
          %a.cmi-flex-modal-back.cmi-btn.cmi-ripples{ href: '#' }
            %i.cmi-i.mdi.mdi-chevron-double-left
        .cmi-pull-right
          %a.cmi-flex-modal-close.cmi-btn.cmi-ripples{ href: '#' }
            %i.cmi-i.mdi.mdi-close
        %h1.cmi-h1 Modal

    %main.cmi-main
      %aside.cmi-aside
        %p.cmi-p My Sidebar
      %section.cmi-section
        %p.cmi-p My Content

    %footer.cmi-footer
      .cmi-flex-modal-footer-inside
        .cmi-pull-left
          %a.cmi-flex-modal-back.cmi-btn.cmi-ripples{ href: '#' }
            %i.cmi-i.cmi-i.mdi.mdi-chevron-double-left
        .cmi-pull-right
          %a.cmi-flex-modal-close.cmi-btn.cmi-btn-default.ripples.ripples-dark{ href: '#' }
            Close
          %a.cmi-flex-modal-save.cmi-btn.cmi-btn.cmi-btn-raised.cmi-btn-primary.ripples{ href: '#' }
            Save

To preseve the content from scrolling when the modal is opened, you should add the following class to the body tag: 

body.cmi-flex-modal-open