Beginner friendly OS contribution initiative. Create a HTML/CSS/Tailwind template, or help maintaining the existing ones.

  • By Andrej Jurkin
  • Last update: Nov 21, 2022
  • Comments: 6

Template Bhai

Template Bhai is an OS initiative that allows beginner web developers create their first contributions to Open Source. Basically, we are collecting and maintaining simple html/css/tailwindcss templates.

Create your own or help maintaining the existing templates. We can get everyone involved!

Join Discord

If you are interested in getting started join our Discord community where we'll help you get involved https://discord.gg/5G9ZXft2SV

Contents

Important

This project is a monorepo created using Turborepo. Monorepo is a collection of different projects that are built using the same codebase. This allows us to have reusable components and packages that can be used by all projects.

If you are working on a template that doesn't have any dependencies in the monorepo, you can simply treat it as a normal project. CD into the project and run yarn dev as usual.

Getting Started

  • To install dependencies run yarn install
  • To develop all projects run yarn dev
  • To work on a specific app or package, cd to the respective directory and run yarn dev
  • To build all projects run yarn build

Creating New Templates

Example Using Vite & TailwindCSS

  1. run cd static
  2. run yarn create vite
  3. Name your template
  4. Select vanilla as the framework
  5. run cd {your_project_name}
  6. create postcss.config.js file
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
  1. create tailwind.config.js file
module.exports = {
  content: ["./**/*.{html,js,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. Add TailwindCSS derictive files to style.css
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Create vite.config.js file and put the below code
import { defineConfig } from "vite";

export default defineConfig({
  base: "",
});
  1. We're done! Run yarn install in the root project directory, then cd into your project and run yarn dev

Example Using Next.js

  1. run cd apps
  2. run yarn create next-app
  3. Go to /apps/{your_project_name} and open package.json
  4. Add name: "{your_project_name}" and version: "0.0.0" to package.json. The name must be unique in the project.
  5. run yarn install

Your project is ready.

Because we are working with monorepo, we need to use yarn workspace to run commands in the selected project.

To start Next.js project run

yarn workspace {your_project_name} dev

To add dependencies run

yarn workspace {your_project_name} add {dependency_name}

To add dev dependencies run

yarn workspace {your_project_name} add {dependency_name} -D

What's inside?

This turborepo uses Yarn as a package manager. It includes the following packages/apps:

Apps and Packages

  • web: a stub Next.js app
  • ui: a stub React component library shared by both web and docs applications
  • eslint-config-custom: eslint configurations (includes eslint-config-next and eslint-config-prettier)
  • tsconfig: tsconfig.jsons used throughout the monorepo
  • template: a stub Tailwind CSS & Vite template

Remote Caching

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:

npx turbo login

This will authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your turborepo:

npx turbo link

Github

https://github.com/AndrejJurkin/template-bhai

Comments(6)

  • 1

    NFT Landing Page Template

    This is my first PR here.. I didn't knew how to use Vite and Yarn, learnt it yesterday. So, If I have messed up something... Please forgive me and give some suggestion. :)

  • 2

    Landing page

    Finished version of the landing page. There are a few refactoring to be done like the hard-coded stuff and images etc. But I think it's a good starting point :)

  • 3

    How to create a draft for a new template in Projects?

    I want to contribute to template-bhai project.. but can't find any option to create a draft in the Project section? Or Should I just create an issue and then you can assign me to it and I can then work on it?

  • 4

    Task management template

    I have almost completed the template and will do some minor changes+ add the footer later

    for design reference: https://www.figma.com/file/m5Rx8QonRY93rsMWrzIGDV/Task-Management-Landing-Page?node-id=3%3A1377

  • 5

    Completed version of the portfolio template.

    Short Description

    This pull request contains the completed design/code for the portfolio template from HTML Design.

    Tech Stack

    Designed using HTML / Tailwind CSS and Vanilla JS

    Mobile View Screenshots

    design_mobile_1

    design_mobile_2 .

    Desktop View Screenshots

    design_desktop_1

    design_desktop_2

  • 6

    Add templates page

    • Added styling for the templates page
    • The functionality of the favorites filter is yet to be implemented. Will do it soon.
    • I've added the pages to the UI (Hidden in the UI for now) and will add the functionality soon.