Giter VIP home page Giter VIP logo

pretty-readme's Introduction


A community collection of README tools and badges to make your profile/repos more attractive.

Table of Contents

  1. Logos
  2. Formatting
  3. Images
  1. Badges
  2. Widgets
  3. Open Source Repos

What is this?

A better looking README on your repositories bring more attention to it and make it look more professional. The goal of this repository is to share tools and websites that allow you to make your READMEs look a lot better.

What is a Profile README?

GitHub now allows you to make a README for your profile! All you have to do is make a repo with your Username. So if your GitHub username is JohnSmith123 you'd make a repo called JohnSmith123. Once you go to that repo you can see in the top right corner a little display like so:

Click share to profile to have a README displayed when people go to your homepage! You can customize this README with resources from this repo or whatever you'd like!

Find some inspiration here, a curated list of awesome profile READMEs: https://github.com/abhisheknaiidu/awesome-github-profile-readme

What Makes a Good README?

A well made README catches the eye of the visitor. Attractive images and information about the repo looks a lot better than plain text. An eye catching logo at the top of your README is a great start. Utilizing badges and informative images about the project is a great way to make the README even cleaner. Examples are extremely important to show off your README's features and give users a preview before they get started.

Logos

A clean logo for your README is a great start to make your repository look professional. You can make logos with Photoshop, Gimp, or any other Image Processing Software. For GitHub READMEs you are able to utilize HTML formatting using the align tag. Below you can find examples of different ways to line up your logo in Formatting.

Formatting

Clean formatting is key to any good README. If you can utilize a clean format of sections in your README you're guaranteed to make it look good. A good format to follow is a header/logo to do with your project, followed by any badges below that. After you should have an informative section with a paragraph speaking about the project and what it does or tries to acheive. Then an installation/usage section if it's a tool or something to download. Followed by an FAQ and Credits/Contributing section. You can also make a Wiki with GitHub and put most of the information there.

Aligning Images:

Left Alignment - This is the default alignment

<img src="link" alt="logo">

Center Alignment - Center your image

<img src="link" alt="logo" align="center">

Right Alignment - This may cause formatting issues if you do inside of a text block.

<img src="link" alt="logo" align="right">

Images

Detailed images in a repo help show people passing by what it does and what it looks like. A clean screenshot unobstructed by any other windows apart from those to do with the application is a great way to catch eyes. Make sure its legible and easy to make out what's going on.

You can even embed a gif the same way you'd do an Image. This allows you to show some features of your project without needing to link to Youtube or another video sharing site.

You can use Imgur, Dropbox, or even GitHub itself to host your images. In a .github folder or images folder on your repo, you can add images to link to in your README and GitHub will host+cache them for you!

Resources

Below you can find links and examples of different README tools and badges.

Badges

Widgets

Github-NP

Display your Spotify now Playing in your GitHub Profile README!


Github Readme Stats

โšก Dynamically generated stats for your github readmes


waka-readme

Display Wakatime metrics inside of a README


hall-of-fame

It automatically highlights your new, trending, and top contributors, and updates every hour.


weather-readme-widget

It will display the recent weather report with a cool widget.


YouTube Stats Card

๐Ÿš€ Dynamic YouTube Stats Card for your github readmes & websites.

Channel Stats Card Video Stats Card

Open Source Repos

Contributing

If you'd like to contribute, feel free making a Pull Request with your changes. If you'd like to read more about how you can contribute, refer to CONTRIBUTING.md.

pretty-readme's People

Contributors

dhyeythumar avatar legendofmiracles avatar m4cs avatar suvamprasd avatar totallynotchase avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

pretty-readme's Issues

Add Information About Prettifying READMEs

Guidelines

  • Thoughtful information about how to make your README look cleaner.
  • If you are adding a tool/widget, display an example and link to the original source code/website.
  • Any troll/shitpost PRs will be rejected and reported.
  • Read Contributing.md for the CoC and information on how to make a Pull Request

What kind of information are we looking for?

If you decide to make a pull request, please add thoughtful information that adds to the repo instead of just repeating what we already have in a different way. Tools such as statistic counters, badges, widgets, etc are welcome additions. Any information such as tips and tricks for READMEs are extremely useful as well.

Add More Widgets for Examples

For this issue you should find widgets that are made to be displayed inside of READMEs. These can be anything from statistics to a random animation tool to make your READMEs look nicer.

Formatting:

**Title With Link to Repo**

Description of Widget

Image of Widget/Preview

<hr>

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.