DEV Community: SnippFlow

Turn Figma Design into a Real Website with Betheme & WordPress

SnippFlow — Tue, 22 Jul 2025 12:42:57 +0000

Full course:

BeAcademy — Turn Figma Designs into a Real Website with Betheme & WordPress - YouTube

In this practical course, you’ll learn how to recreate a complete website using BeBuilder and Betheme, starting from a ready-made Figma project. No coding ne...

youtube.com

Image Box with Expandable Icon Hover Effect

SnippFlow — Tue, 18 Feb 2025 14:48:32 +0000

User interaction is key to web design. One such element is the Image Box with Expandable Icon Hover Effect, which shows content in a dynamic way while keeping it clean and simple. This tutorial will show you how to do it with HTML and CSS.

See the following Codepen for a demo:

Full article: Image Box with Expandable Icon Hover Effect
CSS Snippets

Donation Widget with Progress Bar

SnippFlow — Mon, 03 Feb 2025 11:02:38 +0000

A Donation Widget with a Progress Bar is a simple way to encourage giving by showing progress towards a target. It combines a donation input field or button with a progress bar that updates as more donations come in.

See the following Codepen for a demo:

Full article: Donation Widget with Progress Bar
CSS Snippets

CSS Alert Message Boxes

SnippFlow — Mon, 27 Jan 2025 10:15:12 +0000

Alert message boxes are essential elements of any user interface providing visual feedback to the user about their actions, system messages or important info.

See the following Codepen for a demo:

Full article: CSS Alert Message Boxes
CSS Snippets

CSS text-wrap: balance vs text-wrap: pretty

SnippFlow — Mon, 20 Jan 2025 09:10:03 +0000

In CSS, the text-wrap: balance and text-wrap: pretty methods are used to optimize how text is wrapped within a block.

See the following Codepen for a demo:

Full article: CSS text-wrap: balance vs text-wrap: pretty
CSS Snippets

CSS Book Effect with 3D Animation

SnippFlow — Fri, 17 Jan 2025 11:00:54 +0000

The CSS Book Effect is a visual effect made with CSS that simulates the turning of book pages.

See the following Codepen for a demo:

Full article: CSS Book Effect with 3D Animation
CSS Snippets

WordPress Categories with post count

SnippFlow — Thu, 16 Jan 2025 14:31:09 +0000

The shortcode displays a list of categories with post count on your WordPress site.

PHP

// ---------------------------------------------------------- //
//           Snippflow Categories with post count             //
// ---------------------------------------------------------- //

function sf_categories_with_post_count() {
  $categories = get_categories();
  $output = '<ul class="sf-categories">';
  foreach ($categories as $category) {
      $output .= '<li><a href="' . esc_url(get_category_link($category->term_id)) . '">' . $category->name . '<span>' . $category->count . '</span></a></li>';
  }
  $output .= '</ul>';
  return $output;
}
add_shortcode('sf_categories_with_post_count', 'sf_categories_with_post_count');

CSS:

