Ainda não conhece o ElementaryOS? Gostaria de saber mais sobre a AppCenter? Com mais de 75 aplicativos GTK3 nativos, o AppCenter continua a preencher experiências de qualidade de várias dezenas de desenvolvedores. Muitos começaram a construir sua própria marca em torno de suas aplicações ou conta de desenvolvedor, o que é incrível! Hoje vou ensinar como usar a folha de estilos do Elementary e outras convenções da plataforma para fortalecer a marca e o design de sua própria aplicação.
Classes de Estilo
A maneira mais rápida de refinar o visual do seu aplicativo é usar as classes de estilo incorporadas a folha de estilos do elementary. Há toneladas destes para diferentes usos, como back-buttons, tipografia, flat-headers, etc.
Constantes para classes de estilo Granite e Gtk estão disponíveis no Valadoc, mas aqui estão alguns dos meus favoritos e mais úteis:
- .back para utilizar back-buttons, , como em Configurações do Sistema e AppCenter
- .h1- h2 para heading text labels
- .flat, útil para janelas flat-styled ou headerbars
- .default-decoration para slim-headerbars, como no Terminal
- .rounded para rounded-bottom-corners nas janelas, como Dippi ou Harvey
Se existir uma constante de estilo, sempre é recomendável usá-la em vez de configurar uma classe manualmente. Isso garante que você receberá avisos se a constante for obsoleta, substituída ou removida. Supondo que seu aplicativo esteja no Vala (o que recomendamos para o AppCenter, mas não é necessário!), Você adicionaria uma constante de estilo como:
your_widget.get_style_context ().add_class (Gtk.STYLE_CLASS_FLAT);
Ou se não há uma constante de estilo incorporada, basta configurar uma classe com:
your_widget.get_style_context ().add_class ("rounded");
Você pode ler mais no Valadoc, ou verificá-los em ação no Granite Demo. Outras linguagens devem ser semelhantes; Procure adicionar uma classe ao contexto de estilo Gtk.
As classes de estilo funcionam exatamente como você esperaria com o CSS: se você enviar uma folha de estilo personalizada, você pode adicionar um estilo personalizado para qualquer classe incorporada, ou mesmo adicionar o seu próprio estilo. Combinando estes com cores específicas no seu aplicativo, pode percorrer um longo caminho para fazê-lo se destacar da multidão de maneira confotável no ambiente do elementary.
Identidade de Cores
Uma mudança fácil mas impressionante que você pode fazer para o seu aplicativo é usar identidade de cores. A folha de estilos do elementary usa uma série de variáveis para modelar a UI, incluindo o header-bar e as accent-colors em todo o aplicativo. Por padrão, os header-bars são neutros e a cor é elementary-blue. Mas você pode usar isso para definir a identidade de cor da sua apliacação.
Para estilizar um cabeçalho, defina as variáveis @colorPrimary, @textColorPrimary e @textColorPrimaryShadow no seu CSS. Você pode ver as variáveis na folha de estilos do elementary no GitHub.
Para a accent-color, basta definir @colorAccent e será usado por linhas de foco, seleção de texto, etc. Você pode ver um exemplo de configuração no Dippi pra ser mais claro.
Você também pode usar o CSS para configurar ou alterar outras cores na sua UI, como as legendas na captura de tela Snaptastic acima. Não se deixe levar demais, mas um bom toque de cor de acento pode parecer ótimo.
Notícias Relacionadas
Rede peer-to-peer
Instale o Dash Core no Ubuntu, Fedora, Debian e outras distribuições Linux com Flatpak
Este guia completo ensina como instalar o Dash Core em distribuições Linux como Ubuntu, Fedora, Debian e outras, utilizando o Flatpak. Saiba como configurar, instalar e rodar o aplicativo de forma simples e segura.
Letras de músicas
Instale o LRCMake no Ubuntu, Fedora, Debian e outras distribuições Linux com Flatpak
Este guia completo ensina como instalar o LRCMake em distribuições Linux como Ubuntu, Fedora, Debian e outras, utilizando o Flatpak. Saiba como configurar, instalar e rodar o aplicativo de forma simples e segura.
Ícones GResource
Às vezes, você pode querer enviar um ícone que não esteja no conjunto do elementary, ou você deseja recolorir um ícone para combinar melhor seu aplicativo. Em vez de instalar esses ícones em todo o sistema, é melhor usar GResource.
Isso implica criar um arquivo XML de recurso simples, carregando o recurso como um fallback-icon configurado em seu aplicativo. Informando ao compilador para compilá-lo junto ao seu aplicativo. Confira um exemplo gresource.xml do Dippi, juntamente com “configurá-lo como o tema do fallback-icon em Vala”. Para obter um exemplo de compilação dos recursos, verifique o arquivo meson.build.
Diferentes linguagens e build-systems diferentes, obviamente, diferem, mas a documentação e/ou exemplos não devem ser muito difíceis de encontrar. O GNOME Developer Docs é um bom lugar para começar.
Tipografia
Usar as classes de estilo .h1-.h4 GTK acima mencionadas para os títulos é uma das maneiras mais rápidas de adicionar algumas tipografias ricas ao seu aplicativo sendo um ótimo lugar para começar. Essas classes garantem que você não está codificando um estilo exato, mas está marcando a importância de um título e deixando a folha de estilo do sistema assumir o controle com o tipo de letra, tamanho e altura/largura exatas.
Você também pode definir diretamente um tipo de letra e cor na sua UI com CSS, como seria esperarado. Para cores, tenha em mente as diretrizes de contraste WCAG (você pode usar o Harvey no AppCenter para verificar!).
Você também pode definir um tamanho de fonte em CSS, mas não use unidades px: os usuários podem definir um tamanho de texto maior ou menor que o padrão por motivos de acessibilidade. É sempre uma boa idéia testar com configurações de acessibilidade, usar unidades de pt ou em garante que sua fonte seja dimensionada para corresponder às configurações do usuário. Dirija-se às Configurações do sistema ? Acesso universal ? Display para experimentar diferentes tamanhos de texto.
Uma área menos explorada de identidade de aplicação está usando uma fonte personalizada no “chrome” ou UI do seu aplicativo. Snaptastic novamente usa isso, mas há algumas coisas a ter em mente:
- Use uma fonte pré-instalada ou dependa de uma fonte se estiver nos repositórios do sistema operacional. Você precisa ter certeza de que a fonte aparecerá nos sistemas dos usuários, e não apenas quando estiver instalada no seu! Verifique o código-fonte da Snaptastic para obter um exemplo de “dependendo de uma fonte“.
- Considere a localização. Nem todas as fontes suportam todos os idiomas e caracteres especiais, portanto, seu aplicativo pode parecer estranho quando traduzido. Escolha uma fonte com ampla cobertura de caracteres e experimente o seu aplicativo com algumas línguas diferentes para ver como isso isto irá se comportar.
- Evite fontes personalizadas para conteúdo. A ferramenta de captura de tela no ElementaryOS possui um recurso de “esconder texto” que substitui temporariamente a fonte do sistema por uma fonte “redigida”. Isso não funcionará em qualquer lugar que você definir uma fonte personalizada, então tenha cuidado ao lidar com o conteúdo do usuário e qualquer informação potencialmente sensível.
* * * *
Usando estas dicas, você pode ajudar seu aplicativo a se destacar, reforçando sua identidade e design. Lembre-se, o design nem sempre é tudo que seu aplicativo precisa, no entanto! Use esses métodos com inteligência e propósito. Nem todos os aplicativos precisam ser super customizados e pequenos toques vão por um longo caminho.
* * * *
Agradeço novamente a todos os desenvolvedores que fazem aplicativos para o AppCenter, todos os que compraram um aplicativo no AppCenter, nossos apoiadores no Bountysource e Patreon, e aqueles que compraram uma cópia do ElementaryOS ou do merchandise de nossa loja. Cada contribuição ajuda a tornar tudo isso possível, e nós não estaríamos aqui sem você! Se você quiser ajudar a melhorar o sistema operacional elementar, não hesite em se envolver!
