https://github.com/salazarr-js/coderhouse-sass-framework
Creación de framework propio con SASS
https://github.com/salazarr-js/coderhouse-sass-framework
css dark-mode dark-theme parcel sass sass-framework sass-mixins
Last synced: 11 months ago
JSON representation
Creación de framework propio con SASS
- Host: GitHub
- URL: https://github.com/salazarr-js/coderhouse-sass-framework
- Owner: salazarr-js
- Created: 2023-01-18T21:04:58.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-11T22:17:37.000Z (over 3 years ago)
- Last Synced: 2025-06-25T03:43:19.074Z (11 months ago)
- Topics: css, dark-mode, dark-theme, parcel, sass, sass-framework, sass-mixins
- Language: SCSS
- Homepage: https://coderhouse-sass-framework.vercel.app
- Size: 6.04 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Coderhouse SASS Framework
Creación de framework propio con SASS
## Comandos
```sh
npm install # Instala todas las dependencias del proyecto
npm run dev # Inicia servidor de desarrollo con `Hot Reloading`
npm run build # Crea una version minificada lista para produccion en la carperta `dist/`
```
## Variables `CSS` disponibles
```scss
:root {
// FONT
--coder-font-primary: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--coder-font-secondary: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--coder-font-size-base: 16px;
--coder-font-weight-base: 400;
--coder-line-height-base: 1.5;
// COLORS
--coder-body-bg-color: #f1f5f9
--coder-body-text-color: #64748b;
--coder-heading-text-color: #334155;
--coder-color-primary: #3b82f6;
--coder-color-primary-hover: #60a5fa;
--coder-color-primary-contrast: #eff6ff;
--coder-color-secondary: #64748b;
--coder-color-secondary-hover: #94a3b8;
--coder-color-secondary-contrast: #f8fafc;
--coder-color-focus: #94a3b8;
--coder-shadow-color: 51 65 85;
// HEADER
--coder-header-bg-color: #f8fafc;
--coder-header-border-color: #e2e8f0;
// HERO
--coder-hero-text-color: #f1f5f9;
--coder-hero-gradient-start: #334155;
--coder-hero-gradient-end: #0f172a;
// FOOTER
--coder-footer-bg-color: #e2e8f0;
--coder-footer-text-color: #64748b;
// ACCORDIONS
--coder-accordion-title-color: #475569;
--coder-accordion-title-bg: #f8fafc;
--coder-accordion-title-hover-bg: #f1f5f9;
--coder-accordion-title-border: #e2e8f0;
--coder-accordion-content-bg: #FFFFFF;
// BUTTONS
--coder-btn-radius: 8px;
// CARDS
--coder-card-bg: #FFFFFF;
--coder-card-radius: 12px;
--coder-card-border: #e2e8f0;
// INPUTS
--coder-input-bg-color: #FFFFFF;
--coder-input-text-color: #64748b;
--coder-input-border-color: #cbd5e1;
--coder-input-focus-border-color: #94a3b8;
--coder-input-invalid-color: #f87171;
// SELECT
--coder-select-bg-color: #f8fafc;
--coder-select-hover-color: #FFFFFF;
--coder-select-text-color: #64748b;
--coder-select-border-color: #94a3b8;
--coder-select-focus-color: #64748b;
// UTILS
--coder-chevron: url("data:image/svg+xml, ");
}
```
> ⚠️ El prefijo **`coder`** usado en todas las variables `CSS` puede ser cambiado facilmente sobreescribiendo la variable global SCSS **`$prefix`**
## Clases `utiles` disponibles
```html
```
## `Mixins` utiles disponibles
```SCSS
// GENERA UNA VARIACION DE COLOR PARA BOTONES
@include btnColorVariation($class, $color, $color-light, $color-contrast);
// GENERA UN SELECTOR PADRE CON EL ATRIBUTO `data-theme`
@include theme($theme) {
// ...
}
// GENERA UN MEDIA QUERY CON EL BREAKPOINT SELECCIONADO
@include break-up($breakpoint) {
// ...
}
// ATAJO O ALIAS PARA `breakup(sm)`
@include sm() {
// ...
}
// ATAJO O ALIAS PARA `breakup(md)`
@include md() {
// ...
}
// ATAJO O ALIAS PARA `breakup(lg)`
@include lg() {
// ...
}
// ATAJO O ALIAS PARA `breakup(xl)`
@include xl() {
// ...
}
// GENERA CLASES UTILITARIAS PARA ESPACIADOS
@include generate-spacing($prop, $short);
```
## `Temas` disponibles
| Light `default` | Coder `dark` |
| -------------- | -------------- |
| [](./src/assets/screenshot-light.png) | [](./src/assets/screenshot-dark.png) |