Get Your SASS on!
Pick Your SASS
Starter Kit
I AM Åd∀M
So, what's a UI/UX Design Engineer
Nearly all UI/UX professionals are dog lovers (site: Wakapaedia). Aside from that obvious tid-bit, design engineers are primarily UI/UX designers and developers. Some are not only page designers but page/component builders as well. They create style guides, UI graphics and images, SEO maps, clickable prototypes, CSS [or SASS] rules, and reusable js/jquery snippets (modules). They also create page-level objects and components and make web pages responsive for a legion of modern devices and work with UI frameworks like Bootstrap, Materialize, and Foundation. UI/UX developers are primarily concerned with the "look and feel" of an application and work within the DOM to style a page according to spec. UI/UX devs are concerned with the visual aspects of a page such as padding, font sizes, image responsiveness, and content flow and positioning.
UI/UX Sandbox
~ Materialize Pop
Maze
Actually single-origin coffee. Literally venmo before they sold out...
Maze
$11.99Ea salvia adipisicing vegan man bun. Flexitarian cupidatat skateboard flannel. Drinking vinegar marfa you probably haven't heard of them consequat post-ironic, shabby chic williamsburg raclette vaporware readymade selfies brunch. Venmo selvage biodiesel marfa. Tbh literally 3 wolf moon, proident elit raclette chambray consequat edison bulb four loko accusamus. Semiotics godard eiusmod, ex esse air plant quinoa vaporware selfies keytar. Actually yuccie ennui flannel single-origin coffee, williamsburg cardigan banjo forage pug distillery tumblr hexagon vinyl occaecat.
The literally 3 wolf moon, proident elit raclette chambray consequat edison bulb four loko accusamus. Semiotics godard eiusmod, ex esse air plant quinoa vaporware selfies keytar. Flexitarian cupidatat skateboard flannel. Drinking vinegar haven't heard of them consequat post-ironic, shabby chic williamsburg raclette vaporware readymade selfies brunch. Venmo selvage biodiesel marfa. Actually single-origin coffee, williamsburg cardigan banjo forage pug distillery.
Ice
Literally venmo before they sold out. Actually single-origin coffee...
Ice
$14.99Ea salvia adipisicing vegan man bun. Flexitarian cupidatat skateboard flannel. Drinking vinegar marfa you probably haven't heard of them consequat post-ironic, shabby chic williamsburg raclette vaporware readymade selfies brunch. Venmo selvage biodiesel marfa. Tbh literally 3 wolf moon, proident elit raclette chambray consequat edison bulb four loko accusamus. Semiotics godard eiusmod, ex esse air plant quinoa vaporware selfies keytar. Actually yuccie ennui flannel single-origin coffee, williamsburg cardigan banjo forage pug distillery tumblr hexagon vinyl occaecat.
The literally 3 wolf moon, proident elit raclette chambray consequat edison bulb four loko accusamus. Semiotics godard eiusmod, ex esse air plant quinoa vaporware selfies keytar. Flexitarian cupidatat skateboard flannel. Drinking vinegar haven't heard of them consequat post-ironic, shabby chic williamsburg raclette vaporware readymade selfies brunch. Venmo selvage biodiesel marfa. Actually single-origin coffee, williamsburg cardigan banjo forage pug distillery.
Cave
Actually single-origin coffee. Literally venmo before they sold out...
Cave
$4.99Ea salvia adipisicing vegan man bun. Flexitarian cupidatat skateboard flannel. Drinking vinegar marfa you probably haven't heard of them consequat post-ironic, shabby chic williamsburg raclette vaporware readymade selfies brunch. Venmo selvage biodiesel marfa. Tbh literally 3 wolf moon, proident elit raclette chambray consequat edison bulb four loko accusamus. Semiotics godard eiusmod, ex esse air plant quinoa vaporware selfies keytar. Actually yuccie ennui flannel single-origin coffee, williamsburg cardigan banjo forage pug distillery tumblr hexagon vinyl occaecat.
The literally 3 wolf moon, proident elit raclette chambray consequat edison bulb four loko accusamus. Semiotics godard eiusmod, ex esse air plant quinoa vaporware selfies keytar. Flexitarian cupidatat skateboard flannel. Drinking vinegar haven't heard of them consequat post-ironic, shabby chic williamsburg raclette vaporware readymade selfies brunch. Venmo selvage biodiesel marfa. Actually single-origin coffee, williamsburg cardigan banjo forage pug distillery.
Sun
Literally venmo before they sold out. Actually single-origin coffee...
Sun
$14.99Ea salvia adipisicing vegan man bun. Flexitarian cupidatat skateboard flannel. Drinking vinegar marfa you probably haven't heard of them consequat post-ironic, shabby chic williamsburg raclette vaporware readymade selfies brunch. Venmo selvage biodiesel marfa. Tbh literally 3 wolf moon, proident elit raclette chambray consequat edison bulb four loko accusamus. Semiotics godard eiusmod, ex esse air plant quinoa vaporware selfies keytar. Actually yuccie ennui flannel single-origin coffee, williamsburg cardigan banjo forage pug distillery tumblr hexagon vinyl occaecat.
The literally 3 wolf moon, proident elit raclette chambray consequat edison bulb four loko accusamus. Semiotics godard eiusmod, ex esse air plant quinoa vaporware selfies keytar. Flexitarian cupidatat skateboard flannel. Drinking vinegar haven't heard of them consequat post-ironic, shabby chic williamsburg raclette vaporware readymade selfies brunch. Venmo selvage biodiesel marfa. Actually single-origin coffee, williamsburg cardigan banjo forage pug distillery.
~ Layered Slider
~ JSON Array Slider
~ JSON Slider.
~ Hover Effects
HOVER 1
Slide Right
HOVER 2
Slide Down
HOVER 3
Slide Up
HOVER 4
Slide Left
HOVER 5
Whoa, what's going on?
HOVER 6
Uh, you sure about this?
HOVER 7
Welcome to the carnival
HOVER 8
Where'd I park?
~ Hovers Overkill
2D Transitions
Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward
Background Transitions
Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top Bounce To Right Bounce To Left Bounce To Bottom Bounce To Top Radial Out Radial In Rectangle In Rectangle Out Shutter In Horizontal Shutter Out Horizontal Shutter In Vertical Shutter Out Vertical
Font Awesome Icons
Icon Back Icon Forward Icon Down Icon Up Icon Spin Icon Drop Icon Fade Icon Float Away Icon Sink Away Icon Grow Icon Shrink Icon Pulse Icon Pulse Grow Icon Pulse Shrink Icon Push Icon Pop Icon Bounce Icon Rotate Icon Grow Rotate Icon Float Icon Sink Icon Bob Icon Hang Icon Wobble Horizontal Icon Wobble Vertical Icon Buzz Icon Buzz Out
Border Transitions
Border Fade Hollow Trim Ripple Out Ripple In Outline Out Outline In Round Corners Underline From Left Underline From Center Underline From Right Reveal Underline Reveal Overline Reveal Overline From Left Overline From Center Overline From Right
Shadow and Glow Transitions
Shadow Grow Shadow Float Shadow Glow Shadow Radial Box Shadow Outset Box Shadow Inset
Speech Bubbles
Bubble Top Bubble Right Bubble Bottom Bubble Left Bubble Float Top Bubble Float Right Bubble Float Bottom Bubble Float Left
Curls
Curl Top Left Curl Top Right Curl Bottom Right Curl Bottom LeftMade by
Ian Lunn - WordPress & Front-end Developer
Follow @IanLunn for
Hover.css news, web design &
development links, tips, and opinions
DOM/AJAX Widgets
~ Fetching JSON
Using the Google Books API
Show All~ Loop Through JSON Array
var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'dogs-' + pageCounter + '.json');
ourRequest.onload = function() {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
} else {
console.log("We connected to the server, but it returned an error.");
}
};
ourRequest.onerror = function() {
console.log("Connection error");
};
ourRequest.send();
pageCounter++;
if (pageCounter > 3) {
btn.classList.add("hide-me");
}
});
function renderHTML(data) {
var htmlString = "";
for (i = 0; i < data.length; i++) {
htmlString += "p" +
data[i].name + " is a " + data[i].breed + " that likes to eat ";
for (ii = 0; ii < data[i].foods.likes.length; ii++) {
if (ii == 0) {
htmlString += data[i].foods.likes[ii];
} else {
htmlString += " and " + data[i].foods.likes[ii];
}
}
htmlString += ' but hates ';
for (ii = 0; ii < data[i].foods.hates.length; ii++) {
if (ii == 0) {
htmlString += data[i].foods.hates[ii];
} else {
htmlString += " and " + data[i].foods.hates[ii];
}
}
htmlString += './p';
}
animalContainer.insertAdjacentHTML('beforeend', htmlString);
~ My Fantasy Garage
var myObj, i, j, x = "";
myObj = {
"name": "Adam",
"age": 49,
"cars": [
{"name": "Aston Martin", "models": ["Vantage", "Vanquish", "DB11"]},
{"name": "BMW", "models": ["320", "X5", "i9"]},
{"name": "Fiat", "models": ["500", "Panda"] }
]
}
for (i in myObj.cars) {
x += myObj.cars[i].name;
for (j in myObj.cars[i].models) {
x += myObj.cars[i].models[j];
}
}
document.getElementById("demo").innerHTML = x;
~ PHP/AJAX Form Hints
Start typing a name in the input field below:
First name:Suggestions:
Intermission
What I do. (Let's watch some progress bars.)
Wireframing
90%Style Guide Creating
95%Page Building
100%Adobe Creative Suite
90%Wordpress/Opencart
65%JSP/PHP/HTML5 Prototyping
100%SASS/GRUNT
95%JS/jQuery
90%Angular 2
60%WAMP/LAMP
75%Middle-tier Integration
80%Writing (Buy my latest novel)
95%Buy My Book
-
Release Date:February, 2019$28.99/hardcover & $17.99/paperback
My new novel, Walking Through Brambles:
a narrative of circumspection" is finally out.
Read my latest interview at Zimbell House Publishing.
Buy now at Amazon, Barnes & Noble, or a bookstore near you.
Contact
Open for Remote, Freelance or Seattle-based Projects.
Call Me
+1-206-482-9187
Email me
am@myuikit.com
Visit Me
Seattle, USA
Federal Way, WA 98023
Phone: (206) 482-9187
Reach Out
Since much of my work is pro-bono, please consider helping me offset production/hosting
costs by donating whatever pocket change you can spare.
www.irisandpith.com
Thank You!
www.ui-design-engineering.com
Comment 1