Rails 7, Bootstrap 5 and importmaps without nodejs

Our goal: remove nodejs

As many other people in the Rails community, I started setting up brand new Rails 7 projects, and I need to re-learn, at least partially, how to bundle the assets and distribute them.

I never fell in love with TailwindCSS, and therefore I usually setup my Rails apps to use Bootstrap as default.

But what I really like about Rails 7, is the idea of being able to get rid of not only webpack, but of nodejs entirely. The new importmaps feature is really appealing to me and I’d like to use it as long as I don’t need to bundle my javascript.

I have to say that esbuild does already a pretty cool job compared to webpack to simplify our lives, and make the process faster, but as long as I don’t need bundling, I’d like to not have a package.json file and being dependent on nodejs for my Rails app.

A pure and simple sprockets + importmaps app with no Foreman, no bin/dev, no yarn build --watch stuff.

Bootstrap is made of two parts: CSS and javascript. So I want to use importmaps for the javascript part and rely on sprockets for the CSS compilation from SCSS.

Rails default

By default, Rails 7 provides a new option --css=bootstrap,
but with my great surprise, this option adds both jsbundling-rails, cssbundling-rails, a package.json and esbuild.

Not as expected. Not what I want.

How to configure Rails and Bootstrap without nodejs

Default is not what I want, but I can still reach the goal and here I’ll explain how:

Stick with just rails new myapp
This will setup exactly the tools I want: sprockets and importmaps. It will also setup automatically for me stimulus and turbo, which is great because I use them most of the time anyway.

Add bootstrap-rails gem and enable the gem sassc-rails in the Gemfile. This will allow us to compile bootstrap from SCSS without node.

You can simply import Bootstrap styles in app/assets/stylesheets/application.scss:

// here your custom bootstrap variables...
@import "bootstrap";

That’s it for the CSS part. Running rails assets:precompile will generate what you want.

For the javascript part we need to do three things:

  • Precompile the bootstrap.min.js that comes with the gem, by adding to config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )
  • pin the compiled asset in config/importmap.rb:
pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true
  • Include bootstrap in your app/javascript/application.js:
import "popper"
import "bootstrap"

I prefer this approach rather than pinning a CDN because we avoid diverging versions of Bootstrap.


This is all you need to have Bootstrap fully working on Rails 7 without using node.

If you like this guide you can follow me on Twitter.

Source link

Extending Bootstrap components using utility classes only, just like Tailwind

In this post, I will talk about the utility classes concept to demonstrate how you can use Bootstrap in a way that allows you to build faster, better, and with no duplicate code or custom CSS classes.

Using the utility API included in the framework, you can create classes like mx-auto or shadow-5 to change the default style of an element, just like Tailwind does. This is a great approach that allows us to remain consistent, by having pre-built patterns (buttons, cards, etc.) and these classes to tweak the components quickly without messing with CSS.

To make things easier in my development process, I created a Bootstrap 5 extension to add new components that are not included in the core of the framework (e.g. avatars), new colors and typography, and an extended set of utility classes to allow you to customize your components directly into you HTML. It is open-source. Here is the demo and the GitHub repo.

Customizing Bootstrap components

How can you customize and extend a Bootstrap component? There are two approaches I recommend:

Using the Sass variables

I highly recommend using Sass when you want to change the default style provided by Bootstrap. Change the padding, color, border using variables. Bootstrap did a great job documenting each component and its variables.

Say you want to change the appearance of the alert component. Head to the documentation and scroll to the Sass variables section. You will find something like this:

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Replace the values with your own and compile it to see the changes using Gulp, Webpack, Laravel Mix, or your current setup.

Using utility classes

Instead of creating new custom CSS classes, you can use utilities. These allow you to avoid duplicate code and help you keep things very clean. Every time you need a custom style or behavior for your components, try using utility classes.

Say you want a pill button. Instead of going to your CSS and create a new class:

   border-radius: $border-radius-pill

It would look something like this:

<button type="button" class="btn btn-primary rounded-pill">Button</button>

So simple right? And this is just the easiest example. Things get much more interesting when you need more complex stuff.

Check out how I used the transform utilities to change the orientation or rotation of an element.

<div class="d-flex">
    <div class="transform translate-x-n1/2 translate-y-n1/2">
    <div class="transform rotate-12"></div>
    <div class="transform skew-x-12"></div>
    <div class="transform scale-50"></div>

Check out the documentation to see all the utility classes included in Webpixels CSS using the Bootstrap utility API.

Using the responsive breakpoints

Use the .transform-none to remove this behaviour on any breakpoint.

