{"id":318129,"date":"2020-08-11T07:36:37","date_gmt":"2020-08-11T14:36:37","guid":{"rendered":"https:\/\/css-tricks.com\/?p=318129"},"modified":"2020-08-11T07:36:38","modified_gmt":"2020-08-11T14:36:38","slug":"halfmoon-a-bootstrap-alternative-with-dark-mode-built-in","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/halfmoon-a-bootstrap-alternative-with-dark-mode-built-in\/","title":{"rendered":"Halfmoon: A Bootstrap Alternative with Dark Mode Built In"},"content":{"rendered":"\n<p>I recently launched the first production version of Halfmoon, a front-end framework that I have been building for the last few months. This is a short introductory post about what the framework is, and why I decided to build it.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"414\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/halfmoon-demo-gif_1_lqhog6.gif?resize=640%2C414&#038;ssl=1\" alt=\"\" class=\"wp-image-318130\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-elevator-pitch\">The elevator pitch<\/h3>\n\n\n<p>Halfmoon is a front-end framework with a few interesting things going for it:<\/p>\n\n\n\n<ul><li><strong>Dark mode built right in:<\/strong> Creating a dark mode version of a site is baked in and a snap.<\/li><li><strong>Modular components:<\/strong> A lot of consideration has gone into making modular components \u2014 such as forms, navbars, sidebars, dropdowns, toasts, shortcuts, etc. \u2014 that can be used anywhere to make layouts, even complex ones like dashboards.<\/li><li><strong>JavaScript is optional:<\/strong> Many of the components found in Halfmoon are built to work without JavaScript. However, the framework still comes with a powerful JavaScript library with no extra dependencies.<\/li><li><strong>All the CSS classes you need:<\/strong> The class names should be instantly familiar to anyone who has used Bootstrap because that was the inspiration.<\/li><li><strong>Cross-browser compatibility:<\/strong> Halfmoon fully supports nearly every browser under the sun, including really old ones like Internet Explorer 11.<\/li><li><strong>Easily customizable:<\/strong> Halfmoon uses custom CSS properties for things like colors and layouts, making it extremely easy to customize things to your liking, even without a CSS preprocessor.<\/li><\/ul>\n\n\n\n<p>In many ways, you can think of Halfmoon as Bootstrap with an integrated dark mode implementation. It uses a lot of Bootstrap\u2019s components with slightly altered markup in many cases.<\/p>\n\n\n\n<figure class=\"wp-block-jetpack-image-compare\"><div class=\"juxtapose\" data-mode=\"vertical\"><img loading=\"lazy\" decoding=\"async\" id=\"318131\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-07-28-at-9.48.39-AM.png?resize=1422%2C594&#038;ssl=1\" alt=\"\" width=\"1422\" height=\"594\" class=\"image-compare__image-before\" data-recalc-dims=\"1\"\/><img loading=\"lazy\" decoding=\"async\" id=\"318132\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-07-28-at-9.48.54-AM.png?resize=1422%2C594&#038;ssl=1\" alt=\"\" width=\"1422\" height=\"594\" class=\"image-compare__image-after\" data-recalc-dims=\"1\"\/><\/div><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"ok-great-but-why-this-framework\">OK, great, but why <em>this<\/em> framework?<\/h3>\n\n\n<p>Whenever a new framework is introduced, the same question is inevitably pops up: <em>Why did you actually build this?<\/em> The answer is that I freaking love dark modes and themes. Tools that come with both a light and a dark mode (along with a toggle switch) are my favorite because I feel that being able to change a theme on a whim makes me less likely to get bored looking at it for hours. I sometimes read in dim lighting conditions (pray for my eyes), and dark modes are significantly more comfortable in that type of situation.&nbsp;<\/p>\n\n\n\n<p>Anyway, a few months ago, I wanted to build a simple tool for myself that makes dark mode implementation easy for a dashboard project I was working on. After doing some research, I concluded that I had only two viable options: either pickup a JavaScript-based component library for a front-end framework \u2014 like <a href=\"https:\/\/vuetifyjs.com\/en\/\" rel=\"noopener\">Vuetify<\/a> for Vue \u2014 or shell out some cash for a premium dark theme for Bootstrap (and I did not like the look of the free ones). I did not want to use a component library because I like building simple server-rendered websites using Django. That\u2019s just my cup of tea. Therefore, I built what I needed: a free, good-looking front-end framework that\u2019s along the same lines as Bootstrap, but includes equally good-looking light and dark themes out of the box.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"future-plans\">Future plans<\/h3>\n\n\n<p>I just wanted to share Halfmoon with you to let you know that it exists and is freely available if you happen to be looking for an extensible framework in the same vein as Bootstrap that prioritizes dark mode in the implementation.<\/p>\n\n\n\n<p>And, as you might imagine, I\u2019m still working on Halfmoon. In fact I have plenty of enhancements in mind:<\/p>\n\n\n\n<ul><li>More components<\/li><li>More customization options (using CSS variables)<\/li><li>More examples and templates<\/li><li>Better tooling<\/li><li>Improved accessibility examples in the docs<\/li><li>Vanilla JavaScript implementations of useful components, such as custom multi-select (think <a href=\"https:\/\/select2.org\" rel=\"noopener\">Select2<\/a>, only without jQuery), data tables and form validators, among other things.<\/li><\/ul>\n\n\n\n<p>In short, the plan is to build a framework that is really useful when it comes to building complex dashboards, but is still great for building any website. The documentation for the framework can be found on the <a aria-label=\"undefined (opens in a new tab)\" href=\"https:\/\/www.gethalfmoon.com\" target=\"_blank\" rel=\"noreferrer noopener\">project&#8217;s website<\/a>. The code is all open-source and licensed under MIT. <a href=\"https:\/\/github.com\/halfmoonui\/halfmoon\" rel=\"noopener\">You can also follow the project on GitHub.<\/a> I\u2019d love for you to check it out, leave feedback, open issues, or even contribute to it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I recently launched the first production version of Halfmoon, a front-end framework that I have been building for the last few months. This is a short introductory post about what the framework is, and why I decided to build it.<\/p>\n","protected":false},"author":276754,"featured_media":318135,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[571],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/halfmoon.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":325887,"url":"https:\/\/css-tricks.com\/considerations-for-making-a-css-framework\/","url_meta":{"origin":318129,"position":0},"title":"Considerations for Making a CSS Framework","date":"November 25, 2020","format":false,"excerpt":"Around eight months ago, I started building a framework which would eventually go on to become Halfmoon. I made a post on this very website announcing the launch of the very first version. Halfmoon has been billed as a Bootstrap alternative with a built-in dark mode feature, that is especially\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/halfmoon-screen-logo.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":360239,"url":"https:\/\/css-tricks.com\/make-a-component-multiple-frameworks-in-a-monorepo\/","url_meta":{"origin":318129,"position":1},"title":"How to Make a Component That Supports Multiple Frameworks in a Monorepo","date":"January 5, 2022","format":false,"excerpt":"Your mission \u2014 should you decide to accept it \u2014 is to build a Button component in four frameworks, but, only use one button.css file! This idea is very important to me. I\u2019ve been working on a component library called AgnosticUI where the purpose is building UI components that aren\u2019t\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/button-frameworks.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":346702,"url":"https:\/\/css-tricks.com\/creating-headless-wordpress-site-with-frontity\/","url_meta":{"origin":318129,"position":2},"title":"Creating a Headless WordPress Site With Frontity","date":"August 20, 2021","format":false,"excerpt":"Frontity is a WordPress-focused React-based server-side dynamic-rendering framework (phew!) that allows us to create fast headless websites. Chris has a good introduction to Frontity. I guess you could think of it like Next.js for WordPress. And while the demand for headless WordPress sites may be a niche market at the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/s_9E6672BCB84648F19EDC33083BD06060398B4F707F82EA99B7C0B4A389E8CF04_1620244127345_ct_front-1-01.png.jpeg?fit=1200%2C605&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352621,"url":"https:\/\/css-tricks.com\/tonic-component-framework\/","url_meta":{"origin":318129,"position":3},"title":"Tonic (Component Framework)","date":"September 27, 2021","format":false,"excerpt":"I enjoy little frameworks like Tonic. It's essentially syntactic sugar over <web-components \/> to make them feel easier to use. Define a Class, template literal an HTML template, probably some other fancy helpers, and you've got a component that doesn't feel terribly different to something like a React component, except\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/tonic.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333376,"url":"https:\/\/css-tricks.com\/some-react-blog-posts-ive-bookmarked-and-read-lately\/","url_meta":{"origin":318129,"position":4},"title":"Some React Blog Posts I&#8217;ve Bookmarked and Read Lately","date":"February 5, 2021","format":false,"excerpt":"The React Hooks Announcement In Retrospect: 2 Years Later \u2014 Ryan Carniato considers hooks to be the most significant turning point in front end in the past five years, but he also says hooks have muddied the waters as well.Mediator Component in React \u2014 Robin Wieruch's article made me think\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336024,"url":"https:\/\/css-tricks.com\/web-frameworks-why-you-dont-always-need-them\/","url_meta":{"origin":318129,"position":5},"title":"Web Frameworks: Why You Don\u2019t Always Need Them","date":"March 9, 2021","format":false,"excerpt":"Richard MacManus explaining Daniel Kehoe's approach to building websites, which he calls \"Stackless\": There are three key web technologies underpinning Kehoe\u2019s approach: ES6 Modules: JavaScript ES6 can support import modules, which are also supported by browsers. Module CDNs: JavaScript modules can now be downloaded from third-party content delivery networks (CDNs).\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/6d65f352-painter-2798557_1280-1024x576-1.jpg?fit=1024%2C576&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/halfmoon.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/318129"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/276754"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=318129"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/318129\/revisions"}],"predecessor-version":[{"id":319055,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/318129\/revisions\/319055"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/318135"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=318129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=318129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=318129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}