Solodev's public fiddles
-
Boxes with a Distinct Hover Effect
When utilizing cards or boxes, it’s helpful to create a hover effects that creates the allusion of depth so as to better indicate to the user that they are on a clickable item.
-
Navigation Dropdowns with Bootstrap
: A primary/main navigation is one of the first things you tackle when developing a website. Dropdowns can be tricky; fortunately, bootstrap helps with some default classes you can tap into
-
How to Create a Flyout Bootstrap Modal
By default, bootstrap modals will appear in the center of the screen with a slight animation from top-down. However, depending on your UI or overall design, you may want to have modals flyout from the sides.
-
Layering Profile Images Over One Another
If you need to show a list of users, members, or anything similar, you may want to display profile images over one another to both conserve space and create a feeling grouping amongst those users.
-
Creating Sortable Lists with SortableJS
SortableJS allows your users to reorder items in an unordered lists, giving users a visual dimension to specific actions and modifications.
-
Creating a Form that Posts to Google Maps
If your webpage relies on the user getting directions to a specific location, you may want to post that inquiry to Google Maps so that the user can get immediate (and largely) accurate descriptions.
-
Add Font Awesome Icons to Your Input Fields
Adding icons to your input fields (such as login or registration forms) gives the form a touch of personality and helps break up otherwise plain input fields.
-
Using Text Animations with Slick Slider
Adding text animations to your slider can help emphasize content and create smooth transitions between slides.
-
Bordered Services Boxes with Bootstrap
To emphasize the division between default bootstrap columns, you may want to add borders to clean separate content; Added benefits is the ability to create hover properties.
-
Use bootstrap to create a form with inline inputs
No-Library (pure JS), HTML, CSS, JavaScript
-
Social share icons with unique hover effects
No-Library (pure JS), HTML, CSS, JavaScript
-
News Boxes that Show Additional Information on Hover
No-Library (pure JS), HTML, CSS, JavaScript
-
Designing a Department or Directory Page (Part 2)
The most important information when showcasing a department or directory is a mission statement, leadership biography, and pertinent contact information.
-
Creating a Department Listing or Directory Page (Part 1)
If you have multiple departments or directories in your organization, it’s important to create a single page that lists important info as well as links to separate pages.
-
Showcasing your Team or Organization Leadership
No-Library (pure JS), HTML, CSS, JavaScript
-
Stylish and Informative Breadcrumbs
No-Library (pure JS), HTML, CSS, JavaScript
-
Icon and Background Color Change on Hover
No-Library (pure JS), HTML, CSS, JavaScript
-
Text with Dark Background on Hero Sliders
No-Library (pure JS), HTML, CSS, JavaScript
-
Hero with Video Background
No-Library (pure JS), HTML, CSS, JavaScript
-
Absolutely Positioned Images
No-Library (pure JS), HTML, CSS, JavaScript