CSS Frameworks

4 small projects using Tailwind CSS, Bulma, Materialize and Bootstrap 5.

See all projects on CodePen

1) Food Ninja - Tailwind CSS

A recipe website to understand Tailwind CSS basics.

See Demo on CodePen

See food-ninja folder

Features

• setting up Tailwind CSS for development.
• handling fonts, colors, margin, padding and borders.
• extending theme colors and customizing font with tailwind.config.js.
• using flexbox, grid and responsive classes.
• reusing classes for cards, badges and buttons with @apply directive.
• displaying icons from Heroicons.
• building a responsive navbar.
• adding effects and transitions on hover.

Based on Tailwind CSS Tutorial by Shaun Pelling - The Net Ninja (2020).

2) Ninja Coffee - Bulma

A product page to understand Bulma basics.

See Demo on CodePen

See ninja-coffee folder

Features

• handling font sizes and colors with Bulma.
• working with section, container and spacing classes.
• building a navbar for desktop and mobile with a burger menu.
• adding some breadcrumbs, a message box and a footer.
• playing with grid columns and responsive classes.
• generating cards for related products.
• using tabs and rendering a modal with JavaScript.
• creating a form with text, checkbox and select fields.

Based on Bulma CSS Tutorial by Shaun Pelling - The Net Ninja (2020).

3) Photo Ninja - Materialize

A photography portfolio website to learn Materialize basics.

See Demo on CodePen

See photo-ninja folder

Features

• formatting texts and handling colors with Materialize.
• displaying icons from Material Icons and Font Awesome.
• creating a header for desktop and mobile with a burger menu and a sidenav.
• building a responsive grid.
• pushing, pulling and hiding content according to screen size.
• using Materialize JavaScript for tabs.
• rendering images with lightbox and parallax tools.
• generating a form with a built-in date picker and handling buttons.
• customizing colors and displaying tooltips next to social icons.
• adding a footer and enabling smooth scroll with scrollspy.

Based on Materialize Tutorial by Shaun Pelling - The Net Ninja (2018).

4) Ebook Landing Page - Bootstrap 5

A responsive landing page with Bootstrap 5.

See Demo on CodePen

See ebook-landing-page folder

Features

• discovering Bootstrap 5 new features.
• exploring colors, typography, button and utility classes.
• playing with containers, grid layout and cards.
• using navbar, list group, tooltips, tabs and dropdowns.
• working with forms, modals and offcanvas.
• displaying Bootstrap Icons.
• customizing Bootstrap colors with Sass.

Based on Bootstrap 5 Crash Course Tutorial by Shaun Pelling - The Net Ninja (2021).