Showing posts with label Framework. Show all posts
Showing posts with label Framework. Show all posts

Designing a help system with Diátaxis

Mike's Notes

This month's job is to design and build a working help system for users. I'm using the Diátaxis approach.

Resources

References

  • Reference

Repository

  • Home > Ajabbi Research > Library >
  • Home > Handbook > 

Last Updated

17/05/2025

Designing a help system with Diátaxis

By: Mike Peters
On a Sandy Beach: 29/07/2025

Mike is the inventor and architect of Pipi and the founder of Ajabbi.

What is Diátaxis?

"The Diátaxis approach divides documentation into four distinct content types:

  • Tutorials - Lessons that provide a learning experience, taking users step-by-step through hands-on exercises to build skills and familiarity.
  • How-To Guides - Practical guides focused on providing the steps to solve real-world problems.
  • Reference - Technical descriptions and factual information about the system, APIs, parameters, etc.
  • Explanation - Background information and conceptual discussions that provide context and illuminate topics more broadly.

The key premise of Diátaxis is that each content type serves a different user need and has a distinct purpose. Keeping them separated allows the content to be tailored and structured appropriately for that specific goal." - I'd rather be writing Blog

How-To-Guides

"A how-to guide is a recipe that shows the reader how to achieve something.

When the user is getting something done they are at work, applying their knowledge to a real task or problem. Now they need to be shown the key steps to take. What they need is a how-to guide.

Unlike a tutorial, a how-to guide is not responsible for providing a learning experience. It has no obligation to teach. It can assume that the reader has already acquired competence and familiarity with the machinery, its operation, the language used to talk about it and so on. Its obligation is to show a user how to get something done, step-by-step. It’s the obligation of the user to know what they want to get done, and to be able to apply the guide to the needs of their particular situation." - Daniele Procida

Example Outline by Daniele Procida

Overviews and introductory text

The content of a landing page itself should read like an overview.

That is, it should not simply present lists of other content, it should introduce them. Remember that you are always authoring for a human user, not fulfilling the demands of a scheme.

Headings and snippets of introductory text catch the eye and provide context; for example, a how-to landing page:

How to guides
=============

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Installation guides
-------------------

Pellentesque malesuada, ipsum ac mollis pellentesque, risus
nunc ornare odio, et imperdiet dui mi et dui. Phasellus vel
porta turpis. In feugiat ultricies ipsum.

* Local installation      |
* Docker                        |  links to
* Virtual machines       |  the guides
* Linux containers       |

Deployment and scaling
-----------------------

Morbi sed scelerisque ligula. In dictum lacus quis felis
facilisisvulputate. Quisque lacinia condimentum ipsum
laoreet tempus.

* Deploy an instance        |  links to
* Scale your application   |  the guides

Examples of Help Guides

HTML5 Boilerplate

Mike's Notes

I have been looking for a robust and proven base CSS example. I have found two open-source and freely available projects with a community behind them. Both are on GitHub and have good documentation, code and examples. I have used the best of both.

Now in production.

Resources

References

  • Reference

Repository

  • Home > Ajabbi Research > Library >
  • Home > Handbook > 

Last Updated

17/05/2025

Article

By: Mike Peters
On a Sandy Beach: 26/06/2024

Mike is the inventor and architect of Pipi and the founder of Ajabbi.

CSS Templates

  • HTML5 Boilerplate
  • Motherplate

HTML5 Boilerplate

"HTML5 Boilerplate is an HTML, CSS and JavaScript template (or boilerplate) for creating HTML5 websites with cross-browser compatibility." - Wikipedia
"The web’s most popular front-end template.

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package." - HTML5 Boilerplate

Resources

Motherplate

"Motherplate: A Responsive SCSS Boilerplate for Web Designers.

This is a bare bones HTML/CSS framework. This is what I'll typically start off most web projects with.
It includes a CSS reset and a bunch of minimal boilerplate styles that should come in useful for any project, including a responsive grid, typography, buttons, icons and forms.
It is not as in depth as something like HTML5 Boilerplate and doesn't include styled components like Bootstrap.
It can be used for a static web project as is, or you can copy the CSS folder into an existing framework (e.g. Rails)." - Motherplate

CCS

  • base/config Put all your variables in here e.g. colors, padding, border radius - this helps with consistency across your project.
  • base/grid A basic responsive grid system with 12 columns.
  • base/ie Any styles that you need to add in order for Internet Explorer to work.
  • base/mixins Reusabled Sass mixins e.g. clearfix.
  • base/print Basic print stylesheets to make your pages look better when printed.
  • base/responsive Add any global responsive styles here e.g. hide elements, show elements, resize elements.
  • base/shame Keep this to hand for any quick and dirty CSS you need to add but plan to tidy later.
  • base/type Basic styling for your typography.
  • components/alerts Alerts to notify or give feedback to the user
  • components/buttons Styles for any text links and/or buttons.
  • components/forms Some basic form styles.
  • components/media Styles for images, video etc.
  • components/nav Inline navigation.
  • components/other Other reusable styles that come in handy.
  • components/tables Styles for tables.
  • pages/home Styles that are specific to the homepage
  • pages/layout Global layout styles e.g. header, footer, logo etc.
  • main.scss This brings all the partials together.

Example

CSS
// Reset default browser styles using Normalize
@import "../../node_modules/normalize-scss/sass/_normalize.scss";

// Install FontAwesome for useful icons
@import "../../node_modules/font-awesome/scss/font-awesome.scss";

// Import fonts from Google
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Lato:400,700);

// Set variables and reusable mixins
@import "base/config";
@import "base/mixins";

// Import typical layout styles
@import "base/grid";
@import "base/type";

// Import reusable modules
@import "components/media";
@import "components/buttons";
@import "components/tables";
@import "components/forms";
@import "components/alerts";
@import "components/nav";
@import "components/other";

// Specific project styles, add any section specific sass modules here
@import "pages/layout";
@import "pages/home";

// Additional styles to think about
@import "base/responsive";
@import "base/print";

// If IE support is needed
@import "base/ie";

// For anything quick and dirty that needs thrown in
@import "base/shame";