The framework is easy to integrate, just install the package and import the CSS file
- The framework is build in modules, you just need to import the module you want to use
- The framework is build with flexbox, which makes it easy to fit all screen sizes
- The framework is easy to integrate, just install the package and import the CSS file
npm install funuicssInstall the package via NPM
yarn add funuicssImport the css file at your entry point to apply our classes,for example: _app.js, _app.jsx, index.js, index,jsx files
import 'funuicss/css/fun.css'
Create a simple login form with our framework.
import React from 'react'
import Text from 'funuicss/ui/text/Text'
import Input from 'funuicss/ui/input/Input'
import Button from 'funuicss/ui/button/Button'
import Section from 'funuicss/ui/specials/Section'
export default function App() {
return (
<div>
<div className="central height-500-min" >
<div className='width-300-max fit'>
<div className="margin-bottom-40">
<Text
text='Welcome'
heading='h2'
block
/>
<Text
text='Sign in to continue!'
block
/>
</div>
<Section gap={1.5}>
<Text text="Email" funcss="margin-bottom-10" block size="small" bold color="primary"/>
<Input type="email" fullWidth bordered />
</Section>
<Section gap={1}>
<Text text="Password" funcss="margin-bottom-10" block size="small" bold color="primary"/>
<Input type="password" fullWidth bordered />
</Section>
<div className="section">
<Link href={"/#"}>
<Text text='Forgot password!' size='small' underline color='primary'/>
</Link>
</div>
<div className="section">
<Button
text={"Let's go"}
raised
fullWidth
bg='primary800'
/>
</div>
</div>
</div>
</div>
)
}
This is a simple button
import React from 'react'
import Button from 'funuicss/ui/button/Button'
export default function App() {
return (
<Button bg="primary" outlined text="Simple Button"/>
)
}
This is a simple input
import React from 'react'
import Input from 'funuicss/ui/input/Input'
export default function App() {
return (
<>
<Input
type="text"
label="This is a simple input"
funcss="full-width"
/>
<Input
type="text"
bordered
label="This is a bordered"
funcss="full-width section"
/>
</>
)
}
Check our Documentation for more examples and explanation
The project is licensed under the terms of MIT