<div class="transform translate-x-32 transform-md-none">

Final thoughts

This was just a short introduction to the Bootstrap utility API and how you can use Webpixels CSS to extend the framework’s default look and feel.

What do you think about this approach? Is this how you build UIs too, or do you prefer a different method? 🤔

Source link

30+ Pricing Table For Your Next Responsive Website

A pricing table is quite essential as it demonstrates the value of a company’s product and represents the monetary worth of its features. For online business services, a pricing table plays an important role in increasing the sales of a product. These offer a unique way to keep a comparison of your service and package prices neat, concrete, and easily understandable. Pricing tables are intended to help customers quickly and efficiently determine which payment plan to choose or what service to purchase. Visitors can easily be converted into customers with the help of a visually attractive and clean pricing table. As a result, every web-based service company must define its pricing table and present it professionally on its business website.

In this article, you can easily perceive a design idea for a pricing table, as well as a wonderful collection of pricing tables that are free to use

Table of Contents:

Pricing table and its Importance

The Pricing Table is a fabulous way to showcase the prices for products, services, or packages attractively. To illustrate different price ranges, it is a simple arrangement of numbers or words with a minimal design to help retailers or other businesses. It is a feature that a business owner can utilize to increase sales while also understanding what services or goods a company provides. A well-designed responsive pricing table benefits users’ prospects in understanding what you offer, how you provide it, and how much it will cost to purchase your product or service. It is possible to rapidly increase the conversion rate by creating an attractive pricing table. This means that the pricing table is effective for every organization that sells products and services. If people can see the value of your offer through a clear pricing table design, they are much more likely to become paying customers. So, if you are determined to increase your sales and profits, you must understand the importance of a clear pricing table.

It isn’t easy to provide the pricing table in a clear and straightforward manner. It is preferable, to begin with, the most basic options. Then, using extended offers that clearly demonstrate the differences, expand them. Words like “Most Popular” or “Best Seller” might be used to highlight suggested options. The mid-priced option is frequently the most popular on the pricing table. Showing the buyer what each plan offers specifically is a fantastic idea. They will have a clear perception of what they are obtaining in this manner. They are, nevertheless, interested in the things that aren’t mentioned. This is much more critical in terms of growing sales. Images and other graphic elements can greatly improve the attractiveness of a responsive pricing table. However, please don’t overdo it with them.

Some inspiration design of pricing table

mailbluster pricing table Mailbluster Pricing Table

Mailbluster: Sending high-quality marketing emails and newsletters at the lowest feasible cost and without compromising deliverability is achievable with MailBluster, an email marketing platform developed by Technext Limited. Mailbluster offers two very clear design payment plans that help users easily choose their best option. One is Unlimited Sending Which allows you to send per 1K email for $0.10. And under the Free Forever plan, you will get 62K emails free per month. This pricing table can share information with potential customers and convert those people into paying customers.

Gitlab Pricing Table

Gitlab: The Gitlab pricing page is straightforward and strives to bring your attention to the prices right away. There are three different pricing options: free, premium, and ultimate. Each price plan is distinguished by its color and contrast, making it simple to consume at a glance. The table’s most enticing feature is the hover effect that has been added to each row. Hovering your mouse over each part will reveal more details, allowing you to choose the plan that best matches your needs. Their pricing table contains a price comparison chart in addition to monthly and yearly cost ranges.

Mailchimp Pricing Table

Mailchimp: Mailchimp is a well-known email marketing service. Its main purpose is to send out newsletters and automated emails in order to help your business develop. Free, Essentials, Standard, and Premium are the four marketing plans offered by Mailchimp. Beginners who wish to develop their audience and run campaigns while trying out some of Mailchimp’s tools and capabilities will benefit from the Free Marketing plan. It contains all of the fundamentals you’ll need to get started marketing. For most Mailchimp users who wish to expand their business, the Standard plan is the ideal option. It has tools and capabilities that provide you with a better understanding of your audience, and Mailchimp highly recommends it.

Github Pricing Table

Github: GitHub is a distributed version-control platform where users can collaborate on or adopt open source code projects, fork code, share ideas, and more. Their pricing page is quite well-designed and informative, which is a good thing. Their pricing structure is really reasonable for all customers. If you look above the pricing table, you’ll see the monthly/yearly pricing plans switch. They use the labeling trend of “most popular” by highlighting one specific plan to stand out from the rest. It’s a design choice that works well and encourages more signups for mid-tier plans over cheaper ones. With clean text, solid borders, and plenty of whitespaces, this pricing table is one of the most pragmatic designs on my list. 

