Queenie  Davis

Queenie Davis

1625953980

Building a collapsible sidebar with Stimulus and Tailwind CSS

Today we’re building one of the most common elements in web design — a lefthand sidebar for navigation — using Tailwind CSS and Stimulus.js.

Our sidebar will always take up 100% of the height of the page and we’ll be able to expand and collapse the sidebar by clicking a button. The whole thing will be accomplished with just a bit of Stimulus for the expand/collapse action and a small amount of Tailwind in our markup.

Here’s what it will look like when we’re finished.

To accomplish this, we’ll start with a plain HTML file, pull in Tailwind CSS to make things look nice, and use Stimulus for interactivity.

I’m writing this assuming a solid understanding of HTML and CSS, and some level of comfort with JavaScript.

If you’ve never seen Tailwind before, some of the classes we add for styling might feel a little odd. You don’t need any knowledge of how Stimulus works, but if you’re brand new you might want to read the Stimulus Handbook to help solidify some concepts as we go.

You can find the complete code for this project on Github.

Let’s dive in.

  • Project setup
  • Building a static sidebar
  • Creating the sidebar Stimulus controller
  • Connecting to the DOM
  • Wrapping up

#tailwind #tailwind-css #javascript #stimulusjs #stimulus

What is GEEK

Buddha Community

Building a collapsible sidebar with Stimulus and Tailwind CSS
Queenie  Davis

Queenie Davis

1625953980

Building a collapsible sidebar with Stimulus and Tailwind CSS

Today we’re building one of the most common elements in web design — a lefthand sidebar for navigation — using Tailwind CSS and Stimulus.js.

Our sidebar will always take up 100% of the height of the page and we’ll be able to expand and collapse the sidebar by clicking a button. The whole thing will be accomplished with just a bit of Stimulus for the expand/collapse action and a small amount of Tailwind in our markup.

Here’s what it will look like when we’re finished.

To accomplish this, we’ll start with a plain HTML file, pull in Tailwind CSS to make things look nice, and use Stimulus for interactivity.

I’m writing this assuming a solid understanding of HTML and CSS, and some level of comfort with JavaScript.

If you’ve never seen Tailwind before, some of the classes we add for styling might feel a little odd. You don’t need any knowledge of how Stimulus works, but if you’re brand new you might want to read the Stimulus Handbook to help solidify some concepts as we go.

You can find the complete code for this project on Github.

Let’s dive in.

  • Project setup
  • Building a static sidebar
  • Creating the sidebar Stimulus controller
  • Connecting to the DOM
  • Wrapping up

#tailwind #tailwind-css #javascript #stimulusjs #stimulus

anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

Building a Photo Gallery With CSS Grid and Tailwind CSS

Building a photo gallery has been a tough nut to crack for so many years. Throughout my career, I’ve used <table> layouts, <div>s with brittle margins and set widths, and tried my hand at flexbox. While all of these methods have worked, none of them felt like that silver bullet solution.

Then one day, the CSS gods bestowed upon us the magical power of CSS grids. Now, making a grid-based layout is an absolute delight. And, when we use grids with Tailwind CSS, we can create beautiful, functional UIs in a fraction of the time it used to take. So, let’s hop right in and see how we can use them to make a photo gallery.

  • The Set-Up
  • Our HTML
  • Layouts With CSS Grid
  • Mobile Layout
  • Styling With Tailwind CSS
  • The Wrap-Up

#tailwind css #css grid #css

Eric  Bukenya

Eric Bukenya

1624705980

How To Build an About Me Page With Laravel Sail and Tailwind CSS

Introduction

Laravel Sail is a Docker development environment included by default in Laravel since version 8. It allows you to quickly get a PHP development environment up and running, tailored for running Laravel applications with built-in support for NPM / Node.

In this guide, you’ll bootstrap a new Laravel application with Laravel Sail and create a styled “about me” landing page using Tailwind CSS, a utility-first CSS framework designed for rapidly building custom user interfaces. At the end, you’ll have a base that you can use to further develop a Laravel application using Tailwind CSS for the front end and Sail for the development environment.

Prerequisites

Although the code shared in this guide should work seamlessly across multiple environments and systems, the instructions explained here were tested within an Ubuntu 20.04 local system running Docker and Docker Compose. Regardless of your base operating system, here’s what you’ll need to set up in order to get started:

  • Docker installed on your local machine. If you’re running Ubuntu 20.04, you can follow Steps 1 and 2 of How To Install and Use Docker on Ubuntu 20.04 to set it up. Windows and MacOS users need to install Docker Desktop instead.

  • Docker Compose installed on your local machine. Docker Compose comes included by default with Docker Desktop for both Windows and MacOS systems, but Linux users need to install the Compose executable, following Step 1 of How To Install and Use Docker Compose on Ubuntu 20.04.

  • A code editor for PHP (optional). A code editor helps making code easier to read and to format, and can improve your productivity by pointing out issues before you execute your code. You can follow our guide on How To Set Up Visual Studio Code for PHP Projects to set up VSCode, a free code editor, within your local development environment.

  • Step 1 — Creating a New Laravel Application Using the Laravel Builder Script

  • Step 2 — Using Laravel Sail

  • Step 3 — Setting Up Tailwind CSS with Laravel

  • Step 4 — Creating a Landing Page

  • Step 5 — Styling Your Landing Page with Tailwind CSS

#tailwind css #laravel #css #tailwind

How to Build a Responsive Timeline Design using Tailwind CSS

Build a completely responsive timeline design with Tailwind CSS. Learn about the useful Tailwind utilities, customizing the framework, responsive design using Tailwind, extracting classes using @apply directive and so much more.

Starter Template GitHub Repository: https://github.com/ThirusOfficial/tailwind-css-starter-postcss

Source Code: https://github.com/ThirusOfficial/reponsive-timeline-tailwind-css

#CSS #Tailwind CSS #Tailwind

#tailwind css #css #tailwind