https://github.com/flowingis/frontsize
:art: A fully customizable CSS generator
https://github.com/flowingis/frontsize
bem multiple-themes sass
Last synced: about 2 months ago
JSON representation
:art: A fully customizable CSS generator
- Host: GitHub
- URL: https://github.com/flowingis/frontsize
- Owner: flowingis
- License: mit
- Created: 2014-01-05T11:21:12.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2018-05-09T10:48:46.000Z (over 7 years ago)
- Last Synced: 2025-08-03T03:39:19.378Z (2 months ago)
- Topics: bem, multiple-themes, sass
- Language: CSS
- Homepage: http://ideatosrl.github.io/frontsize/
- Size: 3.62 MB
- Stars: 11
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# frontsize
[](https://github.com/ideatosrl/frontsize/releases/tag/4.0.4)
[](https://travis-ci.org/ideatosrl/frontsize/builds)
[](http://badges.github.io/badgerbadgerbadger/)
[](https://github.com/ideatosrl/frontsize/blob/master/LICENSE.md)
[](https://gitter.im/ideatosrl/frontsize)
> Frontsize is not a set of widgets ready to be used in your website, it's a set
> of mixins and functions to build BEM widgets, it's a tool to generate your sets.
## Main features
- It's [BEM][bem] ready
- It's build to work with [multiple themes][themes] in the same project
- It's born to be flexible and customization oriented
- It's covered by [tests][test]
The project was [originally developed in LESS][less], now only the SASS version is mantained.
--------------------------------------------------------------------------------
## Release 4.0.4
- Folder `widgets` is renamed to `blocks` necause of frontsize's BEM based nature
## Release 4.0.3
- Adds `$invalidate-cache` var to let `theme` functions for background images generates also a random unique id
## Release 4.0.2
- Fix `vertical-gradient` mixin
## Release 4.0.1
- Adds `$frontsize-release-infos` to theme config
- Removes `a-pollo` module from node dependencies
---
## Install
#### NPM way:
```
npm install --save frontsize
```
#### YARN way:
```
yarn add frontsize
```
--------------------------------------------------------------------------------
## Documentation
Run this command inside frontsize module:
```
cd node_modules/frontsize && npm run styleguideServe
```
This will open a browser window with the documented code.
--------------------------------------------------------------------------------
## Theme installation
Once you have downloaded it, copy your theme to the project front-end development folder:
```
cp -r node_modules/frontsize/themes frontend/frontsize
```
Then change core references to let it point to module folder:
In `frontend/frontsize/_config/import.scss` file:
```sass
@import '../../node_modules/frontsize/core/import';
```
Now the core can be easily upgraded with `npm update frontsize-sass --save` when a new release is available.
--------------------------------------------------------------------------------
To test frontsize:
```
npm install && npm run test
```
Created by [Vittorio Vittori][vitto] and [Alessandro Minoccheri][minompi] @ [ideato srl][ideato]
[bem]: https://github.com/ideatosrl/frontsize/blob/master/test/js/components-bem.js
[ideato]: http://www.ideato.it
[less]: https://github.com/ideatosrl/frontsize-less
[minompi]: https://twitter.com/minompi
[test]: https://github.com/ideatosrl/frontsize/blob/master/test/js/
[themes]: https://github.com/ideatosrl/frontsize/tree/master/themes
[vitto]: https://twitter.com/vttrx