Fluid

KO | EN

gitlite — search

#javascript #go #golang #android #machine-learning #deep-learning #linux #docker #java #awesome #awesome-list #vue #security #ios

(★ 28)

Modern, Stylish, Easier and Powerful Css framework for faster and hassle free web development

Fluid 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Modern, Stylish, Easier and Powerful Css framework for faster and hassle free web development.
 
 
 <a href="https://github.com/fluid-framework/fluid/issues/new?template=bug.md">Report bug 🐛</a>
 |
 <a href="https://github.com/fluid-framework/fluid/issues/new?template=feature.md&labels=feature">Request feature ✨ </a>

<a href="https://github.com/fluid-framework/Fluid/releases">
 <img src="https://img.shields.io/github/package-json/v/fluid-framework/fluid.svg?label=Github%20release&style=for-the-badge&color=1890ff"/>
 </a>
 <a href="https://atmospherejs.com/fluidframework/fluid-css">
 <img src="https://img.shields.io/badge/METEOR-fluidframework%3Afluid--css-1890ff?style=for-the-badge"/>
 </a>
 <a href="https://www.npmjs.com/package/fluid-css">
 <img src="https://img.shields.io/badge/NPM-fluid--css-1890ff?style=for-the-badge"/>
 </a>

<a href="https://github.com/fluid-framework/Fluid/actions">
 <img src="https://img.shields.io/github/workflow/status/fluid-framework/Fluid/Tests?style=for-the-badge" />
 </a>
 <a href="https://bundlephobia.com/result?p=fluid-css">
 <img src="https://img.shields.io/bundlephobia/minzip/fluid-css?color=%2344CC11&label=Gzip%20Size&style=for-the-badge">
 </a>

<a href="https://github.com/fluid-framework/Fluid/tree/master/LICENSE">
 <img src="https://img.shields.io/github/license/fluid-framework/Fluid.svg?style=for-the-badge&color=805ad5"/>
 </a>
 <a href="https://github.com/fluid-framework/Fluid/commits">
 <img src="https://img.shields.io/github/commit-activity/w/fluid-framework/fluid.svg?style=for-the-badge&color=805ad5" />
 </a>
 <a href="https://github.com/fluid-framework/Fluid/pulls">
 <img src="https://img.shields.io/badge/Pull%20Request-Welcome_%E2%9D%A4-805ad5.svg?style=for-the-badge" />
 </a>

🚧 Under Heavy Construction 🚧

## 🚀 Quick Start

##### Using CDN

1. Just copy stylesheet link into HTML <head> 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](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).

Fluid

Fluid 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Fluid

Fluid 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README