Biblioteca de componentes de materiales CSS pura-Matter. CSS

Vista prévia

Descripción

Matter. CSS es una colección de materiales de diseño de material inspirado en CSS para la web moderna & diseño móvil.

Components included:

• Botón
• Casilla
• Botón de radio
• Interruptor de palanca
• Control deslizante de rango
• Barra de progreso
• Campo de texto
• Descripción
• Y más …

Funcionamiento

Descargue e incluya el Matter. CSS en la Página Web.

<link rel="stylesheet" href="matter.css">

El marcado.

<a class="title" href="https://codepen.io/finnhvman/pen/MQyJxV" target="_top">Botón - Contained</a>
<div><button class="pure-material-button-contained">Contained</button></div>
<div><button class="pure-material-button-contained" disabled>Contained</button></div>

<a class="title" href="https://codepen.io/finnhvman/pen/GYaWdV" target="_top">Botón - Outlined</a>
<div><button class="pure-material-button-outlined">Outlined</button></div>
<div><button class="pure-material-button-outlined" disabled>Outlined</button></div>

<a class="title" href="https://codepen.io/finnhvman/pen/YeXwNY" target="_top">Botón - Text</a>
<div><button class="pure-material-button-text">Text</button></div>
<div><button class="pure-material-button-text" disabled>Text</button></div>

<div class="checkboxes">

<label class="pure-material-checkbox">



<input type="checkbox">



<span>Unchecked</span>

</label>

<label class="pure-material-checkbox">



<input type="checkbox" checked>



<span>Checked</span>

</label>

<label class="pure-material-checkbox">



<input type="checkbox">



<span>Indeterminate</span>

</label>
</div>
<div class="checkboxes">

<label class="pure-material-checkbox">



<input type="checkbox" disabled>



<span>Unchecked</span>

</label>

<label class="pure-material-checkbox">



<input type="checkbox" checked disabled>



<span>Checked</span>

</label>

<label class="pure-material-checkbox">



<input type="checkbox" disabled>



<span>Indeterminate</span>

</label>
</div>

<div class="radios">

<label class="pure-material-radio">



<input type="radio" name="group-enabled">



<span>Unchecked</span>

</label>

<label class="pure-material-radio">



<input type="radio" name="group-enabled" checked>



<span>Checked</span>

</label>
</div>
<div class="radios">

<label class="pure-material-radio">



<input type="radio" name="group-disabled" disabled>



<span>Unchecked</span>

</label>

<label class="pure-material-radio">



<input type="radio" name="group-disabled" checked disabled>



<span>Checked</span>

</label>
</div>

<div class="switches">

<label class="pure-material-switch">



<input type="checkbox">



<span>Off</span>

</label>

<br/>

<label class="pure-material-switch">



<input type="checkbox" checked>



<span>On</span>

</label>
</div>
<div class="switches">

<label class="pure-material-switch">



<input type="checkbox" disabled>



<span>Off</span>

</label>

<br/>

<label class="pure-material-switch">



<input type="checkbox" checked disabled>



<span>On</span>

</label>
</div>

<div>

<label class="pure-material-slider">



<input type="range" min="0" max="100">



<span>Slider</span>

</label>
</div>
<div>

<label class="pure-material-slider">



<input type="range" min="0" max="100" disabled>



<span>Slider</span>

</label>
</div>

<div>

<progress class="pure-material-progress-circular"></progress>
</div>

<div class="progresses">

<progress class="pure-material-progress-linear" value="0" max="100"></progress>

<progress class="pure-material-progress-linear"></progress>
</div>

<div class="textfields">

<label class="pure-material-textfield-filled">



<input placeholder=" ">



<span>Empty</span>

</label>

<label class="pure-material-textfield-filled">



<input placeholder=" " value="Some text">



<span>Non-empty</span>

</label>

<label class="pure-material-textfield-filled">



<textarea placeholder=" "></textarea>



<span>Empty Textarea</span>

</label>

<label class="pure-material-textfield-filled">



<textarea placeholder=" ">Some text</textarea>



<span>Non-empty Textarea</span>

</label>
</div>

Previews:

Registro de cambios

v0.2.0 (03/27/2019)

• Añadir: sistema de color (primario, secundario, error, ADVERTENCIA, éxito)
• Añadir: enlace (estilo para la etiqueta de anclaje)
• Añadir: tipografía (H1 – H6, Overline, subtítulos, y más)
• Add: Unelevated Botón (shadowless Contained Botón)
• Change: Botóns – Remove forced uppercase (96c9a5c)
• Cambio: componentes – introducir variables CSS intermedias para los colores del tema (1cb7650)
• Cambiar: cambiar – usar el color de la superficie como color del pulgar