Giter VIP home page Giter VIP logo

johndev19 / open-source-web-components Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 2.62 MB

Open Source Web Components is a community-driven project aimed at providing a library of reusable, customizable web components - aimed at fostering contributions through pull requests.

Home Page: https://oswebcomponents.vercel.app/

License: MIT License

HTML 82.19% JavaScript 3.50% CSS 14.31%
contribute contribution pull-request web-development first-commit first-contributions

open-source-web-components's Introduction

Translation


Open Source Web Components

A collection of simple web components (e.g., buttons, forms, carousels) that beginners can improve or create new components for.

Table of Contents

Introduction

Open Source Web Components is a community-driven project aimed at providing a library of reusable, customizable web components - aimed at fostering contributions through pull requests. Our goal is to create a learning environment for beginners while also building a valuable resource for developers of all skill levels.

Getting Started

Prerequisites

  • Basic knowledge of HTML, CSS, and JavaScript
  • A modern web browser that supports Web Components (most up-to-date browsers do)

Installation

  1. Clone the repository:

    git clone https://github.com/JohnDev19/open-source-web-components.git
  2. Navigate to the project directory:

    cd open-source-web-components
  3. Open the index.html file in your browser to see the component showcase.

Adding New Web Components

To add new web components to the project, follow these steps:

  1. Copy the template.html file from the root directory:

    cp template.html components/your-component-name.html
  2. Rename your-component-name.html to a unique name that describes your component.

  3. Add your HTML, CSS, and JavaScript for the new component within this file. Ensure your CSS and JavaScript are directly included in the template file for ease of use.

  4. If your component uses images, add them to the appropriate directory within assets (e.g., assets/buttons/buttons-img for button images) and reference them appropriately in your HTML.

Contributing

We welcome contributions from developers of all skill levels! Here's how you can contribute:

  1. Fork the repository
  2. Create a new branch (git checkout -b feature/new-component)
  3. Make your changes
  4. Commit your changes (git commit -am 'Add a new component')
  5. Push to the branch (git push origin feature/new-component)
  6. Create a new Pull Request

For more detailed instructions, please see our CONTRIBUTING.md file.

Ideas for Contributions

  • Improve existing components
  • Add new features to components
  • Create new components
  • Improve documentation
  • Fix bugs
  • Add tests

Code of Conduct

We are committed to providing a welcoming and inclusive experience for everyone. Please read our Code of Conduct before participating in our community.

License

This project is licensed under the MIT License - see the LICENSE file for details.

open-source-web-components's People

Contributors

johndev19 avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.