@morph-ui/core
Version:
Morph es un sistema de diseño web hecho en CSS que permite desarrollar componentes para Interfaces Gráficas de Usuario en la Web. Asi mismo, permite hacerlo sin depender de ningun framework de forma exclusiva en JS.
132 lines (128 loc) • 4.82 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400" rel="stylesheet">
<meta charset="UTF-8">
<meta name="description"
content="Morph es un sistema de diseño para crear Interfaces Gráficas de Usuario (GUI - Graphic User Interface) de la manera más sencilla posible y en base a estandares web.">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="Estefano Castañeda Bello">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="cache-control" content="no-cache" />
<title>Morph 2.0</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-111529449-1">
</script>
<link rel="stylesheet" href="https://morph.pe/morph-2.0.3.css">
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-111529449-1');
</script>
</head>
<body>
<div class="flex">
<div class="row">
<div class="twelve padding-24">
<div class="row">
<div class="six">
<div class="control-box">
<label for="">Description</label>
<select name="" id="" class="margin-bottom-12">
<option value="">
Option
</option>
</select>
<label for="">Description</label>
<input type="text" class="margin-bottom-12" placeholder="placeholder">
<label for="">Description</label>
<textarea name="" id="" cols="30" rows="10" placeholder="placeholder"></textarea>
</div>
<div class="control-box error">
<div class="control-checkbox">
<input type="checkbox" checked />
<label for="">Option</label>
</div>
<div class="control-message">
Error with checkbox
</div>
</div>
<div class="control-box">
<div class="control-checkbox">
<input type="checkbox" />
<label for="">Option</label>
</div>
</div>
<div class="control-box">
<div class="control-checkbox">
<input type="radio" name="option" checked />
<label for="">Option</label>
</div>
</div>
<div class="control-box error">
<div class="control-checkbox">
<input type="radio" name="option" />
<label for="">Option</label>
</div>
</div>
<div class="control-box">
<label for="">Option</label>
<div class="control-number">
<button class="icon tiny">expand_less</button>
<input type="number" />
<button class="icon tiny">expand_more</button>
</div>
<div class="control-message">
write a quantity
</div>
</div>
<div class="control-box error">
<label for="">Option</label>
<div class="control-number">
<button class="icon tiny">expand_less</button>
<input type="number" />
<button class="icon tiny">expand_more</button>
</div>
<div class="control-message">
Error with number
</div>
</div>
<div class="control-box error">
<label for="">Option</label>
<div class="control-number">
<button class="icon tiny">expand_less</button>
<button class="icon tiny">expand_more</button>
<input type="number" class="left" />
</div>
<div class="control-message">
Error with number
</div>
</div>
<div class="control-box ">
<label for="">Option</label>
<div class="control-number">
<input type="number" class="left" />
<button class="icon tiny">expand_less</button>
<button class="icon tiny">expand_more</button>
</div>
<div class="control-message">
Error with number
</div>
</div>
<button class="tiny">Hola</button>
<button class="small">Hola</button>
<button>Hola</button>
<button class="big">Hola</button>
</div>
<div class="six"></div>
</div>
</div>
</div>
<div class="row">
<div class="six text-center">
</div>
</div>
</div>
</body>
</html>