fluid-framework / Fluid

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 <link href="https://cdn.jsdelivr.net/npm/fluid-css/dist/fluid.min.css" rel="stylesheet" />.
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 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 for compatibility with earlier versions of browsers

🛠 Customization

1. Download 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 or npm build for npm

🧠 Creators

👨‍💻 Ashfahan ◾️ GitHub | GitLab

🤝 Sponsors

📜 Copyright and license

Code copyright (c) 2019-2027 fluid-framework and Ashfahan and Contributors.

Code released under the MIT License.