Experiment with Google's Material Design Lite and Sass
A Pen by Charlotte Tan on CodePen.
Experiment with Google's Material Design Lite and Sass
A Pen by Charlotte Tan on CodePen.
<div class="mdl-grid"> | |
<div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet mdl-cell--hide-phone"></div> | |
<div class="mdl-cell mdl-cell--4-col center"> | |
<a href="https://en.wikipedia.org/wiki/Special:Random"> | |
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"> | |
Hit me! | |
</button> | |
</a> | |
</div> | |
<div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet mdl-cell--hide-phone"></div> | |
</div> | |
<div class="mdl-grid"> | |
<div class="mdl-cell mdl-cell--5-col mdl-cell--3-col-tablet mdl-cell--1-col-phone"></div> | |
<div class="mdl-cell mdl-cell--2-col"> | |
<form id="searchForm" action="#"> | |
<div class="mdl-textfield mdl-js-textfield"> | |
<input class="mdl-textfield__input" type="text" id="search"> | |
<label class="mdl-textfield__label" for="search"><i class="material-icons">search</i></label> | |
</div> | |
</form> | |
</div> | |
<div class="mdl-cell mdl-cell--5-col mdl-cell--3-col-tablet mdl-cell--1-col-phone"></div> | |
</div> | |
<div class="mdl-grid"> | |
<div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-tablet mdl-cell--hide-phone"></div> | |
<div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-phone"> | |
<ul id="resultList" class="mdl-list"> | |
</ul> | |
</div> | |
<div class="mdl-cell mdl-cell--3-col mdl-cell--1-col-tablet mdl-cell--hide-phone"></div> | |
</div> |
$(function() { | |
var WIKI_API = 'https://en.wikipedia.org/w/api.php?callback=?'; | |
var wikiQuery = { | |
action: 'query', | |
list: 'search', | |
format: 'json' | |
}; | |
var $search = $('#search'); | |
var $searchForm = $("#searchForm"); | |
var $resultList = $('#resultList'); | |
var $noResults = $('<li>', { | |
class: 'center' | |
}).text('No results :('); | |
var populateResults = function(data) { | |
$resultList.empty(); | |
if (!data.query.search.length) { | |
$resultList.append($noResults); | |
} | |
data.query.search.forEach(function(ele, index, array) { | |
var $listItem = $('<li>', { | |
class: 'mdl-list__item mdl-list__item--three-line' | |
}); | |
var $spanTitle = $('<span>', { | |
class: 'mdl-list__item-primary-content' | |
}).html('<span>' + ele.title + '</span>'); | |
var $spanSnippet = $('<span>', { | |
class: 'mdl-list__item-text-body' | |
}).html(ele.snippet + '...'); | |
$spanTitle.append($spanSnippet); | |
$listItem.append($spanTitle); | |
$resultList.append($listItem); | |
}); | |
}; | |
var performSearch = function(e) { | |
e.preventDefault(); | |
wikiQuery.srsearch = $search.val(); | |
$.getJSON(WIKI_API, wikiQuery, populateResults); | |
}; | |
$searchForm.submit(performSearch); | |
// bootstrap some data so that we can see the preview in codepen | |
$search.val('Seattle'); | |
$searchForm.trigger('submit'); | |
}); |
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
$amber100: #FFECB3 | |
.center | |
text-align: center | |
.searchmatch | |
background-color: $amber100 |
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> | |
<link href="https://code.getmdl.io/1.1.3/material.lime-amber.min.css" rel="stylesheet" /> |
Experiment with Google's Material Design Lite and Sass
A Pen by Charlotte Tan on CodePen.