/* ---------------------------------------------------------- */
/*            Snippflow Categories with post count            */
/* ---------------------------------------------------------- */
.sf-categories { display:flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sf-categories li { position: relative; padding: 0; }
.sf-categories li a { display: flex; background-color: #fff; color: #000; border-radius: 8px; padding: 10px 16px; font-size: 1rem; text-decoration: none; transition: all .2s ease-in-out; }
.sf-categories li a span { display: block; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); padding: 3px 8px; font-size: 0.85rem; line-height: 1; background-color: rgba(0,0,0,.05); border-radius: 4px; }
.sf-categories li a:hover { background-color: #46A787; color: #fff; }
.sf-categories li a:hover span { background-color: rgba(255,255,255,.1); color: #fff; }

Full article: WordPress Categories with post count
CSS Snippets

Truncating Text with Text-Overflow

SnippFlow — Wed, 15 Jan 2025 09:17:06 +0000

When building websites we often find ourselves in situations where text within an html element goes beyond the available space. To keep things looking nice and readable we can use the css text-overflow property.

See the following Codepen for a demo:

Full article: Truncating Text with Text-Overflow
CSS Snippets

Using the currentColor property to change SVG color

SnippFlow — Tue, 14 Jan 2025 08:22:06 +0000

The currentColor is used in CSS to inherit the text color to other properties like fill and stroke in SVG. This way you can change the color of an entire SVG element by changing the text color.

See the following Codepen for a demo:

Full article: Using the currentColor property to change SVG color
CSS Snippets

Author Bio Box CSS in WordPress

SnippFlow — Mon, 13 Jan 2025 08:19:30 +0000

This Bio Box css code can help with reader engagement by giving the author more context and encouraging readers to read more of their posts.

PHP

// ---------------------------------------------------------- //
//                   Snippflow Author Box                     //
// ---------------------------------------------------------- //
function sf_author_box() {
    if (is_single()) {

        $author_id = get_the_author_meta('ID');
        $author_name = get_the_author_meta('display_name');
        $author_bio = get_the_author_meta('description');
        $author_posts_url = get_author_posts_url($author_id);
        $author_avatar = get_avatar_url($author_id, array('size' => 96));

        $output = '<div class="sf-author-bio">';
        $output .= '<img src="' . $author_avatar . '" alt="Avatar" class="author-avatar" />';
        $output .= '<div class="desc-wrapper">';
        $output .= '<h4>' . esc_html($author_name) . '</h4>';
        if ($author_bio) {
            $output .= '<p>' . wp_kses_post($author_bio) . '</p>';
        }
        $output .= '<a href="' . esc_url($author_posts_url) . '">View all posts by ' . esc_html($author_name) . '</a>';
        $output .= '</div>';
        $output .= '</div>';

        return $output;
    }
    return '';
}

add_shortcode('sf_author_bio', 'sf_author_box');

CSS:

/* ---------------------------------------------------------- */
/*                     Snippflow Author Box                   */
/* ---------------------------------------------------------- */
.sf-author-bio { 
    display: flex; 
    align-items: center; 
    gap: 20px;
    border-top: 1px solid rgba(0,0,0,.1);
    padding-top: 30px;
    margin-top: 30px;
}
.sf-author-bio .author-avatar {
    display: inline-flex;
    flex-shrink: 0;
    width: 80px; 
    height: 80px; 
    line-height: 0; 
    border-radius: 100%;
}
.sf-author-bio .desc-wrapper > * {
    margin: 0 0 10px 0;
}
.sf-author-bio .desc-wrapper > *:last-child {
    margin-bottom: 0;
}
.sf-author-bio .desc-wrapper p,
.sf-author-bio .desc-wrapper a {
    font-size: 0.9rem;
}

@media only screen and (max-width: 767px) {
    .sf-author-bio {
        flex-direction: column;
        text-align: center;
    }
}

Full article: Author Bio Box CSS in WordPress
CSS Snippets

Reading Progress Bar

SnippFlow — Fri, 10 Jan 2025 09:04:09 +0000

A reading progress bar that fills as you scroll makes the experience better by giving you a visual indicator of where you are on the page, makes navigation more intuitive and fun.

$(document).ready(function() {

if ($('body').hasClass('single')) {

    var totalHeight = $('main').outerHeight(true);
    var footerHeight = $('footer').outerHeight(true);
    var windowHeight = $(window).height();

    console.log(totalHeight);
    console.log(footerHeight);

    if (totalHeight > 0) {
        $('header').after('<div id="sf-reading-progress-bar"></div>');

        $(window).scroll(function() {
            var scrollPosition = $(window).scrollTop();
            var scrollableHeight = totalHeight + footerHeight - windowHeight;
            var progress = (scrollPosition / scrollableHeight) * 100;
            progress = Math.min(progress, 100);
            $('#sf-reading-progress-bar').css('width', progress + '%');
        });
    }
}

});

Full article: Reading Progress Bar
CSS Snippets

Animated Gradient Background

SnippFlow — Thu, 09 Jan 2025 11:52:56 +0000

An animated gradient background makes any website look elegant and cool. It makes your page more dynamic and pleasing to the eye.

See the following Codepen for a demo:

Full article: Animated Gradient Background
CSS Snippets