A fully functional and responsive landing page with Tailwind CSS in 60 seconds

vsblox — Thu, 11 Nov 2021 12:32:40 +0000

Hey there fellow devs!
As we all know meeting deadlines is the essence of being a good developer, so this blog will show you how you can make a fully functional and responsive Tailwind CSS landing page in 60 seconds.

The blox magic

This can be done easily by using UI kits, but it can be done even faster by using blox for VS code. blox is a recently launched VS code extension with 1500+ drop-in ready code snippets. It has four major categories of Web Application, Marketing, Ecommerce and Dev Essentials code blocks. These UI kits have further sub-categories so you can easily find the code block that you’re looking for according to any use case.

Now to the actual landing page, you start things off with a hero section. Scroll through the hero section and choose one that goes well with your design.

And with just a click, the code block is integrated into your project without any hassle and even no copy-pasting.

That’s the best thing about blox, you just click on preview and it gets integrated into your project right then and there.

Middle page sections

In order to add the next code block, all you have to do is add a section tag so that the code would be dropped within this section. After the Hero section, you can add a collaborations section from the cloud logo category. Then a feature section for different products and a stat section. Furthermore, for this landing page, you can add a review section from the blox category of testimonials.
Any product landing page needs a good pricing section where you can display a website’s offerings with an eye-catching CTA (blox also has an extensive CTA category for diverse use cases). Then a blog section before moving on to the last part. Closing things off with a footer section with different interactive elements that redirect users to different pages or sections of a website.

Preview

And we’re done!
This is how you can come up with a fully interactive and functional Tailwind CSS landing page in no time with blox. The best part about blox is that the process of adding components with a single click is easy as ever and you can make any necessary styling/design changes on the go without setting up anything else.

This is the final preview of the landing page that we’ve come up with for this example.

Supported frameworks

At the moment, blox supports Tailwind CSS with React, Angular, and Vue.js. All the code blocks can be used in your existing projects too if you’re using any of these frameworks.
Soon blox will also release code blocks for CSS frameworks such as Bootstrap, Material UI with support for Svelte, Alpine.js and Laravel. All the code blocks and their elements are fully functional, responsive, cross-browser compatible, and Web Content Accessibility Guidelines (WCAG) compliant. So, with just a little bit of tweaking you're ready to ship!

Happy developing!

The revolution in Front-end Development is here

vsblox — Mon, 08 Nov 2021 17:34:00 +0000

Hi everyone,
I’m Bruce and I’m a DevRel at blox. Me and my team are excited to bring you the alpha release of blox

What is blox?

blox is a VS code extension that lets you drop code snippets with a single click. It’s aimed at fast tracking the developer workflow through the ease of adding pre-built UI components without ever having to leave VS Code.

The blox story

I started using Tailwind CSS a couple years ago, I fell in love with the ease and seamlessness of the experience that comes with it. As someone who was managing a team of quite a few devs at that time, I started noticing the need to fast track our workflow as our clientele grew. We gave more than a couple of UI kits/libraries (for Tailwind CSS) a shot and we were over the moon with the difference they made, in the form of quicker dev hand-offs.
As time passed, I started pondering over the fact that we were spending too much time switching over windows, setting up frameworks, and applying configs for the UI components of the excellent resources we were using.
Then one day in the midst of a caffeine rush, I had a crazy yet simple idea that what if I could skip the copy-pasting and just do everything where I spend most of my time. I ran some ideas over with my team in the next Monday's meeting. And after spending a week or so on coming up with a product development strategy we went right into it.
I’ll dive deep into our product development journey and the ups and downs of building blox some other time. For now, I just wanted to share a glimpse of our journey and how we got here.

Integrations and supported frameworks

Currently, blox supports Tailwind CSS with Angular, Vue, and React at the moment. In the future, we have plans of gradually releasing support for MaterialUI, Bootstrap, Svelte, Alpine.js, and Laravel. Blox comes with an extensive code snippets library of more than 1500 codeblocks for a wide collection of categories. There are three component categories of Web Application UI, Ecommerce UI, and Marketing UI for fully functional and responsive web applications, landing pages, and web stores. There are a bunch of component categories that are built by expert designers after an extensive UX research. We’ve arranged the code block in an intuitive way
The code blocks require no configuration, and they’re also completely functional and responsive. So, once you’ve installed blox, you’re all set and good to go.

Try blox

Currently we’re doing a soft launch and you can install the alpha version of blox from its VSIX file. It’s available on blox's official website. Once you install it in your VS code, the “b” (blox) icon appears on the left side, along with your other installed extensions. Just open it up and start dropping the code blocks in your projects!

Forem: vsblox