UI/UX Design Framework

Este é um framework de UI/UX que facilita a criação de interfaces responsivas e modernas.

Instalação

npm install uiux-design-framework

import './css/base.css';

import './css/component.css';

import './css/responsive.css';

import './js/component.js';

Framework UI/UX Design O "UI/UX Design" é um framework front-end desenvolvido com CSS e JavaScript para facilitar a criação de interfaces de usuário elegantes e responsivas. O objetivo é oferecer uma solução flexível e simples de modificar, mesmo para aqueles com pouco conhecimento técnico. Este framework busca superar as principais limitações de outros frameworks do mercado, proporcionando maior controle sobre a personalização sem complexidade excessiva. Dentre as principais diferenças estão: • Fácil personalização através de classes e IDs pré-definidos. • Responsividade integrada. • Componentização flexível para diferentes dispositivos e resoluções de tela. As modificações serão feitas a partir de propriedades “Styles” que ira ser chamada pelo ‘HTML’. O "UI/UX Design" é um framework projetado para tornar o desenvolvimento front-end mais ágil e acessível. Seu foco em responsividade, customização intuitiva e componentes reutilizáveis garante uma experiência de usuário moderna e eficiente. Este documentário oferece uma visão geral dos principais elementos do framework, permitindo que você comece a implementá-lo imediatamente.

Documentário

Selector:

Base.css • body:Da uma margem de 5% nas laterais da pagina; • header: Deve ser utilizado quando se pretende criar um cabeçalho de uma pagina, ele aplica o display flex, e organiza eles conforme deve ser necessário;

• nav: Utilizado geralmente par link, ou outros conteúdos que necessite de um melhor controlo e gestão de um site responsivo, com ele deve ser combinado dentro da tag a direção que se pretende. • Ex: :os conteúdos dentro da nav serão organizados seguindo a direção de colunas, uma em baixo de outra • Ex2: os conteúdos serão organizados em linha, garantido uma boa responsividade • footer: centraliza o texto e adiciona um preenchimento automático nele;

ID:

Base.css • name: deve ser usados apenas quando se pretende destacar o nome da empresa que ira servir como o logotipo( caso não haja);

• logo: Em caso de utilizar uma imagem em vez de nome do site, ele aplica o tamanho máximo e minimo para esta imagem, e ira servir como o logotipo do site, o tamanho que ele ira definir para a imagem e de 58px; O logotipo deve ser usado apenas para a customização para sites de computadores, em smatphone o logo ira receber um ( display:”none”) através de uma media screen definida para tamanho máximo de 600px Component: • menu-hamburguer: cria o corpo inicial de um menu hambúrguer, geralmente arredondada, as cores devem ser combinadas em um styles dentro da tag <div id=”menu-content” style=”background: escolha a cor(white, black, etc)”>

Classes:

Base.css • Background-black: aplica o background modo dark e a cor dos textos em brancos; • Background-white: aplica o background modo light e a cor dos textos em preto;

Componente.css • menu-hamburguer: cria as 3 barra de um menu hambúrguer, deve ser colocada em 3 tag (span ou div), dentro da div que contem o menu-content, da mesma forma que escolheste a cor para o menu-container podes fazer o mesmo com o menu-content ; Ex.:

• menu-pointer: adiciona 3 pontos, para combinar com as três barras, para dar um estilo diferente e quase único. Ex.

• menu-square: adiciona três quadrados pequenos que fazem uma animação de rotação de 360 grau infinitamente. Ex.:

• button1: um estilo único com transição de cores por gradiante que sai da esquerda para direita; • button2: um estilo único com transição de cores por gradiante espetaculares, que sai do centro para as laterais; • icon-user: utilizado para criar um componente de ícone de pessoa, geralmente para exibir conta do usuário, definições e configurações extras, deve ser colocado dentro de uma div. Ex.: • icon-user2: cria o ícone de usuário de cor branca • icon-facebook: cria um ícone do facebook de cor preta. Ex.: Outras formas de uso com links: Neste Segundo exemplo o ícone do facebook sera um link direcionado por imagem, que ira levar para outra pagina, e podes fazer isso com todos os outros ícones para redes sócias. • icon-whatsapp: cria um ícone do whatsapp de cor preta. • icon-instagram: cria o ícone do instagram de cor preta. • icon-rede-x: cria o ícone da antiga rede twitter, denominada como rede X. Todos os ícones das redes sócias tem o modelo do ícone de cor, para os utilizar deve ser chamado o nome da classe, depois o índice 2 Ex.:

Podes fazer isso com os restantes ícones de redes, veja outro exemplo:

• icone-notification: cria o ícone de lembrete de notificações. ex.: • text-writer: cria o efeito de digitação’ ex.: FrameWork UI/UX

Responsive.css • flex-column: organiza os itens em coluna; • flex-wrap: organiza os itens em linha, para se ajustar de forma automática conforme o tamanho dos itens; • flex-item: da uma margem de 5px no elemento e um preenchimento (padding) de 10px • grid: organiza os itens em grelha, ideial para criar uma galeria de imagens, ou expor vários itens, para que ajusta a foto automaticamente conforme o seu tamanho. • grid-item: da um preenchimento (padding) de 5px ao elemento;