Giter Site home page Giter Site logo

flaviosuarez / quartermoon Goto Github PK

View Code? Open in Web Editor NEW

This project forked from thaunknown/quartermoon

0.0 0.0 0.0 419 KB

Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.

License: MIT License

JavaScript 5.78% CSS 93.59% HTML 0.63%

quartermoon's Introduction

This is a fork of halfmoon, which is meant to stay true to the original, while fixing issues.

The only files that will be worked on are quartermoon-variables.css and quartermoon.js. Once they are ready for a new release, the other files will be generated (i.e. minified and variables flattened), and then this branch will be merged with the main one. Not everything listed below will be worked on for the next major update (v1.2.0). Anything left out will be pushed to the update after that one.

Please note, writing and updating the official documentation website requires time and polish. So for the time being, as new components and features are being added, I will create examples illustrating how they can be used on Codepen. That should hopefully tie everything over until the official release and documentation update. You can find the links to the Codepens below, next to the list items.

UPDATE 3rd March, 2021 Dropdown transitions updated along with code clean up, tooltips design and transitions updated along with code clean up, transition utilities added, focus visible state now supported for all types of links, sidebar animation improved, and other small changes.

UPDATE 21st February, 2021 New color system, improved tables, new color utilities for background, text, and borders, new border utilities, clean-up of outdated browser prefix properties, other minor changes and bug fixes.

UPDATE 6th February, 2021 Added styled lists (unordered and ordered).

UPDATE 3rd February, 2021 Back from hiatus! Range, number input, password show/hide toggles have been added.

UPDATE 18th June, 2022 Quartermoon start. Fixed scrolling performance issues, fixed sidebar performance issues. Fixed scroll event listeners not working, improved invalid forms and added an option to include multiple form elements of the same type inside a custom form element div.

UPDATE 23 August, 2022 Added display grid utilities. Added img-cover option.

New features and components

  • Styled lists (unordered and ordered) - How to use
  • Range - How to use
  • Number input - How to use
  • Password show/hide toggle - How to use
  • Form validator
  • Tabs (also called navs)
  • List group
  • Spinners
  • High contrast mode
  • User preferred scale
  • Date-time picker
  • Better select and multi-select
  • Data table

Other updates and bug fixes

  • Improved tables, especially contextual variations - See example
  • Update the color system to use HSL representations (HSL colors are human friendly, so the new system will make it a breeze to update palletes if necessary)
  • New color utilities for background, text, and border
  • New border utilities, mainly border-width utilities, extra options for rounded borders, and border colors (as mentioned above)
  • Clean-up of outdated browser prefix properties
  • Pseudo-classes now use CSS3 syntax (not CSS2)
  • Border color variables can now have different values for different sides
  • Fix "aggressive" transitions on dropdown menus and tooltips
  • Transition utilities
  • Focus visible state now supported for all types of links
  • Update buttons (and inputs) to use padding, instead of fixed height (this should fix browser discrepancies in the appearance of buttons)
  • Fix the issue that causes the sidebar and overlay to appear for a moment before disappearing during page load on small screens (i.e. mobile phones)
  • Fix the position styles on the <html>, <body> and other major containers (this should fix some minor scroll issues)
  • Scroll shadow utilities

The above list is missing a few other tiny bugs and issues that will be fixed.

Updates to the documentation

  • Pages for the new components and features
  • Accessibility improvements in the examples
  • Comparison pages with other popular frameworks
  • Pages for helping users integrate Quartermoon with React, Angular, Vue, and so on (as of right now, the documentation is sparse in this regard)

Dropped changes (not doing)

  • Improve the design of disabled checkboxes, radio buttons, and switches (Tried to change, but the old ones were more readable and usable)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.