Framework CSS

Framework CSS es una librería CSS que permite a los desarrolladores crear fácilmente formularios HTML con estilo. Está diseñado para ser fácil de usar y personalizar, y es compatible con todos los navegadores modernos. La librería se basa en Flexbox y está totalmente responsive, lo que significa que puede adaptarse a cualquier tamaño de pantalla. Además, la librería es compatible con IE11.

Instalación

Puedes instalar Framework CSS utilizando npm:

npm install framework-css-form

Una vez instalado, puedes importar la librería en tu proyecto:

import 'framework-css-form';

// o

import FrameworkCSSForm from 'framework-css-form';

Uso

Para utilizar Framework CSS, necesitas incluir el archivo CSS en tu HTML:

<link rel="stylesheet" href="tu/ruta/a/framework-css-form.css">

Luego, puedes comenzar a utilizar los formularios en tu HTML:

<label for="Nombre">Nombre</label>
 <input type="text" id="Nombre" name="Nombre" placeholder="Nombre">

 <label for="Apellido">Apellido</label>
 <input type="text" id="Apellido" name="Apellido" placeholder="Apellido">

 <label for="Email">Email</label>
 <input type="email" id="Email" name="Email" placeholder="Email">

 <label for="Password">Password</label>
 <input type="password" id="Password" name="Password" placeholder="Password">

 <label for="Teléfono">Teléfono</label>
 <input type="tel" id="Teléfono" name="Teléfono" placeholder="Teléfono">

 <label for="Dirección">Dirección</label>
 <input type="text" id="Dirección" name="Dirección" placeholder="Dirección">

 <label for="Ciudad">Ciudad</label>
 <input type="text" id="Ciudad" name="Ciudad" placeholder="Ciudad">

 <label for="País">País</label>
 <input type="text" id="País" name="País" placeholder="País">

 <label for="Código Postal">Código Postal</label>
 <input type="text" id="Código Postal" name="Código Postal" placeholder="Código Postal">

 <label for="Fecha de Nacimiento">Fecha de Nacimiento</label>
 <input type="date" id="Fecha de Nacimiento" name="Fecha de Nacimiento" placeholder="Fecha de Nacimiento">

 <label for="edafe">Edad</label>
 <input type="number" id="edafe" name="edafe" placeholder="Edad">


<label for="meta">Meta</label>
<input type="range" id="meta" name="meta" placeholder="Meta">

<label for="archivo">Archivo</label>
<input type="file" id="archivo" name="archivo" placeholder="Archivo">

<label for="color">Color</label>
<input type="color" id="color" name="color" placeholder="Color">

<label for="url">Url</label>
<input type="url" id="url" name="url" placeholder="Url">

<label for="semana">Semana</label>
<input type="week" id="semana" name="semana" placeholder="Semana">

<label for="tiempo">Tiempo</label>
<input type="time" id="tiempo" name="tiempo" placeholder="Tiempo">

<label for="datetime-local">Datetime-local</label>
<input type="datetime-local" id="datetime-local" name="datetime-local" placeholder="Datetime-local">

<label for="fecha-tiempo">Fecha-tiempo</label>
<input type="datetime-local" id="fecha-tiempo" name="fecha-tiempo" placeholder="Fecha-tiempo">

<label for="imagen">Imagen</label>
<input type="image" src="/img/lab-217043_1920.jpg" id="image" name="image" placeholder="Image">

<label for="month">Month</label>
<input type="month" id="month" name="month" placeholder="Month">

<label for="genero">Genero</label>
<select id="genero" name="genero">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>


<label for="Estado Civil">example</label>
<select id="Estado Civil" name="Estado Civil">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<label for="example">option 0</label>

<label for="option1">
    <input type="radio" id="option1" name="option1" value="option1">
    option 1
</label>

<label for="option2">
    <input type="radio" id="option2" name="option2" value="option2">
    option 2
</label>


<label for="option3">
    <input type="radio" id="option3" name="option3" value="option3">
    option 3
</label>


 <label for="asunto">Asunto</label>
 <textarea id="asunto" name="asunto" placeholder="Asunto"></textarea>

 <label for="mensaje">Mensaje</label>
 <textarea id="mensaje" name="mensaje" placeholder="Mensaje"></textarea>

<label for="condiciones">
    <input type="checkbox" id="condiciones" name="condiciones" value="condiciones">
    Condiciones
</label>


 <button>Enviar</button>

• [x] Todos los formularios HTML con estilo Framework CSS version 1.0.0
• [ ] Todos los formularios HTML con estilo Framework CSS version 1.0.1
• [ ] Todos los formularios HTML con estilo Framework CSS version 1.0.2

[!NOTE] Aun me queda por pulir algunas cosas, pero ya está listo para usar, lo dejaré como un proyecto de ejemplo, para que puedas ver cómo funcionan los formularios con estilo Framework CSS, también lo puedes ver y descargar en el siguiente enlace:

https://github.com/DcastrGD/Framework-CSS-Form https://npmjs.com/package/framework-css-form

Formularios HTML con estilo Framework CSS version 1.0.0

Formularios HTML con estilo Framework CSS version 1.0.1

[!TIP] Se puede modificar el propio archivo CSS para que se ajuste a tus necesidades, puedes ver el archivo CSS en el siguiente enlace: src/framework-form.scss || dist/framework-form.css