Herramientas de usuario

Herramientas del sitio


clase:daw:diw:1eval:tema02

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión
Revisión previa
clase:daw:diw:1eval:tema02 [2023/10/03 14:07]
admin [Estructura de ficheros]
clase:daw:diw:1eval:tema02 [2025/03/24 12:54] (actual)
admin [Reset CSS]
Línea 5: Línea 5:
  
 Mas información: Mas información:
-  * [[https://alligator.io/css/css-grid-layout-grid-areas/|CSS Grid Layout: Grid Areas]]+  * [[https://css-tricks.com/almanac/properties/g/grid-template-areas/|grid-template-areas]] 
 +  * [[https://www.smashingmagazine.com/understanding-css-grid-template-areas/|Understanding CSS Grid: Grid Template Areas]]
  
 <sxh html> <sxh html>
Línea 65: Línea 66:
  
 Incluir en todos los proyectos los siguientes CSS: Incluir en todos los proyectos los siguientes CSS:
-  * [[http://necolas.github.io/normalize.css/|Normalize.css]]+  * [[https://github.com/sindresorhus/modern-normalize|Modern Normalize]]: Antes se usaba [[http://necolas.github.io/normalize.css/|Normalize.css]]
   * [[http://meyerweb.com/eric/tools/css/reset/|Eric Meyer’s “Reset CSS” 2.0]]   * [[http://meyerweb.com/eric/tools/css/reset/|Eric Meyer’s “Reset CSS” 2.0]]
  
Línea 164: Línea 165:
   * Transformar de SASS a CSS   * Transformar de SASS a CSS
  
-  sass  -o ./main.css ./main.scss+  sass  ./main.scss ./main.css
  
  
   * Transformas de SASS a CSS simpre que cambie el CSS   * Transformas de SASS a CSS simpre que cambie el CSS
  
-  sass  --watch -o ./main.css ./main.scss+  sass  --watch ./main.scss ./main.css
  
   * Se pueden juntar el SASS de un fichero en otro para así que se genere un único CSS con lo que se carga la página mas rápida.   * Se pueden juntar el SASS de un fichero en otro para así que se genere un único CSS con lo que se carga la página mas rápida.
Línea 386: Línea 387:
 ===== Estructura de ficheros ===== ===== Estructura de ficheros =====
 Siguiente la metodología de BEM , se debe seguir la siguiente estructura de carpetas para almacenar el código SASS Siguiente la metodología de BEM , se debe seguir la siguiente estructura de carpetas para almacenar el código SASS
 +  /css 
 +     main.css
   /scss   /scss
      /01_utilities      /01_utilities
-         _variables.scss+         _css-variables.scss 
 +         _sass-variables.scss
          _functions.scss          _functions.scss
          _mixins.scss          _mixins.scss
 +         _animations.scss
     /02_base     /02_base
         _override.scss         _override.scss
Línea 408: Línea 412:
  
   * /01_utilities   * /01_utilities
-    * _variables.scss: Variables como por ejemplo los colores o tamaños de margen ,etc.+    * _css-variables.scss: Variables **css** como por ejemplo los colores o tamaños de margen ,etc. 
 +    * _sass-variables.scss: Variables de **SASS** como por ejemplo los colores o tamaños de margen ,etc
     * _functions.scss: Funciones de SASS     * _functions.scss: Funciones de SASS
     * _mixins.scss: Mixins de SASS     * _mixins.scss: Mixins de SASS
 +    * _animations.scss: Los Keyframes de las [[clase:daw:diw:2eval:tema08#animaciones1|animaciones]].
   * /02_base   * /02_base
     *  _override.scss: Es para sobreescribir CSS de alguna librería que se use     *  _override.scss: Es para sobreescribir CSS de alguna librería que se use
clase/daw/diw/1eval/tema02.1696334829.txt.gz · Última modificación: 2023/10/03 14:07 por admin