Components
Form
<form action="">
<div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">my text</label>
</div>
</div>
<button class="ric-button--primary mdl-js-button mdl-js-ripple-effect">Submit</button>
</form>
Dialog
This dialog offers good behavior on Chrome mobile as it is implementing a native API. A polyfill is provided for browser that don't support it.
<button id="show-dialog" class="ric-button--flat mdl-js-button mdl-js-ripple-effect">Show Dialog</button>
<dialog class="mdl-dialog">
<h4 class="mdl-dialog__title">Hey what's up?</h4>
<div class="mdl-dialog__content">
<p>
The style guide is amazing but would you describe it?
</p>
</div>
<div class="mdl-dialog__actions">
<button class="ric-button--primary mdl-js-button mdl-js-ripple-effect close">Awesome</button>
</div>
</dialog>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var dialog = document.querySelector('dialog');
var showDialogButton = document.querySelector('#show-dialog');
if (!dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
showDialogButton.addEventListener('click', function() {
dialog.showModal();
});
dialog.querySelector('.close').addEventListener('click', function() {
dialog.close();
});
});
</script>
Metaheader
See also Layout section. The meta header is top bar that goes to the bottom on very small screens.
<div class="ric-metaheader">
<div class="ric-metaheader__container">
<div class="ric-metaheader__left-links">
<b>autoricardo</b>.ch
</div>
<div class="ric-metaheader__right-links">
<a href="#">Account</a>
<a href="#">Help</a>
<span class="ric-metaheader__languages">
<span href="#" class="ric-metaheader--selected">DE</span>
<a href="#">FR</a>
</span>
</div>
</div>
</div>
Header
The content of this header is just an example. Please add classes if necessary.
<header class="ric-header">
<div class="ric-header__container">
<div class="ric-header__left-container">
<a href="/" class="ric-logo__core--responsive"></a>
</div>
<p class=ric-header__right-container>
Max Mustermane
<i class="material-icons">person</i>
</p>
</div>
</header>
Sub Header
On small screens when the menu become collapsed, a new sticky top bar can appear that offers the mobile plateform specific functions. You are free use this or not depending of your needs. If you do you might want to make sure your content is marked with .ric-layout__main
or simple a sinle main
element because a padding adjustement is needed on the content when the sticky top bar get out of the normal flow of the page (position:fixed). This will be done automatically for you if you apply this class.
<header class="ric-header">
<div class="ric-header__container">
My nice header
</div>
<div class="ric-header__subheader">
This the sub bar only visible on small screen
</div>
</header>
Notices
Example of basic message to the user
This is a success message
This is a warning message
This is an error message
This is a success message
Let's put some content in there to see how it behaves
<p class="ric-notice--success">
This is a <strong>success</strong> message
</p>
<p class="ric-notice--warning">
This is a <strong>warning</strong> message
</p>
<p class="ric-notice--error">
This is an <strong>error</strong> message
</p>
<div class="ric-notice--success">
<h2>This is a <strong>success</strong> message</h2>
<p>Let's put some <a href="#">content in there to see how it behaves</a></p>
</div>
Feedback
Trigger for the feedback form.
<div class="ric-feedback">
<a href="#" class="ric-feedback__container">
<div class="ric-feedback__image"></div>
<div class="ric-feedback__text">
<div>Your opinion matters.</div>
<span class="ric-feedback__link">It really does.</span>
</div>
</a>
</div>
Tabs
First
Second
Third
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
<a href="#tabs-panel-one" class="mdl-tabs__tab is-active">First <small class="ric-layout__phone--hide">(123456)</small></a>
<a href="#tabs-panel-two" class="mdl-tabs__tab">Second</a>
<a href="#tabs-panel-three" class="mdl-tabs__tab">Third</a>
<span class="mdl-tabs__tab is-disabled">Disabled</span>
</div>
<div class="mdl-tabs__panel is-active" id="tabs-panel-one">
<h3>First</h3>
</div>
<div class="mdl-tabs__panel" id="tabs-panel-two">
<h3>Second</h3>
</div>
<div class="mdl-tabs__panel" id="tabs-panel-three">
<h3>Third</h3>
</div>
</div>
Search Bar
Events emmited by the autocomplete:
<form method="get" action=".">
<div class="ric-search-bar">
<label class="ric-search-bar__icon mdl-button mdl-js-button mdl-button--icon" for="keyword">
<i class="material-icons">search</i>
</label>
<div class="ric-search-bar__input mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="q" name="q" autocomplete="off">
<label class="mdl-textfield__label" for="keyword">Search</label>
<div class="ric-autocomplete"></div>
</div>
<button class="ric-search-bar__button ric-button--primary mdl-js-button mdl-js-ripple-effect">
<div class="ric-button-spinner-container">
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</div>
<span class="ric-button__label">Chercher</span>
</button>
</div>
</form>
<p>Events emmited by the autocomplete: </p>
<textarea id="autocomplete-events" style="width:100%;min-height:10em"></textarea>
<div class="another-auto-complete">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="q" name="q" autocomplete="off" placeholder="2 autocomplete on the same page is fine">
<div class="ric-autocomplete"></div>
</div>
</div>
<script>
ric(function(event) {
// function initAutocomplete (autoCompleteSelector, inputSelector)
var autocomplete = initAutocomplete('.ric-search-bar__input .ric-autocomplete', '.ric-search-bar__input input');
autocomplete.update([{
someRandomThings: 'random 1',
term: "iPhones",
html: "iPhones <i>in smartphones</i>"
},
{
someRandomThings: 'random 2',
term: "Android",
html: "Android <i>in smartphones</i>"
},
{
term: "Nokia",
html: "Nokia <i>in smartphones</i>"
},
{
term: "Windows",
html: "Windows phone?"
}
]);
autocomplete.show();
var autocompleteDom = document.querySelector('.ric-search-bar__input .ric-autocomplete');
var text = document.querySelector('#autocomplete-events');
// The input has changed value but not value selected yet
autocompleteDom.addEventListener('ric-autocomplete-change', function(e) {
text.value = text.value + 'Change:' + JSON.stringify(e.detail) + "\n";
});
// The user has volontarly selected one of the items
autocompleteDom.addEventListener('ric-autocomplete-select', function(e) {
text.value = text.value + 'Select:' + JSON.stringify(e.detail) + "\n";
});
// The input value has changed and the drop down list to need to be updated
autocompleteDom.addEventListener('ric-autocomplete-new-autocomplete', function(e) {
text.value = text.value + 'New autocomplete needed:' + JSON.stringify(e.detail) + "\n";
});
ric('.ric-search-bar').delegate('click', '.ric-search-bar__button', function(e) {
var target = e.delegationTarget
ric(target).addClass('ric-button--loading')
setTimeout(function() {
ric(target).removeClass('ric-button--loading')
}, 2000)
})
// Unbind all events
// autocomplete.off();
var autocomplete2 = initAutocomplete('.another-auto-complete .ric-autocomplete', '.another-auto-complete input');
autocomplete2.update([{
term: "iPhones",
html: "iPhones <i>in smartphones</i>"
}, {
term: "Android"
}])
autocomplete2.show();
});
</script>
Notification Bar
<div class="ric-notification-bar">
<a href="#" class="ric-notification-bar__close">
<i class="material-icons">close</i>
</a>
<strong>Some title</strong> the message <a href="#">some link</a><br>
<strong>Some other important stufff</strong> message <a href="#">some link</a>
<br>Some content
<br>Some content
<br>Some content
<br>Some content
<br>Some content
</div>
<script>
ric(document.body).delegate('click', '.ric-notification-bar__close', function(e) {
e.preventDefault()
ric(e.delegationTarget).closest('.ric-notification-bar').addClass('ric-notification-bar--hidden')
})
</script>
Drop Down
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
<div style="position:relative">
<button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect ric-drop-down" for="demo-menu-lower-left">
<a href="#1" class="mdl-menu__item">My profile <i class="material-icons">person</i></a>
<a href="#2" class="mdl-menu__item">Mein Kaufen <i class="material-icons">shopping_cart</i></a>
<a href="#3" class="mdl-menu__item">Mein verkaufen <i class="material-icons">store</i></a>
<a href="#4" class="mdl-menu__item">Log out <i class="material-icons">exit_to_app</i></a>
</ul>
</div>
<div style="position:relative">
<button id="demo-menu-lower-right" style="float:right" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect ric-drop-down" for="demo-menu-lower-right">
<a href="#1" class="mdl-menu__item">My profile <i class="material-icons">person</i></a>
<a href="#2" class="mdl-menu__item">Mein Kaufen <i class="material-icons">shopping_cart</i></a>
<a href="#3" class="mdl-menu__item">Mein verkaufen <i class="material-icons">store</i></a>
<a href="#4" class="mdl-menu__item">Log out <i class="material-icons">exit_to_app</i></a>
</ul>
<div>
<p>
Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br> Lorem ipsum<br>
</p>
Article Gallery
<div class="ric-article-gallery" data-ric-article-gallery>
<div class="ric-article-gallery__image-container mdl-shadow--2dp">
<div class="ric-article-gallery__swipe-indicator ric-article-gallery__swipe-indicator--left">
<i class="material-icons"></i>
</div>
<div class="ric-article-gallery__swipe-indicator ric-article-gallery__swipe-indicator--right">
<i class="material-icons"></i>
</div>
<div class="ric-article-gallery__image--previous">
<img>
</div>
<div class="ric-article-gallery__image--current">
<img>
</div>
<div class="ric-article-gallery__loader">
<div class="ric-article-gallery__spinner">
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</div>
</div>
<div class="ric-article-gallery__indicator-container ric-layout__medium--hide">
<div class="ric-article-gallery__indicator-inner-container">
<div class="ric-article-gallery__indicator mdl-shadow--2dp"></div>
</div>
</div>
</div>
<div class="ric-article-gallery__thumbnail-container-wrapper ric-layout__phone--hide">
<button class="ric-article-gallery__controller">
<i class="material-icons"></i>
</button>
<div class="ric-article-gallery__thumbnail-container">
<!-- TODO: add config to the widget -->
<!-- TODO: keyboard control -->
<!-- TODO: ? 3rd url for zooming -->
<img class="ric-article-gallery__thumbnail mdl-shadow--2dp ric-color__main--border" src="./assets/images/article-gallery/ferrari-01.jpg" srcset="./assets/images/article-gallery/ferrari-01-2x.jpg 2x" data-ric-article-gallery-src-lg="./assets/images/article-gallery/ferrari-01-lg.jpg"
data-ric-article-gallery-srcset-lg="./assets/images/article-gallery/ferrari-01-lg-2x.jpg 2x">
<img class="ric-article-gallery__thumbnail mdl-shadow--2dp ric-color__main--border" src="./assets/images/article-gallery/ferrari-02.jpg" srcset="./assets/images/article-gallery/ferrari-02-2x.jpg 2x" data-ric-article-gallery-src-lg="./assets/images/article-gallery/ferrari-02-lg.jpg"
data-ric-article-gallery-srcset-lg="./assets/images/article-gallery/ferrari-02-lg-2x.jpg 2x">
<img class="ric-article-gallery__thumbnail mdl-shadow--2dp ric-color__main--border" src="./assets/images/article-gallery/ferrari-03.jpg" srcset="./assets/images/article-gallery/ferrari-03-2x.jpg 2x" data-ric-article-gallery-src-lg="./assets/images/article-gallery/ferrari-03-lg.jpg"
data-ric-article-gallery-srcset-lg="./assets/images/article-gallery/ferrari-03-lg-2x.jpg 2x">
<img class="ric-article-gallery__thumbnail mdl-shadow--2dp ric-color__main--border" src="./assets/images/article-gallery/ferrari-04.jpg">
<img class="ric-article-gallery__thumbnail mdl-shadow--2dp ric-color__main--border" src="./assets/images/article-gallery/ferrari-05.jpg">
<img class="ric-article-gallery__thumbnail mdl-shadow--2dp ric-color__main--border" src="./assets/images/article-gallery/ferrari-06.jpg">
</div>
<button class="ric-article-gallery__controller ric-article-gallery__controller--right">
<i class="material-icons"></i>
</button>
</div>
</div>
Scrolltop
<button type="button" class="ric-scrolltop mdl-button mdl-js-button"><i class="material-icons">keyboard_arrow_up</i></button>
Pagination
First page active
Random page active
<h3>First page active</h3>
<!--
spaces between items are handled by whitespaces
to make it work make sure, you have similar whitespaces as in the styleguide
in pug you can provoke a white space like this "| "
the (non-breaking-space) are causing a bigger space between the arrow buttons and the numbers
-->
<div class="ric-pagination">
<a href="#14-pagination">
<button class="ric-pagination__button ric-pagination__button--active mdl-js-button mdl-js-ripple-effect ric-color__grey-6--background">1</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">2</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">3</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">4</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">5</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">6</button>
</a>
<span class="ric-pagination__ellipsis">...</span>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect">223</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button ric-pagination__button--navigate mdl-js-button mdl-js-ripple-effect">
<i class="material-icons ric-color__main--text">keyboard_arrow_right</i>
</button>
</a>
</div>
<h3>Random page active</h3>
<div class="ric-pagination">
<a href="#14-pagination">
<button class="ric-pagination__button ric-pagination__button--navigate mdl-js-button mdl-js-ripple-effect">
<i class="material-icons ric-color__main--text">keyboard_arrow_left</i>
</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect">1</button>
</a>
<span class="ric-pagination__ellipsis">...</span>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">101</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">102</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button ric-pagination__button--active mdl-js-button mdl-js-ripple-effect ">103</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">104</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">105</button>
</a>
<span class="ric-pagination__ellipsis">...</span>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect">223</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button ric-pagination__button--navigate mdl-js-button mdl-js-ripple-effect">
<i class="material-icons ric-color__main--text">keyboard_arrow_right</i>
</button>
</a>
<h3>Random page active with disabled buttons</h3>
<div class="ric-pagination">
<a href="#14-pagination">
<button class="ric-pagination__button ric-pagination__button--navigate mdl-js-button mdl-js-ripple-effect">
<i class="material-icons ric-color__main--text">keyboard_arrow_left</i>
</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect">1</button>
</a>
<span class="ric-pagination__ellipsis">...</span>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">101</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide">102</button>
</a>
<a href="#14-pagination">
<button class="ric-pagination__button ric-pagination__button--active mdl-js-button mdl-js-ripple-effect ">103</button>
</a>
<a href="#14-pagination" class="ric-pagination--disabled">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide" disabled>104</button>
</a>
<a href="#14-pagination" class="ric-pagination--disabled">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect ric-layout__small--hide" disabled>105</button>
</a>
<span class="ric-pagination__ellipsis">...</span>
<a href="#14-pagination" class="ric-pagination--disabled">
<button class="ric-pagination__button mdl-js-button mdl-js-ripple-effect" disabled>223</button>
</a>
<a href="#14-pagination" class="ric-pagination--disabled">
<button class="ric-pagination__button ric-pagination__button--navigate mdl-js-button mdl-js-ripple-effect" disabled>
<i class="material-icons ric-color__main--text">keyboard_arrow_right</i>
</button>
</a>
</div>
Popover
Welcome
Welcome
<style>
.ric-styleguide__popover {
height: 400px;
padding-left: 200px;
}
@media (max-width: 700px) {
.ric-styleguide__popover {
padding-left: 450px;
height: 100px;
}
}
@media (max-width: 600px) {
.ric-styleguide__popover {
padding-left: 0;
height: 100px;
}
}
</style>
<script>
ric(function() {
var popoverNode = document.querySelector('.ric-styleguide__popover-1')
var closeButton = document.querySelector('.ric-styleguide__popover-1--close')
closeButton.addEventListener('click', function() {
popoverNode.ricPopover.hide()
})
var popoverNode2 = document.querySelector('.ric-styleguide__popover-2')
var closeButton2 = document.querySelector('.ric-styleguide__popover-2--close')
closeButton2.addEventListener('click', function() {
popoverNode2.ricPopover.hide()
})
})
</script>
<div class="ric-styleguide__popover">
<ric-popover class="ric-popover__container ric-styleguide__popover-1" data-popover-visible="true" data-popover-mode="toggle">
<button class="ric-button--primary mdl-js-button mdl-js-ripple-effect ric-popover__button">
Toggle: visible by default
</button>
<div class="ric-popover">
<div class="ric-popover__backdrop"></div>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect ric-styleguide__popover-1--close">
<i class="material-icons">close</i>
</button>
</div>
</div>
</div>
</ric-popover>
<ric-popover class="ric-popover__container ric-styleguide__popover-2" data-popover-mode="show">
<button class="ric-button--primary mdl-js-button mdl-js-ripple-effect ric-popover__button">
Show only: hidden by default
</button>
<div class="ric-popover">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect ric-styleguide__popover-2--close">
<i class="material-icons">close</i>
</button>
</div>
</div>
</div>
</ric-popover>
</div>