Grade Sass

Para estilizar a grade você precisar editar arquivos no formato SASS que precisarão ser compilados via compass. O compass é um compilador de arquivos css utilizado para dar maior organização e flexibilidade na escrita dos códigos de estilização.

Abaixo alguns passos para utiliza-lo.

1 - Primeiro você precisar baixar o ruby e instala-lo no seu computador.

2 - Após o ruby instalado agora é a vez de instalar o compass. Abra o seu terminal de preferência, pode ser o powershell ou até a o terminal da sua IDE favorita, e execute o seguinte comando:

Para verificar a instalação obteve êxito, basta inserir o comando abaixo no terminal:

Se houve êxito com a instalação você verá na tela as informações da versão do compass, assim como as informações de licença.

Suporte para skins modelados

Os skins têm uma folha de estilo gerada a partir de modelos Sass e compilada com compass .

Cada um desses Skins devem ter um subdiretório "template" contendo vários arquivos, incluindo aqueles usados ​​para recriar a folha de estilo do skin (skin_styles.css) usando compass. Os arquivos de interesse para um skin customizado estão no diretório template/sass. Você pode baixar esse diretório abaixo a partir do skin de seu interesse:

• Ametista
• Blue
• Default
• Executive
• Green
• Light
• Mac
• Metro
• Multiplo
• Office
• Portal Light
• Red
• Safira
• Uranus
  

Arquivos que você pode editar

• _userSettings.scss - Este arquivo está inicialmente vazio e pode ser editado. Ele deve conter variáveis ​​Sass e declarações de fontes destinadas a substituir as configurações (veja _skinSettings.scss e _base.scss)
• _userStyles.scss - Este arquivo está inicialmente vazio e pode ser editado. Ele deve conter CSS destinado a ser incorporado após os estilos dos arquivos de estilização (veja_skinStyles.scss e _base.scss abaixo), sobrepondo ambos.

Arquivos que não devem ser editados

Os outros arquivos no template/sass não devem ser editados e podem ser ignorados em grande parte, mas sua finalidade está listada aqui:

• skin_styles.scss - Este é o arquivo de inicialização que lista os fragmentos a serem carregados e é executado após a 'compilação do compass' na pasta pai. Não deve haver necessidade de alterar este arquivo, mas você pode fazer isso se quiser adicionar mais fragmentos personalizados.
• _base.scss - Esse arquivo contém todo o CSS básico e os padrões das variáveis ​​suportados na qual seu Skin personalizado se baseia. Este arquivo não deve ser editado.
• _skinSettings.scss - Este arquivo contém variáveis ​​Sass e declarações de fonte para o skin, destinadas a substituir os padrões configurados em _base.scss. Este arquivo não deve ser editado.
• _skinStyles.scss - Esse arquivo contém CSS customizado para o Skin a ser anexado depois disso em _base.scss. Este arquivo não deve ser editado.

Criando um skin personalizado

Um skin personalizado é criado copiando e editando um existente.

Você pode começar a partir de qualquer skin, mas observe que, se quiser realizar alterações generalizadas de cor/fonte, por exemplo, deve considerar a partir das camadas de "Cascatas de Estilo", onde se encontra os valores das variáveis, permitindo alterações que afetam grande parte do skin.

Em outros Skins modelados, como por exemplo Ametista, Safira e Portal Light, onde mais variáveis ​​são customizadas ou substituídas, a alteração do valor de uma variável base não afeta as partes que foram sobrescritas.

Para criar um skin personalizado com base no skin "Default":

• Acesse o diretório do contexto do seu contexto: meucontexto/components/isomorphic/skins/
• Copie o diretório skins/Default (ou skin que deseja copiar) para skins e renomeie com o nome do skin que desejar skins/MySkin.
• Faça o download da pasta template referente ao skin que foi copiado clicando aqui e extraia a pasta "template" no diretório do seu Skin "MySkin".
• Em skins/MySkin/ load_skin.js, localize e substitua instâncias de "Default" por "MySkin" como por exemplo, tendo base utilizando o skin Default:

• Em skins/MySkin/template/sass/_userSettings.scss, substitua $theme_name: 'Default' por: $theme_name: 'MySkin'
• Volte um nível para o diretório /MySkin/template/ e execute 'compass compile'

Personalizando seu Skin

O que editar

Como observado no início deste manual, os arquivos que você pode editar estão no diretório template/sass. Neste diretório, o arquivo _userSettings.scss pode ser editado para personalizar valores de variáveis ​​suportados e _userStyles.scss, para substituir estilos existentes.

Você pode ver as classes CSS que podem ser substituídas em _base.scss.

Você pode ver a lista de variáveis ​​disponíveis em _skinSettings.scss, agrupadas e nomeadas de acordo com os efeitos que elas possuem. Você pode copiar as variáveis ​​que deseja sobrescrever no seu _userSettings.scss, alterar seus valores e executar a compilação com o compass.

Exemplo de edição

Tente adicionar essas configurações ao _userSettings.scss :

Logo após a edição do arquivo execute "compass compile", como no exemplo abaixo:

O terminal retornará um comando, informando que o arquivo skin_style.scss foi atualizado com as suas alterações. Isto compila os vários fragmentos do diretório template/sass (listado em skin_styles.scss) para produzir a folha de estilo da skin, em skins/MySkin / skin_styles.css.

Após fazer as alterações e executar a compilação do compass, limpe o cache do navegador antes de atualizar sua página, para garantir que o antigo skin_styles.css não esteja armazenado em cache.

Mantendo o skin que você editou

Como observado anteriormente, alguns dos arquivos no template/sass não devem ser editados. Isto porque, podem ocorrer atualizações com correções ou melhorias para nossos skins, quando isso acontecer, você pode manter seus skins sem sobrepor qualquer uma das suas personalizações.

____________________________________________________________________________

Caso este tópico não tenha comentário satisfatório, envie e-mail para documentacao@softwell.com.br