Skip to content

mCruz-de/HummingbirdUI

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Logo HummingbirdUI

HummingbirdUI

A lightweight CSS/JS user interface framework, offering a unique user experience and simplifying the development of visually appealing and user-friendly web-applications.

__________

HummingbirdUI light theme preview

HummingbirdUI dark theme preview

HummingbirdUI 4

With this framework, you can easily and quickly create modern, responsive user interfaces without sacrificing custom functionality. Developer-friendly customization options allow you to avoid complex CSS and JavaScript codes and focus on the design and functionality of your application.

This framework is fully customizable and compatible with the latest web design technologies and trends. You have complete control over the look and functionality of your applications, easily tailoring them to meet your specific requirements.

Experience the difference for yourself and try this framework today! Take your web projects to the next level and impress your users with an unparalleled experience.

Table of Contents

Getting started

Learn the basics of this CSS/JS framework and get started building beautiful and functional web-applications.

HummingbirdUI dark theme preview

The Idea: Fill it with elements.

Customize your user interface with icons, buttons and other things as UI elements! You're not limited; you can easily use your own elements to give your web-application a unique, personalized look.

The automatic alignment feature ensures that your icons and buttons are positioned and aligned correctly on all devices, without the need for manual adjustments. This feature streamlines your work and gives you peace of mind, knowing that your page will look great on any screen size.

Customization options

Embrace the power of customizability with this framework. Start using your own icons today and see how they can elevate the look and feel of your website or application. Try this framework and experience the difference for yourself!

Dark mode

In addition to its intuitive design and automatic alignment features, the framework also includes a stylish and modern dark mode. This feature provides a sleek and elegant interface for your users, while also making your web-application more accessible and user-friendly. With just one click, you can easily switch between light and dark mode, offering a personalized experience for your users no matter what their preferred visual style may be.

Helpers

This framework includes built-in helpers for controlling element visibility on different devices. This feature makes it easy for you to create a fully responsive website or fine-tune your user interface to look its best on any device.

With these helpers, you can easily specify which elements are displayed on desktop, tablet, or mobile devices. No more writing separate code for each device type or manually adjusting element visibility - this framework has got you covered.

To use this feature, simply add the appropriate class to each element you want to display on a specific device. Here's an overview of the available classes for controlling element visibility:

  • .desktop-only: Displays the element as an inline element only on desktop devices
  • .mobile-only: Displays the element as an inline element only on mobile/tablet devices
  • .desktop-only-block: Displays the element as a block element only on desktop devices
  • .mobile-only-block: Displays the element as a block element only on mobile/tablet devices

Recommendations

Take your web development to the next level by combining this framework with the best of the best! Integrating this framework with popular front-end frameworks like Bootstrap will enhance its functionality and give you even more tools to build beautiful, responsive websites and applications.

But that's not all! We also recommend using this framework in conjunction with powerful PHP frameworks like Laravel. This combination will allow you to take full advantage of the benefits that both frameworks have to offer, resulting in even more dynamic and versatile web development projects.

Don't settle for just one framework - bring together the best of both worlds and see your web development projects reach new heights.

Installation

File structure

HummingbirdUI/
├── hummingbird-ui/
│   ├── hummingbird-ui.css    #customization options and css classes
│   └── hummingbird-ui.js     #responsive features and dark mode toggler
├── index.html                #html structure

Creators

Maurice Kreutz
M.Cruz Webdesign

M.Cruz Webdesign Logo

Sponsors

Support this Project by becoming a sponsor. Your Logo will show up here with a link to your website.

Copyright and license

Code copyright 2021-2023. Code released under the MIT License.

About

A lightweight CSS/JS user interface framework, offering a unique user experience and simplifying the development of visually appealing and user-friendly web-applications.

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors