Hoje eu gostaria de falar sobre algo que encontrei quando estava procurando informações sobre integração javascript com um projeto com o qual estou trabalhando. Trata-se do MoreCSS. Um jeito simples de integrar os elementos javascripts mais comuns em uma página web.

“Imagine que criar popups, tab menus ou tooltips pode ser tão fácil e confortável quanto escrever alguns estilos em CSS…” (É o que a página do projeto diz para capturar os seus olhos…)

Isto é MoreCSS

Basicamente, você só precisa usar dois arquivos: o primeiro é o ‘morecss.js’, que é a Biblioteca Javascript Orientada a Design. O segundo é o seu arquivo CSS, com o código CSS especial.

Veja como funciona:

Criando popups:

a:active {

  target: popup;

  target-width: 640px;

  target-height: 480p;

  target-position: center middle;

}

Aplicando hifenização automática:

p.myClass {

  hyphenation: english;

  hyphenation-restrict: large-words;

}

Criando tooltips:

a {

  tooltip: title;

  tooltip-class: MyTooltipStyles;

}

Estilo de lista avançado:

ul li {

  list-type-color: #65C827;

  list-type-char: >>;

}

Estilo de opacidade crows-browser:

img#myImage:hover {

  opacity: 0.5;

}

img#myImage:leave {

  opacity: 1;

}

Algumas coisas que você precisa saber:

• Não é necessário aprender nenhuma nova sintaxe. Nenhuma habilidade de programação é necessária.
• Pequeno core script de 6 KB (com compressão GZIP e 12 KB sem compressão)
• Compatibilidade cross-browser para Internet Explorer 6+, Firefox 2+, Opera 9+, Safari 2+ e mais
• W3C CSS válido
• Plugin interface

Página do projeto:

http://yellowgreen.de/morecss

Endereço para download:

http://morecss.yellowgreen.de/documentation/information/downloads/

Elementos da sintaxe:

A sintaxe do MoreCSS é muito similar ao CSS real, mas com algumas limitações em função de requisitos de perfomance. Mas MoreCSS tem também alguns elmentos especiais de sintaxe para funções avançadas.

Propriedades

Uma vez instalado o MoreCSS você pode utilizar as propriedades da mesma forma que usa as propriedades de um CSS normal.

Como isso funciona (um pouco mais)

MoreCSS roda automaticamente no carregamento da página e aplica as propriedades escritas na folha de estilo externa para os elementos especificados. Você não precisa configurar ou codificar coisa alguma.

Instalação

Apenas inclua MoreCSS.js e a folha de estilo externa no cabeçalho da sua página. Certifique-se a ordem de inclusão é primeiro a folha de estilo e depois o javascript MoreCSS.js e por último os plugins (caso haja).

Divirta-se com MoreCSS.

Até mais!