Collection of pricing table(30+ pricing tables)

1. Simple HTML CSS Pricing Table:

Aniruddha Banerjee is the designer of this price table, which was created using HTML, CSS, and JavaScript. It is offered in two different configurations: monthly and yearly. There is a dependency on the JS library.

View Code

2. Pricing Table Using Flexbox:

It’s a responsive pricing table that was created using HTML and CSS. It is available in three different pricing plans: Basic, Premium, and Ultimate. Basic is the most affordable. All of the price ranges are validated on a monthly basis. It can be customized to meet your specific requirements.

View Code

3. CSS3 Pricing Table:

CSS3 was used to create this simple and appealing pricing table design. It comes with a stunning hover effect as well as a variety of pricing options to choose from. HTML Codex has created this beautiful pricing table for you.

View Code

4. Pricing Table Design:

There are three kinds of price plans available in this pricing table design. The first is free; all you have to do is sign up. The second is Pro, which costs $10 a month, and the third is the enterprise plan. You can also modify information based on your requirements. It’s built with HTML and CSS. Ishaan Sheikh developed this pricing table.

View Code

5. Responsive Pricing Table:

This basic pricing table design was made using CSS3, HTML5 and looks great. It has an eye-catching hover effect on the button and a range of price choices. Sanket Bodake has put up a lovely pricing table for you, courtesy of them.

View Code

6. Transparent Pricing Table UI:

Sofiullah Chowdhury is the creator of this pricing table template. It’s built with only HTML and CSS. It includes an interesting use of background image and hovers effect on the button. No dependency, you can use it on any of your projects.

View Code

7. Gradient Pricing Table:

This pricing table comes with a beautiful hover effect and box-shadow that creates this pricing template more eye-catchy. Moreover, it’s 100% responsive and compatible with all browsers and devices. This template was created by Assia Chemlali and built with HTML and CSS.

View Code

8. Multicolor Pricing Table:

This pricing table has a clean design built with HTML, CSS, and JavaScript. It comes with a gradient colors style and border-radius that creates a classy look to this pricing table. If you want to use this pricing template, you have to maintain some dependencies.

View Code

9. Html Pricing Table Template:

This design is effective because it can send clear and hassle-free messages to potential users. No dependency upon jQuery and any other libraries only Html and CSS were used to create this pricing table. Developed by Anup Kumar.

View Code

10. Pricing Table Snippet:

This pricing table snippet is built with HTML5 and CSS3. It comes with three pricing plans and a second pricing plan highlighted with red color. Anup Kumar also developed it. You can easily use this on your project and customize it according to your needs.

View Code

11. Responsive Free Pricing Table:

This pricing table comes with a beautiful hover effect and box-shadow that creates this pricing template more eye-catchy. Moreover, it’s 100% responsive and compatible with all browsers and devices.

View Code

12. Pricing table HTML CSS codepen:

This pricing table has four different pricing plans, each with its own color scheme. It also contains a lovely hover effect, a gradient color style, and a box-shadow, among other things. This price table was made with HTML and CSS.

View Code

13. Responsive Flip Pricing Table:

Super clean and lightweight best describes this white pricing table. It doesn’t rely on many colors or fancy features to stand out, but you can get a flip design with this pricing table. It comes with monthly and yearly pricing plans with three pricing versions. It’s built with HTML, CSS, and JavaScript, developed by Daniel Lim. It has a dependency on jQuery.

View Code

14. CSS Price Table:

This pricing design is one such example following a typical color scheme of dark shades. It’s built with HTML and CSS. The typography is stunning, and this clean design pricing table could work for almost any type of website. Scott Nix creates it.

View Code

15. Colorful Pricing Table:

Great visuals always sell. These might be product photos or colors, but visuals grab attention faster than text. This pricing table has a beautiful hover effect and various colors to help one specific pricing format stand out from the rest. Paulo Ribeiro created this pricing table with HTML and CSS.

View Code

16. Adaptive Pricing Table:

This pricing table comes with three versions of pricing plans, the most popular pricing plan is highlighted, and there is a spinning effect that occurs when you hover on it. Alex is the creator of this creative pricing table.

View Code

17. Pricing Tables:

Joseph Victory created this pricing template with dark color. It follows many traditional techniques like highlighting the table headers and keeping one column larger than the others. But most impressing things that different color choices in the title of pricing plans all grab your attention for various reasons. Dependency upon jQuery.

View Code

18. Interactive Pricing Table:

This pricing table has four different pricing plans, each with its color scheme. It also contains a lovely hover effect, a gradient color style, and a box-shadow, among other things. This price table was made with HTML and CSS. There are no dependencies, and Zeki Aygün created it.

