Un framework de CSS construido con Stylus. Puedes tomarlo como base para crear nuevos proyectos. Si has creado algún mixin o quieres proponer mejoras, envía un pull request ;)
tylus requiere instalar Nodejs.
Se incluye un archivo de Gulp para ejecutar Stylus. Para instalarlo ejecuta:
npm install -g gulp
npm install
Y para ejecutarlo tan solo haz:
gulp
Todos los archivos de Stylus están en la carpeta Stylus, organizados de la siguiente forma:
index.styl
base/
base.styl
fonts.styl
animations.styl
utility.styl
mixins.styl
variables.styl
mixins/
grid.styl
triangles.styl
otros mixins...
components/
buttons.styl
grid.styl
icons.styl
otros componentes...
lib/
normalize.styl
otros archivos externos...
En la carpeta assets se guardarán todos los assets necesarios (imágenes, fuentes, etc.). El CSS resultante también se almacena en ese directorio.
En este archivo tan solo se hacen @import a los archivos necesarios. Se trata de hacerlo lo más modular y reusable posible por lo que cada cosa estará en un archivo. Si en un futuro proyecto no necesitas algunos de los componentes, tan solo comenta o elimina los @import para que no se incluyan en el CSS final.
Lo ideal es que todo se pueda configurar desde aquí. Tipografías, colores principales, tamaños, medidas de las mediaqueries, etc.
Cuando hagas un módulo crea variables de configuración iniciales, pero con el operador de asignación condicional:
$iconFontFamily ?= 'icomoon'
Así podrá ser sobreescrito desde el archivo de variables.