https://github.com/aqeelshamz/neumorfic

neumorfic framework provides Neumorphic design elements (Button, TextBox, Radio, Checkbox, Switch, Nav Button, Progress Bar, Dropdown list) for your webpage.
https://github.com/aqeelshamz/neumorfic

css css-framework framework html jquery

Last synced: about 1 month ago
JSON representation

neumorfic framework provides Neumorphic design elements (Button, TextBox, Radio, Checkbox, Switch, Nav Button, Progress Bar, Dropdown list) for your webpage.

• Host: GitHub
• URL: https://github.com/aqeelshamz/neumorfic
• Owner: aqeelshamz
• Created: 2020-08-28T13:10:44.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-08-28T16:27:36.000Z (over 4 years ago)
• Last Synced: 2025-02-08T13:11:21.265Z (3 months ago)
• Topics: css, css-framework, framework, html, jquery
• Language: CSS
• Homepage:
• Size: 417 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# neumorfic

neumorfic framework provides Neumorphic design elements (Button, TextBox, Radio, Checkbox, Switch, Nav Button, Progress Bar, Dropdown list) for your webpage.

```

git clone https://github.com/aqeelshamz/neumorfic.git

```

clone into your project directory.

Add neumorfic to your webpage: 

```

```

Elements:

# Button

![button](button.png)

Add .button class to the element.

eg: ``````

# TextBox

![textbox](textbox.png)

Add .textbox class to the element.

eg: ``````

# CheckBox

![checkbox](checkbox.png)

Use checkbox tag with input (type must be checkbox) and label inside.

eg: 

```

   

   Check

```

You can add multiple checkboxes. just change the value of 'id' and 'for' accordingly.

eg:

```

    

    Apple

    

    Mango

```

# Radio

![radio](radio.png)

Use radio tag with input (type must be radio) and label inside.

eg:

```

    

    Apple

```

You can add multiple radio. just change the value of 'id' and 'for' accordingly. Use the same 'name' for radios in the same group.

eg:

```

    

    Apple

    

    Orange

    

    Dodge

    

    Ferrari

```

# Switch

![switch](switch.png)

Use switch tag with input (type must be checkbox) inside.

eg:

```

   

```

# Navigation Buttons

![navbuttons](navbuttons.png)

Use classes .nav-up, .nav-down, .nav-right, .nav-left :

Navigation up:

```

```

Navigation down:

```

```

Navigation right:

```

```

Navigation left:

```

```

# Progress Bar

![progressbar](progressbar.png)

Use the code below:

```



    


        


            
75%

        

    



```

You just need to change the width of '.progress' using CSS. You don't need to update '.pg-text'. It will be updated automatically. 

You can change the color of progress bar by changing 'background' property of '.progress' class.


CSS code eg:

```

.progress{

   background: blue; //makes the progress bar blue in color

}

```

![color_progressbar](progressblue.png)

You can also add gradient to make it more attractive: 

eg: ```background: linear-gradient(90deg, dodgerblue, cyan);```

![gradient_progressbar](progressgrad.png)

# Dropdown Menu

![dropmenu](dropmenu.png)

Use the code below:

```



   

   


       

       

       

       

   



```


Add options inside div '.list listtoggle' by using input type=button:

```

```