No title available
The Bright Sessions
Cookie Run:Kingdom Official!
Not today Justin
sheepfilms
The Stonewall Inn
almost home
Color Me Curious
taylor price
izzy's playlists!
No title available
KIROKAZE
🪼
Cosimo Galluzzi
Claire Keane
#extradirty
tumblr dot com
"I'm Dorothy Gale from Kansas"
No title available
Kiana Khansmith
seen from Peru
seen from United States
seen from United States
seen from Costa Rica
seen from Italy
seen from Iraq
seen from Australia
seen from United States
seen from Malaysia
seen from Australia
seen from United States
seen from Netherlands
seen from Russia
seen from United States
seen from United States
seen from Bangladesh
seen from United States
seen from Australia
seen from Brazil
seen from Colombia
@mdlhut-blog
Polymer Properties
Now that you have gotten your feet wet in the previous article, let’s begin talking about properties. Properties allow you store various information about your polymer object. Properties support all of the basic javascript types (String, Number, Boolean, Object).
Let’s try adding properties to our previous cat-image element (if you don’t have the cat-image setup, visit this plunker).…
View On WordPress
Getting Started in Polymer
Getting Started in Polymer
Today, I will show you how to start a basic web component using Polymer. If you do not have polymer, you can follow Google’s guide here to download it. To begin our journey with Polymer, we will create a simple random image component using the catApi. So let’s create a new file and call it “cat-image.html”!
To setup our cat image, we’re going to need to declare our object! Polymer objects are…
View On WordPress
Animating Scroll In MDL
Animating Scroll In MDL
I am going to utilize jQuery’s animate function. Find out more about it here.
Let’s assume an example scenario of the goal being scrolling to the bottom of the document. A simple google search might bring results such as –
$("html").animate({ scrollTop: $(document).height() }, "slow");
This usually works because, when left untouch the overflow is handled by the htmlnode and the pages height is…
View On WordPress
How to Make Responsive Cards in MDL
Have you tried working with the card component in MDL? If you did than you may know that they become a bit wonky when it comes to getting them to re-size on different screens. We could combat this issue by keeping them at a fixed width and fixed height, which may look just fine on some displays, but this leads to them flowing down the page on other displays letting the rest of your precious…
View On WordPress
Adding the MDL Ripple Effect
Adding the MDL Ripple Effect
A pillar of material design is surface reaction – the feedback provided to a user at point of contact. This visual response adds a layer of engagement to the user indicating something happened. In other words bridging the gap between the action and your application’s reaction.
Luckily enough, material design comes packed with the ripple effect.
http://codepen.io/mdlhut/pen/oXVwja
Great. But how…
View On WordPress
Material Design Lite VS Bootstrap: Which Modern Front-end Framework Should Be the Face of Your Web Application?
Move over Twitter Bootstrap! There’s a new comprehensive front-end framework in town, but can tech-giant Google’s Material Design Lite really stand up against the reigning champion?
In this article we take an in-depth look at both of these frameworks, break them down piece by piece and focus on the good, and sometimes the not so good.
At mdlhut, we’ve been using Bootstrap for years. There’s no…
View On WordPress
Creating an MDL theme
Creating an MDL theme
This walkthrough assumes some base knowledge of Syntactically Awesome StyleSheets (SASS). At least to the extent how to compile. Go here to learn.
Let’s get started.
Ideally you would clone the MDL repository –
git clone https://github.com/google/material-design-lite.git
But if you want to get your hands dirty quick, download a bundled version here. Inside you will find many important…
View On WordPress
How to Change the Color of an MDL Component
How to Change the Color of an MDL Component
Meteor Design Lite provides us with 19 different colors to choose from. Those colors are:
See the Pen vOvydM by mdlhut (@mdlhut) on CodePen.
The above colors are intentionally typed exactly how they are implemented using MDL. Feel free to refer to this list when working with colors.
It seems like MDL only allows us to use a primary and accent color which each individual application, but that’s…
View On WordPress
What is BEM and why does MDL utilize it?
What is BEM and why does MDL utilize it?
What’s up with this strange syntax for MDL? Known as the ‘Block Element Modifier’ or BEM, this particular computer programming methodology is remarkably simple – it provides developers a strict, yet simple way to arrange CSS classes into independent modules. There are a few variations on the idea but the most common one looks like this:
.block {} .block__element {} .block--modifier {}…
View On WordPress
MDL - Displaying Content For Specific Viewports
MDL – Displaying Content For Specific Viewports
Material Design Lite provides us with classes to easily specify the size of containers based on the device use. (see here). We call this responsive design. Along with this toolset, they also provide us with utility classes to hide content on certain devices.
mdl-cell--hide-phone mdl-cell--hide-desktop mdl-cell--hide-tablet
That’s it.
With a combination of these classes we can define markup for mo…
View On WordPress
How to make Google's Animated Fab Button with Material Design Lite.
How to Make Google's Animated MDL Fab Button
You know that fancy spin effect that Google uses when you hover over one of their fab buttons?
An example would be when using the Inbox Web App and you hover over the circular plus (New Email) fab button on the bottom right corner. The button spins clockwise and brings about a few new options to play with including recent contacts. Another example can be seen below. Try hovering over it with your…
View On WordPress
Typography in MDL
A readable and appealing site is directly influenced by the use of typography. MDL provides many inhouse modifiers to sculpt rich arrangement and engage the end user.
Let’s take a look.
http://codepen.io/mdlhut/pen/JdaxJV
Material Design Lite start’s with a base font of
A size of 14px
A weight of 400
A line height of 20px
This is your bodyfont. Branching off of this size, MDL has the…
View On WordPress
Where is the MDL Navigation Icon?
Where is the MDL Navigation Icon?
So you’ve added mdl-layout__drawer and can not find the navigation icon?
Foo BAR BAR BAR BAR
View On WordPress
What's the Best Way to Include MDL In My Project?
Google provides us with 5 different options to include MDL into our web applications. But which option is the best option?
If you want the most up to date, stable, and fastest version of MDL you should use the links hosted on Google’s CDN. CDN stands for Content Delivery Network.
Let’s say that you downloaded MDL and included it in your project. This means that every time someone accesses your…
View On WordPress
Understanding the MDL Grid
Understanding the MDL Grid
Material Design Lite comes packed with a responsive grid system.
Here’s the breakdown of mdl’s viewports (important for understanding the code to come)
Desktop
12 columns
Any width > 840px
Tablet
8 columns
Any width > 480px
Phone
4 columns
The margins and gutters all are the same. (16px)
http://codepen.io/mdlhut/pen/xGJJwO
This is to say. Only xamount of cells will fit in a specific viewport.…
View On WordPress
(via Making Navigation in Material Design Light) It is important to consider your content when building your navigation. When you get down to it, the navigation is built for the ‘end user’. That is to say someone who does not necessarily think like you do. This might mean helpful calls to action and appropriate categories. Ask yourself questions such as What are the different […] http://mdlhut.com/2015/07/creating-navigation-in-material-design-light/