aaroniker / Framy Css
Licence: mit
Very simple CSS Framework
Stars: ✭ 103
Programming Languages
js
455 projects
Projects that are alternatives of or similar to Framy Css
Framevuerk
Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.
Stars: ✭ 252 (+144.66%)
Mutual labels: framework, ux, responsive
Flutterwebsite
The flutter.dev website recreated in Flutter. https://gallery.codelessly.com/flutterwebsites/flutterwebsite
Stars: ✭ 76 (-26.21%)
Mutual labels: framework, demo, responsive
Numl
A UI Design Language, WC UI Library, and Runtime CSS Framework for rapidly building interfaces that follow your Design System 🌈
Stars: ✭ 229 (+122.33%)
Mutual labels: framework, css-framework, responsive
Jikan
A new CSS framework for better, faster and more beautiful UIs.
Stars: ✭ 19 (-81.55%)
Mutual labels: grid, responsive, css-framework
Mini.css
A minimal, responsive, style-agnostic CSS framework!
Stars: ✭ 2,938 (+2752.43%)
Mutual labels: framework, css-framework, responsive
Bojler
Bojler is an email framework
Stars: ✭ 885 (+759.22%)
Mutual labels: framework, css-framework, grid
Responsiveframework
Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple. Demo: https://gallery.codelessly.com/flutterwebsites/minimal/
Stars: ✭ 476 (+362.14%)
Mutual labels: framework, demo, responsive
Lemon
🍋 Minimal and responsive CSS framework for fast building websites.
Stars: ✭ 51 (-50.49%)
Mutual labels: framework, css-framework, grid
Axentix
Axentix is an open source Framework based on CSS Grid using HTML, CSS and JS. The easy layout control and grid system makes it one of the most easy to learn framework.
Stars: ✭ 75 (-27.18%)
Mutual labels: framework, grid
Infima
A UI framework that provides websites with the minimal CSS and JS needed to get started with building a modern responsive beautiful website
Stars: ✭ 82 (-20.39%)
Mutual labels: framework, responsive
Skeleton
A ready-to-use CodeIgniter skeleton with tons of new features and a whole new concept of hooks (actions and filters) as well as a ready-to-use and application-free themes and plugins system. Facebook Page: http://bit.ly/2oHzpxC | Facebook Group: http://bit.ly/2o3KOrA. Help me carry on making more free stuff → http://bit.ly/2ppNujE ←
Stars: ✭ 74 (-28.16%)
Mutual labels: framework, demo
Cdnjs
🤖 CDN assets - The #1 free and open source CDN built to make life easier for developers.
Stars: ✭ 9,270 (+8900%)
Mutual labels: framework, cdn
Sing App
💥Free and open-source admin dashboard template built with Bootstrap 4.5 💥
Stars: ✭ 1,187 (+1052.43%)
Mutual labels: icons, responsive
Ungrid
ungrid - the simplest responsive css grid
Stars: ✭ 1,292 (+1154.37%)
Mutual labels: grid, responsive
Equalizecss
Css framework with grid based on flexboxes
Stars: ✭ 61 (-40.78%)
Mutual labels: framework, grid
Ngx Dynamic Form Builder
FormBuilder + class-transformer + class-validator = dynamic form group builder for Angular10+
Stars: ✭ 93 (-9.71%)
Mutual labels: demo, form
Kanbasu
A lightweight CSS framework written in Sass.
Stars: ✭ 94 (-8.74%)
Mutual labels: framework, css-framework
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/[email protected]/dist/css/framy.min.css">
// JS
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/framy.js"></script>
Or just the CSS flexbox grid:
// Just the CSS flexbox grid
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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:
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].