Framy - Very simple CSS Framework

Framy is a collection of basic components, you will need in every web project to develop responsive & modern interfaces and websites.

• Website http://www.framycss.org
• Documentation http://www.framycss.org/#/docs
• Demo http://demo.framycss.org

How to use

CDN

Just include the latest version like this:

// CSS
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/framy-css@latest/dist/css/framy.min.css">

// JS
<script src="//cdn.jsdelivr.net/npm/framy-css@latest/dist/js/framy.js"></script>

Or just the CSS flexbox grid:

// Just the CSS flexbox grid
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/framy-css@latest/dist/css/framy.grid.min.css">

Or replace latest with a specific version (ex. grid system):

// Just the CSS flexbox grid
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/framy-css@2.8.5/dist/css/framy.grid.min.css">

Install with npm

npm install framy-css

Then include CSS and JS files like this:

<link rel="stylesheet" href="node_modules/framy-css/dist/css/framy.min.css">

<script src="node_modules/framy-css/dist/js/framy.js"></script>

Install with Bower

bower install framy-css

Then include CSS and JS files like this:

<link rel="stylesheet" href="bower_components/framy-css/dist/css/framy.min.css">

<script src="bower_components/framy-css/dist/js/framy.js"></script>

Development

You'll need:

• git
• npm

First clone this repository using git:

git clone https://github.com/aaroniker/framy-css.git

Now you'll have to install all needed npm dependencies:

npm install

After that you could use the following commands:

// Load & compile all icons to an icon font from ./src/icons/*.svg to ./dist/fonts/*
npm run icons

// Compile all .scss files to ./dist/css/framy.min.css
npm run css

// Compile all grid related .scss files to ./dist/css/framy.grid.min.css
npm run css-grid

// Watch all .scss files and recompile ./dist/css/framy.min.css & ./dist/css/framy.grid.min.css if they changed
npm run watch-css

Resources

• Interface Font https://github.com/rsms/inter
• Ikons http://ikons.piotrkwiatkowski.co.uk