Code Monkey home page Code Monkey logo

api-documentation-html-template's Introduction

API Documentation HTML Template

A simple, modern and readable HTML template for APIs documentations

You can take a look with this DEMO.
Or this other One Content Column DEMO.

Current version : 1.0.5

What's new in the latest version :

  • Fix list on 3 content columns <ul> and <ol>.
  • Removed jQuery usage to vanilla js.
  • Update of css fonts.
  • Fix menu with long text.
  • Updated Google Font call.
  • Removed usage of Roboto Condensed font.
  • Updated menu data-target to use content.
  • Added .central-overflow-x util class to avoid overflows.
  • Added .break-word util class to avoir overflows without adding a scrollbar.
  • Added optional Version & Last updated infos
  • Added responsive menu with burger icon menu button.

Credits

  • Google Font (Roboto|Source+Code+Pro)
  • Highlight.js 9.8.0
  • A Creative Common logo: platform by Emily van den Heever from the Noun Project.

How to use it

This is a simple HTML template, do whatever you want with this !

To use One Content Column Version, don't forget to add one-content-column-version css class to <body> like in one-content-column.html file.

Utils CSS class

If you have an element in central column that overflow on third column, you can add it central-overflow-x css class to prevent it.

Example:

<table class="central-overflow-x">...<table>

If you doesn't want a scrollbar, you can use break-word css class to prevent it.

Example:

<code class="higlighted break-word">http://api.westeros.com/with-a-very-very-very-very-very-long-end-point-url/get<table>

Contributors

Special thanks to TheStami for his contribution creating One Content Column version !

Contribute

We're always looking for:

  • Bug reports, especially those for aspects with a reduced test case
  • Pull requests for features, spelling errors, clarifications, etc.
  • Ideas for enhancements

api-documentation-html-template's People

Contributors

florian-corellis avatar floriannicolas avatar thestami-zz 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  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  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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

api-documentation-html-template's Issues

Nouvelle version

Salut Florian,
voilà longtemps que je cherchais un truc simple pour faire une doc; j'en avais même acheté 2 mais ils ne me convenaient pas jusqu'au moment ou je suis tombé sur ton template qui est génial; du coup, je l'ai modifié et en ai fait une version v2 avec fichier de définition/customization xml, tags possibles, ...; j'ai placé cette version sur mon repositonary : https://github.com/VDHSoft-com/API-Documentation-HTML-Template-V2 avec demo dispo ici (j'ai repris la tienne) : https://www.vdhsoft.com/api-doc/index.php - c'est bien sûr tout à fait libre et non commercial et j'ai laissé les liens vers ton github dans les différents fichiers; j'espère que c'est ok pour toi; j'attends ton feedback mais je ne sais pas si tu es toujours actif vu que le projet date d'un bout de temps ....
bien à toi,
Domi.

New version 2.0 cutomizable available here : https://github.com/VDHSoft-com/API-Documentation-HTML-Template-V2
demo : https://www.vdhsoft.com/api-doc/index.php

PS: I can translate into english if needed

Looks different when I download it

The only underline in vs code is in the css in the body.
image

It looks different somehow:
this is your demo when i open it through your github link:
image

And this is after I downloaded and opened it in chrome:
image

Some more formatting issues found relating to wrapping

Hi the screenshot attached shows various things that would be great to make more robust in the CSS. They are....

  1. menus wrap and are not aligned properly on the second line of text
  2. the urls for end points don't wrap
  3. tables don't deconstruct/wrap

The edited index.html that I took this screenshot from is included. Hopefully you can see that I haven't done anything odd at all here, it's all very simple standard HTML, I don't think I've introduced a single new html tag that wasn't already in the sample index.html file.

index.txt

image

Any chance to include a footer ?

This is very beautiful template, is it possible to have a footer on the end of the page ?

This is where I'm at right now:

  <ul>
    <li class="scroll-to-link active" data-target="<%= menu.contents[0] %>">
      <a><%= menu.contents[0] %></a>
    </li>
    <li class="scroll-to-link" data-target="<%= menu.contents[1] %>">
      <a><%= menu.contents[1] %></a>
    </li>
    <li class="scroll-to-link" data-target="<%= menu.contents[2] %>">
      <a><%= menu.contents[2] %></a>
    </li>
    <a class="to-end" href="/thanks">Thanks</a>
    <li>
      <a href="/">Homepage</a>
    </li>
  </ul>

So I've added an element to the list of ul#li and styled that with:

.to-end {
    position: absolute;
    bottom: 0;
    size: 1rem;
}

It looks fine, but not on the phone size screens.
Thanks

Is the menu meant to appear on mobiles?

Just to check, if on a mobile in portrait. Odd I see no menu at all. Is that intentional?

It so, as a feature request, wouldn't it be a good idea to make it slide out and maybe have a burger icon or use the icon already present in the header to activate it?

Thanks for your time

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.