Now,
Start with the Pico UI!
  • UI completed with simple Javascript code.
  • Right now, try it demo.
Window

Don't rely on tabs anymore!

Tabs were convenient, but now they are not.

Tab

Multitasking with multi-window!

Now, open as many windows as you want and work efficiently.

Window

Display the same in any environment! !

With the Pico UI component, you can display the same anywhere.

imac
macbook
ipad
iphone
alert

Quick start

Start right away with sample code!

Pico UI is built on the basis of jQuery / jQuery UI.

Required external library
<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
		<link rel="stylesheet" href="https://pico-ui.com/assets/vendor/picoui/css/pico-ui.css" />
		
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
		  crossorigin="anonymous"></script>
		<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
		  crossorigin="anonymous"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
		<script type="text/javascript" src="https://pico-ui.com/assets/vendor/picoui/js/pico-ui.js"></script>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		pico.desk.init({
			apps:{
				items:[{
					accessid:"page-a",
					title:"Page A",
					icon:{
						type:"material",
						class:"people_alt",
					},
					window:{
						url:"./a.html"
					}
				},
				{
					accessid:"page-b",
					title:"Page B",
					icon:{
						type:"material",
						class:"calendar_today",
					},
					window:{
						url:"./b.html"
					}
				}]
			},
			dock:{
				items:["page-a","page-b"]
			}
		});
	</script>
</html>