在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:Wakkos/Wakkos-CSS-Framework开源软件地址:https://github.com/Wakkos/Wakkos-CSS-Framework开源编程语言:CSS 97.8%开源软件介绍:Wakkos SASS frameworkConfiguración:settings.scssConfigura primeramente el archivo Pasa a configurar las variables y diferentes opciones de la atmósfera de diseño, donde podremos configurar colores, fuentes, tamaños, etc... BreakpointsLos breakpoints los he colocado en EM en vez de pixels para que el diseño no se vea afectado por acciones como el ZOOM. Para más info leer a Chris Coyer y a Lyza Gardner con argumentos al respecto. $breakpoints: (
'small' : 48em,
'medium' : 56.25em,
'large' : 68.75em,
) !default; NomenclaturaLa convención de nombre sigue este patrón: .bloque{}
.bloque__elemento{}
.bloque--modificador{}
Una analogía del funcionamiento de las clases BEM sería: .persona{}
.persona--mujer{}
.persona__mano{}
.persona__mano--izquierda{}
.persona__mano--derecha{} Para más info podéis leer mi traducción de la guía de CSS de Harry Roberts a la cual me he ajustado en su mayoría para crear este framework. También tenemos espacio entre secciones para que sea fácil de ubicar al ver el
archivo compilado OrganizaciónLos archivos de SCSS están todos dentro de la carpeta
El archivo A su vez están todas las secciones separadas unas de las otras para ubicar rápidamente cuando echamos un vistazo. El archivo CodekitIré adaptándolo a Codekit pero sin que afecte a los que no lo usan. De momento si
usas Codekit, incluyo el archivo GulpUna alternativa a Codekit y que además permite su uso en otros sistemas operativos es Gulp. InstalaciónSe necesita tener instalado Nodejs (https://nodejs.org/en/) y Gulp:
Una vez instalados los requisitos anteriores se ejecuta:
Actualizar dependenciasLas dependencias están continuamente actualizándose, una buen método para automatizar esta tarea es utilizar npm install -g npm-check-updates Ahora ejecutamos en el terminal el siguiente comando para actualizar todas las dependencias. ncu El terminal nos informará de las dependencias que se han actualizado. autoprefixer ^6.0.3 → ^6.1.2
gulp-minify-css ^1.2.1 → ^1.2.2 Configuración y usoPara configurar gulp podéis entrar a
Tarea autoprefixer (true o false): tras compilar el Nota: todas las tareas se pueden combinar como se desee. Para hacer que gulp compile nuestro PatronesLo trabajaré en otra rama, ya que ahora mismo no provee ninguna ventaja. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论