Framework de Fernando

Bienvenidos a mi primer Framework soy Fernando Ortega .He creado un sistema gráfico y web de dimensiones reducidas, surgido del ejercicio final de la asignatura “Gráfica interactiva, usabilidad” con nuestra profesora Lourdes, en la especialidad de diseño gráfico en la Escuela superior de diseño de Madrid. A continuación, podrás descargar el fichero CSS, las tipografías usadas en el sistema de diseño y las imágenes.

Descargar estilos
Descargar tipografías
Descargar imagenes

Componentes

Rejilla


Esta retícula ofrece versatilidad para tu web, es sencilla, diseñada unicamente con 9 columnas y sin filas, es perfecta para colocar contenido. Lo mejor de todo es que no necesitas ajustarla a ninguna pantalla ya que su ajuste, es automático.



                            <div class="reticula">
                            <div class="grid-item"></div>
                            <div class="grid-item"></div>
                            <div class="grid-item"></div>
                            <div class="grid-item"></div>
                            <div class="grid-item"></div>
                            <div class="grid-item"></div>
                            <div class="grid-item"></div>
                            <div class="grid-item"></div>
                            <div class="grid-item"></div>
                        </div>

Botones y variantes


Como puedes ver, he preparado 5 variantes de tamaño de botón, esto es ideal ya que según el dispositivo donde quieras que se vea tu web, podrás escoger que tamaño le puede podra venir mejor. Es sencillo, coges el código del boton selccionado, es encontes donde podras cambiarle el contenido y color 



                            <div class="caja-botones">
                        <div class="caja-botones">
                            <button class="boton-desktop" href="#">button</button>
                            <button class="boton-desktop-disable" href="#">button</button>
                        </div>
                        <div class="caja-botones">
                            <button class="boton-desktop-medium" href="#">button</button>
                            <button class="boton-desktop-disable-medium" href="#">button</button>
                        </div>
                        <div class="caja-botones">
                            <button class="boton-desktop-small" href="#">button</button>
                            <button class="boton-desktop-disable-small" href="#">button</button>
                        </div>
                        <div class="caja-botones">
                            <button class="boton-mobile" href="#">button</button>
                            <button class="boton-mobile-disable" href="#">button</button>
                        </div>
                        <div class="caja-botones">
                            <button class="boton-mobile-small" href="#">button</button>
                            <button class="boton-mobile-small-disable" href="#">button</button>
                        </div>
                    </div>

Card


Este es un prototipo de card el cual contiende disintas jerarqías de información. Una imagen, un título que define esa imagen, un texto descriptivo y un botón el cual te puede llevar a cualquier sitio. Además, esta card se adapta a caulquier pantalla


Título

Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam cupiditate deleniti, odit adipisci quasi rem minus soluta non ea sit temporibus repudiandae quo nemo, suscipit sapiente. Quaerat incidunt accusantium perferendis? 


                            <div class="caja-cards">
                        <div class="caja-card">
                            <img src="https://picsum.photos/200" alt="">
                            <div class="texto-card">
                              <h3>Título</h3>
                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam cupiditate deleniti, odit adipisci quasi rem minus
                                soluta non ea sit temporibus repudiandae quo nemo, suscipit sapiente. Quaerat incidunt accusantium perferendis?
                              </p>
                            </div>
                            <button class="boton-desktop">boton</button>
                          </div>
                        </div>
                    </div>

Jerarquía tipográfica


Un breve sistema en el que tu podrás ver y comparar los textos en tu web. Desde un H1 hasta un pequeño párrafo para tu web. El funcionamiento es sencillo, unicamente agrager el código del título o párrafo que quieras usar y poner el texto correspondiente.


Header 1


Header 2


Header 3


Header 4


Header 5

Header 6

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt non maxime tenetur nam qui nihil quae laudantium laborum deserunt omnis, odio rerum soluta quo voluptatibus voluptatem itaque ab fugiat mollitia.


Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure quo sequi debitis, aspernatur reiciendis assumenda quam voluptatum minus excepturi officiis asperiores ex a tempora neque, accusamus quidem temporibus modi deleniti! 


                            <h1>Header 1</h1>
                            <h2>Header 2</h2>
                            <h3>Header 3</h3>
                            <h4>Header 4</h4>
                            <h5>Header 5</h5>
                            <h6>Header 6</h6>
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. /p>
                            <p class="parrafo-small">
                                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                            </p>

Formularios


En la sección de formulario, tienes a tu disposición 2 componentes, el primer componente, es un sistema de automatización de inicio de sesión el cual un usuario ya registrado se le conserva su cuenta y unicamente se activa al pulsar en el botón. Por otro lado, tenemos un formulario de inicio de sesión el cual usuario deberá rellenar para formar parte de la comunidad. El Funcionamiento es sencillo, se deberá agregar el código del componente que deseas añadir y sustituir el texto de relleno por el del pila para tu web.


Nombre aleatorio

Iniciar sesión

Hazte miembro Entra aquí


                            <div class="browse">
                    <img src="https://picsum.photos/200" alt="">
                    <div class="texto-browse">
                        <h5>Nombre aleatorio</h5>
                    </div>
                    <button class="boton-desktop">Browse</button>
                </div>

                <form class="form">
                        <h2 class="form_title"> Iniciar sesión</h2>
                        <p class="form-parrafo">Hazte miembro <a href="#" class="form_link">Entra aquí</a></p>
                        <div class="form-container">
                            <div class="form_group">
                                <label for="name" class="form_label">Nombre:</label>
                                <input type="text" id="name" class="form_input" placeholder=" ">
                                <span class="form_line"></span>
                            </div>
                            <div class="form_group">
                                <label for="user" class="form_label">Usuario:</label>
                                <input type="text" id="user" class="form_input" placeholder=" ">
                                <span class="form_line"></span>
                            </div>
                            <div class="form_group">
                                <label for="password" class="form_label">Contraseña:</label>
                                <input type="text" id="password" class="form_input" placeholder=" ">
                                <span class="form_line"></span>
                            </div>
                            <button class="boton-desktop">Browse</button>
                        </div>
                    </form>

Tabla de datos


A tu disposición una tabla de datos con 5 componentes. Una imagen, un nombre y los respectivos datos del producto y del usuario. Su uso es sencillo, una vez más, copias el código y sustituyes el texto de muestra por el requerido, al igual que cambiar el color y el tamaño de texto. En caso de querer más filas de contenido, unicamente añadir más código del tbody


Img Nombre E-mail Descipción valor Fecha
Nombre mail@gmail.com Texto clave 00.00€ 11-11-1111
Nombre mail@gmail.com Texto clave 00.00€ 11-11-1111
Nombre mail@gmail.com Texto clave 00.00€ 11-11-1111
Nombre mail@gmail.com Texto clave 00.00€ 11-11-1111
Nombre mail@gmail.com Texto clave 00.00€ 11-11-1111
Nombre mail@gmail.com Texto clave 00.00€ 11-11-1111 

                            <table>
                                <thead>
                                  <tr>
                                    <th>Img</th>
                                    <th>Nombre</th>
                                    <th>E-mail</th>
                                    <th>Descipción</th>
                                    <th>valor</th>
                                    <th>Fecha</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <td><img src="https://picsum.photos/200" alt=""></td>
                                    <td>Nombre</td>
                                    <td>mail@gmail.com</td>
                                    <td>Texto clave</td>
                                    <td>00.00€</td>
                                    <td>11-11-1111</td>
                                  </tr>

Redes