{"id":13426375,"url":"https://github.com/tmcw/big","last_synced_at":"2025-05-14T18:02:48.127Z","repository":{"id":1655564,"uuid":"2381601","full_name":"tmcw/big","owner":"tmcw","description":"presentations for busy messy hackers","archived":false,"fork":false,"pushed_at":"2020-06-13T23:42:31.000Z","size":842,"stargazers_count":3299,"open_issues_count":0,"forks_count":162,"subscribers_count":48,"default_branch":"master","last_synced_at":"2025-05-08T02:57:41.944Z","etag":null,"topics":["javascript","presentation","slides","slideshow"],"latest_commit_sha":null,"homepage":"https://glitch.com/~tmcw-big-demo","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tmcw.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-09-13T21:39:10.000Z","updated_at":"2025-04-23T13:43:24.000Z","dependencies_parsed_at":"2022-07-18T03:30:43.948Z","dependency_job_id":null,"html_url":"https://github.com/tmcw/big","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmcw%2Fbig","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmcw%2Fbig/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmcw%2Fbig/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmcw%2Fbig/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tmcw","download_url":"https://codeload.github.com/tmcw/big/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254198452,"owners_count":22030964,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","presentation","slides","slideshow"],"created_at":"2024-07-31T00:01:33.047Z","updated_at":"2025-05-14T18:02:48.055Z","avatar_url":"https://github.com/tmcw.png","language":"JavaScript","readme":"# Big\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"540\" src='.github/logo.png' /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eBig.\u003c/strong\u003e The antidote to your presentation procrastination.\n\u003c/p\u003e\n\nA presentation system that works great for creative, hurried people making focused presentations. Stop tweaking fonts and filling slides with text. Big is a configuration-free system that naturally encourages good style.\n\n- [Features](#features)\n- [Quickstart installation: Glitch](#quickstart-installation-glitch)\n- [Alternative method: Local installation](#alternative-method-local-installation)\n- [Writing a presentation](#writing-a-presentation)\n- [Giving presentations](#giving-presentations)\n- [Using Big](#using-big)\n  - [Layouts \u0026 Images](#layouts--images)\n  - [Customizing the aspect ratio](#customizing-the-aspect-ratio)\n  - [Avoiding line breaks](#avoiding-line-breaks)\n  - [Auto advancing slides](#auto-advancing-slides)\n  - [Showing code](#showing-code)\n  - [Backgrounds \u0026 body classes](#backgrounds--body-classes)\n  - [Themes](#themes)\n\n## Features\n\n- The entire system is about 16kb\n- Slide layouts based on CSS Grid\n- Speakers notes appear in your developer console, which you can put on your other screen\n- Themes are just CSS, and easy to make\n\n## Quickstart installation: Glitch\n\nThe absolute fastest way to get started is with Glitch. Just click the link below, and you’ll get the freshest version of Big, in a Glitch app that you can edit and publish.\n\n\u003c!-- Remix Button --\u003e\u003ca href=\"https://glitch.com/edit/#!/remix/tmcw-big\"\u003e  \u003cimg src=\"https://cdn.glitch.com/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Fremix%402x.png?1513093958726\" alt=\"remix this\" height=\"33\"\u003e\u003c/a\u003e\n\nWith Glitch, your presentation will be online and open source by default. You can download it and continue to work on it offline, or if you want to start offline by default and have the files locally, follow the alternative method below 👇\n\n## Alternative method: Local installation\n\nIf you use NPM, the fastest way to get a copy of Big is this way:\n\n```bash\n$ npx degit tmcw/big\n```\n\nPreview the presentation locally by double-clicking on `index.html`. Create a repository with it to share the presentation with Github Pages, or post the files to any other hosting service. You’ll want to eventually use a real server instead of opening the file - to do that, install `serve` and run it:\n\n```bash\n$ npm install -g serve\n$ serve\n```\n\n## Writing a presentation\n\nBig presentations are webpages: slides are `div` elements, and any text styling or additional elements are addable by using HTML. The text in each div is sized to fit the screen. A slide can be as simple as:\n\n```html\n\u003cdiv\u003eBig\u003c/div\u003e\n```\n\nIf you want speakers notes - notes that you can see on your laptop screen but aren't shown on the main projector - you can use a `\u003cnotes\u003e` element:\n\n```html\n\u003cdiv\u003e\n  Citrus\n  \u003cnotes\u003eAren't oranges, lemons, and limes great?\u003c/notes\u003e\n\u003c/div\u003e\n```\n\nOpen your [developer console](http://debugbrowser.com/), and you'll see your speaker notes in it when you visit that slide! In most browsers, the console is detachable, so you can move it to a different screen or window when you're giving the presentation.\n\nThat's all you need to start writing presentations!\n\n## Giving presentations\n\nYou can advance slides the usual way, by clicking them. You can also use the left \u0026 right arrow keys, and the up and down arrow keys. On touch devices, you can navigate forward by tapping and also navigate forward and backwards by swiping.\n\n![](./.github/big-modes.png)\n\nBig also has three modes if you want to quickly jump to a slide, or print a presentation. You can switch between modes by hitting the `t`, `p`, and `j` keys.\n\n* **t**alk is the default mode. Slides are shown one at a time.\n* **p**rint: is useful for print output or as an overview: it'll include\n  two slides per printed page, and shows speakers notes along with slides\n* **j**ump: Shows many slides per page, useful for quickly finding a slide and 'jumping' to it. When you're in jump mode, you can use the arrow keys to quickly select a slide and hit Enter to jump to that slide, or click the\n  slide you want.\n\n## Using Big\n\nBig is designed to be simple, so if you just want to give a [Takahashi](https://en.wikipedia.org/wiki/Takahashi_method) style presentation with just text, you don't need to read any further! But it can also go far beyond the basics.\n\n### Layouts \u0026 Images\n\nLet's say you want to add some pictures to a presentation. If you just want the slide to _be_ an image, you can just make it the only thing on the slide:\n\n```html\n\u003cdiv\u003e\n  \u003cimg src='airplane.gif'/\u003e\n\u003c/div\u003e\n```\n\nAnd Big will appropriate size and place the image in the center.\n\nIf you want an image and text, you'll need a little more infrastructure: this is where _layouts_ come in. See, the idea of Big is that it sizes text as big as it can be. This has the effect that if you include something else on a slide, like an image, then it'll be squeezed out by ever-expanding text. So if you want to include an image and some text, you'll need to set some ground rules for how much space each is permitted to take up. Luckily, this also lets us do flexible layouts of image and text - you can choose how they're arranged, and they'll gleefully comply.\n\n```html\n\u003cdiv\n  class='layout'\n  style='grid-template-columns: 1fr;grid-template-rows:75% 25%;'\u003e\n  \u003cimg src='airplane.gif'/\u003e\n  \u003cdiv\u003eA longer description!\u003c/div\u003e\n\u003c/div\u003e\n```\n\nSo you'll see that we have two new attributes for this laid-out slide:\n\n`class='layout'` triggers a few styles from `big.css` that give the slide [grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid), make its subsections [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox), and tweaks how images work. For all slides that use layout, they'll use the layout class.\n\nThe second bit - the `style` attribute, is where the customization comes in. The MDN documentation for [grid-template-rows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) and [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) is where to start if you want to learn this inside \u0026 out, but for those that tend to learn from examples, here are some!\n\n**50% / 50% split columns: picture on the left, text on the right**\n\n```html\n\u003cdiv class=layout style='grid-template-columns: 50% 50%;'\u003e\n  \u003cimg src='airplane.gif'/\u003e\n  \u003cdiv\u003eA longer description!\u003c/div\u003e\n\u003c/div\u003e\n```\n\nGrids read from left to right, top to bottom, unless you customize that with extra CSS. You'll need to specify at least grid-template-columns or grid-template-rows to divide up a cell: if you specify columns, it'll be divided horizontally, if rows, vertically.\n\n**75% image on the top, 25% text on the bottom**\n\n```html\n\u003cdiv class='layout' style='grid-template-rows:75% 25%;'\u003e\n  \u003cimg src='airplane.gif'/\u003e\n  \u003cdiv\u003eA longer description!\u003c/div\u003e\n\u003c/div\u003e\n```\n\nThis slide will be laid out vertically, with the image taking up 75% of the vertical space, text 25%.\n\n***Three rows of a 25% image and 75% text***\n\n```html\n\u003cdiv\n  class=layout\n  style='grid-template-columns: 25% 75%;grid-template-rows:repeat(3, 30%);'\u003e\n  \u003cimg src='airplane.gif'/\u003e\n  \u003cdiv\u003eYes\u003c/div\u003e\n  \u003cimg src='airplane.gif'/\u003e\n  \u003cdiv\u003eNo\u003c/div\u003e\n  \u003cimg src='airplane.gif'/\u003e\n  \u003cdiv\u003eJust right, a lot of text goes here.\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Customizing the aspect ratio\n\nTo keep presentations uniform across devices, Big keeps the aspect ratio of presentations constant by default: by default, presentations are 4:3 aspect ratio.\n\nYou can customize the aspect ratio by setting a `BIG_ASPECT_RATIO` variable _before_ Big is included on a page:\n\n```html\n\u003cscript\u003eBIG_ASPECT_RATIO=2;\u003c/script\u003e\n\u003cscript src='big.js'\u003e\u003c/script\u003e\n```\n\nYou can also turn this feature off, by setting `BIG_ASPECT_RATIO` to `false`, which will let presentations occupy the aspect ratio of the device they're displayed on:\n\n```html\n\u003cscript\u003eBIG_ASPECT_RATIO=false;\u003c/script\u003e\n\u003cscript src='big.js'\u003e\u003c/script\u003e\n```\n\n### Avoiding line breaks\n\nBy default, Big will wrap lines of text. Sometimes you don't want this to happen, if you have some text that would look odd wrapped. In this case, you can use the `nowrap` class to keep some text from wrapping.\n\n```html\n\u003cdiv\u003e\n  beyond the \u003ccode\u003efor\u003c/code\u003e loop\n  \u003cbr /\u003e\n  \u003csmall class=nowrap\u003e@tmcw / Tom MacWright\u003c/small\u003e\n\u003c/div\u003e\n```\n\n### Auto advancing slides\n\nSometimes you'll give presentations like [PechaKucha](https://en.wikipedia.org/wiki/PechaKucha) and [Ignite](https://en.wikipedia.org/wiki/Ignite_(event)) involve auto-advancing slides. You can achieve this by adding a `data-time-to-next` attributes to slides: this will cause  them to auto-advance after a specific number of seconds:\n\n```html\n\u003cdiv data-time-to-next=20\u003e\n  My sales pitch in 20 seconds\n\u003c/div\u003e\n```\n\n### Showing code\n\nThere are many ways to do code highlighting in presentations. My personal\nphilosophy is that you should never show more than 8 lines of code\non a slide, and instead of using traditional semantic highlighting, you should\nmanually add emphasis to focus points in the code.\n\n```html\n\u003cdiv\u003e\n    problem one: make some animals rock\n    \u003cpre\u003evar animals = \u003cem\u003e['cats', 'dogs']\u003c/em\u003e;\u003c/pre\u003e\n\u003c/div\u003e\n```\n\n```css\npre {\n  margin:0;\n  padding:0.2em;\n  background:#fff;\n  color:#000;\n  font-weight:normal;\n}\n\npre em {\n  color:#000;\n  background:yellow;\n}\n```\n\nBut if you want traditional code highlighting, you can include [highlight.js](https://highlightjs.org/) to do just that. You'll want to include [the library](https://highlightjs.org/download/), and use `hljs.initHighlightingOnLoad();` like [in their usage instructions](https://highlightjs.org/usage/).\n\n### Backgrounds \u0026 body classes\n\nYou might want to customize the class \u0026 style of the body element for a single slide. For example, maybe you want to change the background of the full page. You can do this with two attributes: `data-body-style` and `data-body-class`:\n\n```html\n\u003cdiv data-body-style=\"background-image:url(airplane.gif)\"\u003e\n  \u003cdiv\u003eSlide will have an airplane background\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Themes\n\nBig presentations are hackable, so you can design yours from scratch, or by customizing one of the default themes, but there are also a few default themes so that you can get going with a solid aesthetic right off the bat.\n\nAt the very least, themes are CSS files. You can pick a theme by picking one in the `themes` directory. Bundled with Big are these themes:\n\n- **dark**: near-black background and near-white text, this one is my go-to for most presentations that rely on underpowered projectors.\n- **light**: like dark, but flipped.\n- **white**: instead of tastefully off-white and off-black, this theme uses stark, literal black \u0026 white colors.\n","funding_links":[],"categories":["JavaScript","Uncategorized","javascript","Open Source"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmcw%2Fbig","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftmcw%2Fbig","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmcw%2Fbig/lists"}