View Code

19. Responsive Pricing Table With HTML & CSS:

This pricing table allows you to present your product price stylishly and responsively. There are five different price options available, each with a dark design. This price table also has an eye-catching hover effect. This also allows you to change the style of the header, feature list, and buttons. Lienusowl created this lovely price table.

View Code

20. Bootstrap 4 Pricing Table:

This pricing table template could meet your needs if you want a basic style pricing table. It’s built with the most popular Bootstrap framework, therefore you’ll need to include the Bootstrap CDN in the HTML page to utilize it. This pricing table has three distinct cost ranges that you can modify to meet your specific requirements.

View Code

21. Minimal Pricing Table:

The HTML, CSS, and Bootstrap 4 frameworks were used to create this basic and straightforward pricing table. Brusky was the one who came up with the idea for this pricing structure. There is no dependency; the only thing you must do is include the Bootstrap CDN.

View Code

22. Bootstrap Pricing Table:

This pricing table was created especially for the website of an internet service provider. It has a lovely hover effect as well as a light blue color scheme. HTML, CSS, and the Bootstrap framework were used to create it. This pricing table was developed by Sahar Ali Raza and is completely free to use in your project.

View Code

23. CSS3 Pricing Table:

It’s a simple pricing table that uses the box shadows option to create a clean and modern design. It comes with three main features to help the visitors quickly differentiate between the plans and choose the one that suits them more. Bootstrap 4 framework was used to create this awesome pricing table and developed by Gilles Migliori.

View Code

24. Pricing Table with Bootstrap:

In this pricing table template, you will get 16 unique design pricing tables. It’s built with the most popular frontend framework, bootstrap, and developed by Shamim khan. It has a dependency upon Bootstrap so, you just need to add bootstrap CDN.

View Code

25. Dark Pricing Table:

This pricing table was made with HTML and CSS and has a simple appearance. This pricing table has a polished appearance because of the dark design and border radius. There are no dependencies required, and this template can be used without difficulty. Rahul Dhiman is the creator of this pricing table.

View Code

26. Cool HTML pricing table:

It’s a responsive pricing table that was created using HTML and CSS. It is available in three different pricing plans: Basic, Premium, and Ultimate. Basic is the most affordable. All of the price ranges are validated on a monthly basis. It can be customized to meet your specific requirements. Developed by Aashima.

View Code

27. Pricing table demo:

This straightforward and visually attractive pricing table design was created using HTML5, CSS3, and JavaScript. Additionally, it has an eye-catching hover effect, and it is available in a number of different pricing options. Guillaume Schlipak has created this beautiful pricing table for you.

View Code

28. Responsive Pricing Table Design:

This example features a lot more straightforward pricing table and adheres to a more traditional design. It makes advantage of large pricing headers that have a wonderful hover effect. You may simply modify the structure and components, or you can stick with the same format, in order to include this price table into your website. Gehan Mendis is the creator of this responsive pricing table.

View Code

29. Tailwind CSS Pricing Table:

It is a simplistic pricing table created utilizing the most popular frontend framework, Tailwind CSS, for simplicity. It is available in three different price ranges: silver, gold, and platinum. It’s also fully responsive, which means that when the browser becomes smaller, the table parts split down into rows.

View Code

30. Creative Pricing Table:

The design of this price table is distinctive. It comes with three plans, after hovering then you can differentiate between the plans. The hover effect is extremely nice and innovative. Tailwind CSS was used to create this pricing table. It was developed by Rhythm Ruparelia.

View Code

This post has provided you with a comprehensive collection of free and open-source pricing tables that are assured to enhance the usability and performance of your website. We hope that this post has also satisfied you with important information to help you better
understand the pricing table.

If you like this post with Pricing tables examples, you might be interested in this one with navbar collection examples, which is also worth reading. We’ve previously written about comparable subjects.

Some recommended articles for you:

Source link

3 Portfolio Website using HTML, React and Flask.

I have built three portfolio, The first one is built with HTML, Bootstrap, and CSS, The second one is built with React JS, Bootstrap, and Undraw. The third one is built with Flask, Undraw, and Bootstrap. I did this, because.

If I’m getting an offer for HTML developer, I can show my HTMl Portfolio, this will increase 20% chances to get hired.
And the same with React and Flask. The link of these 3 websites, is here.

https://mrbluebird2.github.io – HTML Website
https://bvmt-react-portfolio.pages.dev – React Website
https://bvmt-flask-portfolio.pages.dev – Flask Website

Source link