give it a star on GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"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 good when it comes to […]<\/p>\n","protected":false},"author":276754,"featured_media":326334,"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":"Considerations for Making a CSS Framework by @HalfmoonUi","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[18865,571,18864,18719],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/halfmoon-screen-logo.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":318129,"url":"https:\/\/css-tricks.com\/halfmoon-a-bootstrap-alternative-with-dark-mode-built-in\/","url_meta":{"origin":325887,"position":0},"title":"Halfmoon: A Bootstrap Alternative with Dark Mode Built In","date":"August 11, 2020","format":false,"excerpt":"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. The elevator pitch Halfmoon is a front-end framework with a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/halfmoon.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352621,"url":"https:\/\/css-tricks.com\/tonic-component-framework\/","url_meta":{"origin":325887,"position":1},"title":"Tonic (Component Framework)","date":"September 27, 2021","format":false,"excerpt":"I enjoy little frameworks like Tonic. It's essentially syntactic sugar over 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 "Article"","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":161876,"url":"https:\/\/css-tricks.com\/design-systems-building-future\/","url_meta":{"origin":325887,"position":2},"title":"Design Systems: Building for the Future","date":"February 5, 2014","format":false,"excerpt":"The modern web design and development process is rapidly evolving, and responsive websites are quickly becoming the norm. Frameworks like Bootstrap and Foundation are showing us the value of creating robust systems of components to make building things on the web faster, better, and easier. About a year ago, I\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":359729,"url":"https:\/\/css-tricks.com\/add-less\/","url_meta":{"origin":325887,"position":3},"title":"Add Less","date":"December 30, 2021","format":false,"excerpt":"When you're about to start a new website, what do you think first? Do you start with a library or framework you know, like React or Vue, or a meta-framework on top of that, like Next or Nuxt? Do you pull up a speedy build tool like Vite, or configure\u2026","rel":"","context":"In "2021 End-of-Year Thoughts"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/Untitled_Artwork-scaled.jpg?fit=1200%2C502&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":313163,"url":"https:\/\/css-tricks.com\/rough-notation\/","url_meta":{"origin":325887,"position":4},"title":"Rough Notation","date":"June 22, 2020","format":false,"excerpt":"This is a neat little library. It uses SVG to insert hand-drawn looking annotations to elements (probably text), like underlines and box highlights (there are 6 design options, all configurable). Super clever. Here's a little demo: CodePen Embed Fallback Aside from it just being cool, I really like how it\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-19-at-7.24.50-AM.png?fit=1200%2C552&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":255436,"url":"https:\/\/css-tricks.com\/componentizing-a-framework\/","url_meta":{"origin":325887,"position":5},"title":"Componentizing a Framework","date":"June 2, 2017","format":false,"excerpt":"I'm sure most of you understand how you work with a framework like Bootstrap, Foundation, or Materialize. You use their CSS and JavaScript. You also use their chunks of HTML, piecing together and applying classes as needed to do what you need to do. You're on your own piecing the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/halfmoon-screen-logo.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/325887"}],"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=325887"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/325887\/revisions"}],"predecessor-version":[{"id":326052,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/325887\/revisions\/326052"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/326334"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=325887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=325887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=325887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}