Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fluid-framework/fluid
Modern, Stylish, Easier and Powerful Css framework for faster and hassle free web development
https://github.com/fluid-framework/fluid
css css-framework css-grid fluid framework frontend mobile ready responsive scss scss-framework
Last synced: 2 months ago
JSON representation
Modern, Stylish, Easier and Powerful Css framework for faster and hassle free web development
- Host: GitHub
- URL: https://github.com/fluid-framework/fluid
- Owner: fluid-framework
- License: mit
- Created: 2019-06-07T19:39:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-10-20T18:12:11.000Z (about 3 years ago)
- Last Synced: 2024-10-15T16:21:42.998Z (2 months ago)
- Topics: css, css-framework, css-grid, fluid, framework, frontend, mobile, ready, responsive, scss, scss-framework
- Language: SCSS
- Homepage:
- Size: 7.24 MB
- Stars: 26
- Watchers: 5
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
Modern, Stylish, Easier and Powerful Css framework for faster and hassle free web development.
Report bug 🐛
|
Request feature ✨
🚧 Under Heavy Construction 🚧
## 🚀 Quick Start
##### Using CDN
1. Just copy stylesheet link into HTML tag ``.
2. Start using Fluid
##### Using NPM
1. Download Package as Direct Dependency `npm install fluid-css`
2. Import required Css Into project using `import "fluid-css/dist/fluid.css"`
3. Start using Fluid
##### Using Yarn
1. Download Package as Direct Dependency `yarn add fluid-css`
2. Import required Css Into project using `import "fluid-css/dist/fluid.css"`
3. Start using Fluid
##### Using Meteor
1. Download Package using `meteor add fluidframework:fluid`
2. Import required Css Into project using `import "fluid-css/dist/fluid.css"`
3. Start using Fluid
## 📂 Structure
Fluid uses [ITCSS architecture](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture) for its files and folder structure.
```
src
├───components
├───elements
│ └───typography
├───generics
├───objects
├───settings
│ ├───components
│ ├───design
│ ├───icons
│ ├───misc
│ ├───naming
│ ├───objects
│ ├───placeholders
│ │ └───typography
│ ├───theme
│ └───typography
├───tools
│ ├───functions
│ └───mixins
│ ├───components
│ └───shapes
├───utilities
│ ├───border
│ ├───grid-flex
│ ├───sizing
│ ├───transform
│ └───typography
└───vendors
```
## 💅 CSS only
Fluid is a `CSS implementation only` means it components are `faster than JavaScript` Components but being a CSS only framework also means that for components like Alerts Popup, User have to implement their own JavaScript Implementation and logics.
## 🌐 Browser Support
Fluid Uses Css version 3 so it is supported by majority of browsers. Fluid is compatible with recent versions of:
- Chrome
- Edge
- Firefox
- Opera
- Safari
- Internet Explorer (10+) is only partially supported.
Fluid uses [autoprefixer](https://github.com/postcss/autoprefixer) for compatibility with earlier versions of [browsers](https://github.com/fluid-framework/Fluid/tree/master/.browserslistrc)
## 🛠 Customization
1. [Download](https://github.com/fluid-framework/Fluid/archive/master.zip) Latest master branch
2. Extract files
3. Customize the Scss files and variables located in `settings` folder
4. Build Scss using `yarn build` for [yarn](https://yarnpkg.com/lang/en/docs/install/#windows-stable) or `npm build` for [npm](https://nodejs.org/en/download/)
## 🧠 Creators
👨💻 **Ashfahan** ◾️ [GitHub](https://github.com/ashfahan) | [GitLab](https://gitlab.com/ashfahan)
## 🤝 Sponsors
## 📜 Copyright and license
Code copyright (c) 2019-2027 [fluid-framework](https://fluid-framework.com) and [Ashfahan](https://Ashfahan.com) and [Contributors](https://github.com/fluid-framework/Fluid/graphs/contributors).
Code released under the [MIT License](https://github.com/fluid-framework/Fluid/tree/master/LICENSE).
