First of all,
This is NOT a Showcase of my best work.
My development playground & Laboratory!
The sandbox is where I prove to myself what can't be done, and what might possibly be dead-frog ugly. Where I burn widgets to the ground to examine the smoke. And where I try things for the very first time. That said, some things, however turn out surprisingly well. You be the judge.
Adam L Marsh - http://www.adam-marsh.com
Adam L Marsh - http://www.ui-design-engineering.com
GW Latimer - Author, Walking Through Brambles
G. Webster Latimer - Author, Walking Through Brambles
Adam L Marsh - http://www.milkandbourbon.com
Adam L Marsh - http://www.myuikit.com
G.W. Latimer - http://www.thefogandwave.com
For Designers & Developers
~ Widgets, PSDs, and other stuff.
UI/UX Resources
Articles
Style Guides
Templates & PSDs
UI Sandbox
Angular 6 / Typescript
- Angular JSON App
- Dynamic Angular Form
- CSS Gradient & Box Shadow Generator (Change the alpha to reveal the background image.)
- Smart Task Manager
- JSON API Messaging App
Javascript [DOM]
Ajax / REST
UI Widgets
~ Materialize Modals
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.
~ 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
JS/AJAX Widgets
~ Loading Ajax
Using the Google Books API
Show All~ Looping 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
~ More JSON
var myObj, i, j, x = "";
myObj = {
"name": "John",
"age": 30,
"cars": [
{"name": "Ford", "models": ["Fiesta", "Focus", "Mustang"]},
{"name": "BMW", "models": ["320", "X3", "X5"]},
{"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;
~ Textbox Hint
~ PHP/AJAX Form Hints
Start typing a name in the input field below:
First name:Suggestions:
Get an Opencart, Wordpress, BS4 Theme
~ Opencart 3
Themes here feature the following:
- Truly Modular & Responsive
- Choose and Arrange Mods You Want
- Up to 20 Custom Modules
- SQL for Mods/Extension
- Extra jQuery Modules
- Parallax Modules
- Scrolling/Fixed Header
- Easy to Refactor for Your Specific Product Line
~ Wordpress
All themes are SASS ready with a grunt file guarnateed to compile all your .scss files. Make sure you have node and scss installed in your theme directory.
The theme here is actually 1 theme broken up into 3 parts:
- Part 2: A base starter kit
- Part 3: PHP intensive
- Part 4: The completed project
This covers the basic "global" features of Wordpress. This structure is common to most Wordpress sites and serves as a basic template for a new WP project.
This goes over the Wordpress For Loop, templates, custom pages, and many php constructs utilized by Wordpress.
~ SASS/BS-4
All themes are SASS ready with a grunt file guarnateed to compile all your .scss files. Make sure you have node and scss installed in your theme directory.
On the Web
Find 'Me' Here:
Adam L Marsh - http://www.adam-marsh.com
Adam L Marsh - http://www.ui-design-engineering.com
GW Latimer - Author, Walking Through Brambles
G. Webster Latimer - Author, Walking Through Brambles
Adam L Marsh - http://www.milkandbourbon.com
Adam L Marsh - http://www.myuikit.com
G.W. Latimer - http://www.thefogandwave.com
Check My Complete E-Commerce Solution
My e-store, House of Gao, designed and built by yours truly. Powered by Opencart
3. Once I have some inventory,
it'll be a real store!
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!
-
Release Date:February, 2019$28.99/hardcover & $17.99/paperback
My new novel written under the name of GW Latimer
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.
Reach Out
Everett, WA 98204
Phone: (206) 801-0073
Adam L Marsh - http://www.adam-marsh.com
Adam L Marsh - http://www.ui-design-engineering.com
GW Latimer - Author, Walking Through Brambles
G. Webster Latimer - Author, Walking Through Brambles
Adam L Marsh - http://www.milkandbourbon.com
Adam L Marsh - http://www.myuikit.com
G.W. Latimer - http://www.thefogandwave.com
www.ui-design-engineering.com
sesid=uiuxsandbox.v2: 2383 .031720
Will fix this soon...