Pens from Braunson https://codepen.io/Braunson/ en nospam@codepen.io Copyright 2024 2022-12-23T13:45:29-07:00 Progress Bar example with multiple "players" https://codepen.io/Braunson/pen/jOpPKob https://codepen.io/Braunson/pen/jOpPKob Braunson

See the Code - See it Full Page - See Details

]]>
Progress Bar example with multiple "players" 2022-12-23T13:45:29-07:00
Add dynamic form fields using AlpineJS https://codepen.io/Braunson/pen/LYxXjZN https://codepen.io/Braunson/pen/LYxXjZN Braunson

See the Code - See it Full Page - See Details

This is small demo of adding dynamic form fields using alpinejs. I love this library. If you know vue, it will be lot easier for you to learn it. Good thing is that it does not requires any typical build solution .

]]>
Add dynamic form fields using AlpineJS 2021-04-21T19:06:54-07:00
AlpineJS Carousel using Swiper + Tailwindcss https://codepen.io/Braunson/pen/JjXZewq https://codepen.io/Braunson/pen/JjXZewq Braunson

See the Code - See it Full Page - See Details

]]>
AlpineJS Carousel using Swiper + Tailwindcss 2020-09-14T20:01:39-07:00
Tree view from unordered list https://codepen.io/Braunson/pen/NWPwYQy https://codepen.io/Braunson/pen/NWPwYQy Braunson

See the Code - See it Full Page - See Details

Sometimes it's easier to code something from scratch, than to learn a new piece of software. A tree view from an unordered list. Make sure you give it enough space. Write-up here: https://medium.com/@ross.angus/sitemaps-and-dom-structure-from-nested-unordered-lists-eab2b02950cf

]]>
Tree view from unordered list 2020-01-03T19:03:59-07:00
CSS Heart Switch https://codepen.io/Braunson/pen/eYmeMML https://codepen.io/Braunson/pen/eYmeMML Braunson

See the Code - See it Full Page - See Details

From https://dribbble.com/shots/8306407-I-heart-toggle

]]>
CSS Heart Switch 2020-01-03T18:30:30-07:00
SVG Bubble Slider https://codepen.io/Braunson/pen/KKwygjK https://codepen.io/Braunson/pen/KKwygjK Braunson

See the Code - See it Full Page - See Details

A dynamic menu I've built that can be used with either icons or text for the slider bubbles. This one is a fun emoticon rating slider - you can drag and throw or just click to show how you feel.

]]>
SVG Bubble Slider 2020-01-03T01:56:14-07:00
Skeleton loading with tailwind css https://codepen.io/Braunson/pen/bGNrLXr https://codepen.io/Braunson/pen/bGNrLXr Braunson

See the Code - See it Full Page - See Details

]]>
Skeleton loading with tailwind css 2019-12-28T22:23:10-07:00
Hand written SVG text animation https://codepen.io/Braunson/pen/PowKEyg https://codepen.io/Braunson/pen/PowKEyg Braunson

See the Code - See it Full Page - See Details

A little hand written text animation made with anime.js. The masking is a little rough but you get the idea :P.

]]>
Hand written SVG text animation 2019-12-28T19:35:47-07:00
Workout Tracker Design - #028 of #100Days100Projects https://codepen.io/Braunson/pen/gOOrVYb https://codepen.io/Braunson/pen/gOOrVYb Braunson

See the Code - See it Full Page - See Details

]]>
Workout Tracker Design - #028 of #100Days100Projects 2019-10-15T17:38:02-07:00
Weekly Coding Challenge #1 - Double slider Sign in/up Form - Desktop Only https://codepen.io/Braunson/pen/XWWXXwb https://codepen.io/Braunson/pen/XWWXXwb Braunson

See the Code - See it Full Page - See Details

My submission for week #1 of the Weekly Coding Challenge. Read more here: https://www.florin-pop.com/blog/2019/03/weekly-coding-challenge

]]>
Weekly Coding Challenge #1 - Double slider Sign in/up Form - Desktop Only 2019-10-12T00:46:56-07:00