# framework-scss

> Framework de Sass escalable y sostenible.

Latest version **1.0.0** (published 2017-04-28) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install framework-scss
pnpm add framework-scss
yarn add framework-scss
bun add framework-scss
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-04-28 |
| First published | 2017-04-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Javier Puche |
| Maintainers | jpuche |
| Keywords | css, sass, scss, framework |

## Links

- npm: https://www.npmjs.com/package/framework-scss
- Repository: https://github.com/javipuche/framework-scss
- Homepage: https://github.com/javipuche/framework-scss#readme
- Issues: https://github.com/javipuche/framework-scss/issues
- npm.io page: https://npm.io/package/framework-scss

## Dependencies (2)

- [normalize.css](https://npm.io/package/normalize.css.md) ^6.0.0
- [mediaqueries-sass-mixin](https://npm.io/package/mediaqueries-sass-mixin.md) ^1.2.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-04-28

## README

# Framework SCSS

Framework de Sass escalable y sostenible.

## Instalación

Puedes instalar el framework con los siguientes gestores de paquetes:

### Bower

```bash
bower install framework-scss --save
```

### Npm

```Npm
npm install framework-scss --save
```

En el caso de npm si no tienes algún tipo de herramienta para instalar dependencias recursivamente tendrás que instalar también ```mediaqueries-sass-mixin``` y ```normalize.css```:

```Npm
npm install framework-scss mediaqueries-sass-mixin normalize.css --save
```

## Configuración

Una vez instalado lo primero que tienes que hacer es localizar los archivos que empiezan por ```example``` y copiarlos en tu directorio principal de scss manteniendo la estructura.

```
example.main.scss
settings/_example.settings.config.scss
settings/_example.settings.global.scss
```

### ```example.main.scss```

Este es el archivo principal del framework. Se encarga de hacer los ```@import``` de los demás archivos y será el archivo que tendrás que compilar para hacer el output del css.

Es importante fijarte en las rutas de los ```@import``` ya que dependiendo del gestor de paquetes que hayas usado tendrás que editarlas. Por defecto están puestas las de bower. Además tendrás que renombrarlo a ```main.scss```.

### ```_example.settings.config.scss```

Este es el archivo de configuración el framework. Principalmente se encarga de manejar el estado, la localización el entorno del proyecto, puede ser usado para manipular cosas pero no necesariamente tiene que afectar al CSS directamente. Un ejemplo muy básico de esto sería si queremos o no activar bordes redondeados en todo el proyecto:

```scss
// _settings.config.scss
$config-radius-enabled: true;

// _components.btn.scss
.c-btn {
    @if $config-radius-enabled {
        border-radius: $global-border-radius;
    }
}
```

Recuerda que también tienes que renombrarlo a: ```_settings.config.scss```.

### ```_example.settings.global.scss```

Este es el archivo global de variables del proyecto. Aquí puedes meter colores, familias de fuentes, tamaños de texto, etc. Recuerda que también tienes que renombrarlo a: ```_settings.global.scss```.

## Estructura de archivos

Esta estructura está basada en [inuitcss](https://github.com/inuitcss/inuitcss) de [Harry Roberts](https://csswizardry.com/). Por lo tanto aunque yo la explique aquí es recomendable que os paséis por su repositorio y le echéis un vistazo.

- ```/settings```: Variables globales, opciones de ancho, configuraciones de estado, etc.
- ```/tools```: Principalmente mixins y funciones.
- ```/generic```: Estilos con una especificidad baja (ej. resets, box-sizing).
- ```/elements```: Elementos HTML sin clases (ej. body {}, p {}, a {}, address {}).
- ```/objects```: Objetos, abstracciones y patrones de diseño (ej. .o-layout {}, .o-box {}).
- ```/components```: Componentes UI del proyecto (ej. .c-slider {}, .c-btn {}, .c-heading {}).
- ```/utilities```: Clases con una especificidad alta, son clases que sobreescriben estilos y clases de ayuda (ej. .u-hidden {}, .u-text-center {}).

## Referencias

- [inuitcss](https://github.com/inuitcss/inuitcss)
- [Harry Roberts](https://csswizardry.com/)

---
_Source: https://npm.io/package/framework-scss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._