My UX Snippet Library Experience Learning Too

First published by : September 2018 (PROTOTYPE - in testing)

…

Showing all snippets in the list

snippet preview
<a>
This is the basic anchor link.
HTML
<a href=“url” target=“_blank” tabindex=“0”>Link copy text</a>
CSS
/*CSS - You can combine these pseudo classes using a comma e.g. a:hover, a:focus {styles}*/
	a:link {styles}
	a:visited {styles}
	a:hover {styles}
	a:focus {styles}
	a:active {styles}
JS
No script required.
snippet preview
<button id=“id” class=“class”>Button copy text</button>
This is the basic anchor link that opens a linked page a new window or browser tab.
HTML
	<--How I style my PRE tag content (.counter)-->
	<dl>
	<dt>Item</dt>
	<dd>Description or definitionm</dd>
	</dl>
CSS
JS
/*jQeury*/
	$(".button").click(function)({
		$(".button").css("background","blue");
	});
snippet preview
<img>
The basic image tag is used to display images. Images are addressed by their URL within the SRC attribute. Images can be made responsive using CSS. Use the picture element to swap in different resoutions or image versions in responsive applications.
HTML
<img class=“classname” alt=“alternative description for sight-impaired users” src=“url”  height=“100” width=“100”>
	<!-- use longdesc=“url” and a long-description file when the alt attribute may become too long. Consider a title tag to explain the longdesc is available -->
CSS
/*CSS*/
	/*Style your button by class*/
	.img {
		display:block;
		padding:0.5em;
		border:1px solid:grey;
	}
JS
/*jQeury*/
	$(".image").click(function)({
		$(".image").css("borderColor","blue");
	});

Sponsored Ads

Ads collated  by Google Ad Sense. Click away..!