One file css template

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

DZSlides is a one-file HTML template to build slides in HTML5 and CSS3.

paulrouget/dzslides

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

readme.md

DZSlides is a one-file HTML template to build slides in HTML5 and CSS3.

template.html is the only file you need. Edit the file, add your content, change the style, and you’re done. To see the slides in action, just load the file in your browser.

• Slides can include any HTML5 content (text, image, video, iframes, …);
• Slides transitions are animated with CSS3 (sliding by default);
• Resolution independent (slides are scaled according to the size of the browser. The virtual dimension is 800×600);
• Fullscreen presentation (HTML5 FullScreen API supported) — press f to go fullscreen;
• Incremental content;
• Mobile Friendly (supports touch events);
• Printing to PDF

The features of DZSlides are intentionally limited to keep the template light and simple to understand. Shells are extensions that bring new features to your slides. Here, you’ll find 2 shells:

• shells/embedder.html to embed a presentation in a web page
• shells/onstage.html to show your slides with a control panel

To use them, just load the file in your browser, and follow the instructions.

When you press the left and right keys, you go forward and go back in your slides. But the slides can also respond to external messages. Messages can be sent through postMessage. So another web page can control the slides.

A cursor is a string of this form: 3.5 . The first number represent the current slide index. The second number represent the current sub-item index.

Parameters must be escaped.

Messages a DZSlides page can receive:

• REGISTER register the source of the message as a target to notify for any events;
• FORWARD move forward in the slides;
• BACK move back in the slides;
• START move to the first slide;
• END move to the last slide;
• SET_CURSOR cursor jump to the cursor;
• GET_CURSOR notify the source of the message of the current cursor;
• TOGGLE_CONTENT toggle the current slide content;
• GET_NOTES cursor notify the source of the message of the current notes content.

Messages a DZSlides page can send:

• CURSOR cursor sent to one target as a response to GET_CURSOR , and sent to all the registered target when updated;
• REGISTERED slides_title slides_count sent to one target as a response to REGISTER ;
• NOTES html_content sent to one target as a response to GET_NOTES .

Parameters a DZSlides page can have:

• autoplay (integer, values : 0 / 1 , default : 1 ) sets whether multimedia contents (audio, video) should be played automatically.

 DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE Version 2, December 2004 Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed. DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 0. You just DO WHAT THE FUCK YOU WANT TO. 

• Allow many elements to have the same next-order number — and activate them all at the same time.
• 2D presentation structure as in flowtime.js or reveal.js. Many presentations fit naturally into it, even in this template.html slides could be arranged in a 2D grid (in the overview) where every Part starts a new row of slides.

About

DZSlides is a one-file HTML template to build slides in HTML5 and CSS3.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Simple templates for small projects

License

macloo/html_css_templates

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Extremely simple templates for starting a small project.

Below is an overview of the terms. Open the similarly named HTML file and its CSS to see it in action.

A plain vanilla HTML page with no CSS.

This page has a CSS file attached. View page.

Web pages by beginners often look horribly different in different Web browsers. Often this can be traced back to the ways in which margin and padding are specified in the CSS. Some web browsers interpret some aspects of margin and padding differently from other browsers.

Resource 2: Inheriting box-sizing Probably Slightly Better Best-Practice — this is what I do now (except the ::before and ::after parts), but it might be overkill for beginners

Video: How box-sizing fixes a width problem (demo) Margin, padding, and how to center elements with margin: auto are discussed.

Beginners can get very confused about the differences among flex , float , grid , and inline-block (all covered below). Think of flex as the modern solution to solving challenges with a set of small items (or boxes) on a page. However, for a full-page layout solution, look to grid instead.

In CSS, float declarations are commonly used to place elements (such as images, or sidebars) on a page. They pose challenges for beginners, in large part because usually they must be «cleared» after use.

Problems with floats also arise because of the box-sizing issue (see above): when there is not enough space for a floated item, elements «fall down» below instead of floating side by side, as you intended. The error with insufficient space can be caused by the width of margins and padding — the sum of all the widths is greater than you calculated. This can also occur as part of inheritance (the «cascade» of Cascading Style Sheets).

Resource 1: float (a great reference at Mozilla Developer Network)

Video: Comparing floats with positioning (demo) Relative, absolute, and fixed position are discussed after floats.

The CSS grid has revolutionized grid-style page layouts, making floats and inline-block styles unnecessary in many cases (but not all). Good planning is required before you can implement the grid effectively. See also flexbox above.

Browser support for CSS grid is pretty good but not yet universal.

Resource 4: Layout Land — great videos by Jen Simmons, Mozilla Designer and Developer Advocate

Resource 5: Grid by Example — super-short videos that each show how to do just one thing, by Rachel Andrew (check out her website too)

It’s possible to replace the float techniques with display: inline-block . Each method has issues, and each method requires that we use box-sizing to make it work properly. Beginners must understand that they cannot use the two together; it’s an either/or choice.

Example Compares inline-block and floats.

This stylesheet is widely used throughout the web design community to smooth out all the differences among browsers. Load this first, then load your own CSS file. All the HTML files here (except basic.html) use Normalize.

The web design community expresses various opinions about use of the universal selector (*) in CSS. It should not be overused. I use it for box-sizing in most of my CSS stylesheets.

viewport / responsive pages

All the pages here use the viewport meta tag in the HTML head element. It helps to make your pages look good on small screens, i.e. mobile. However, just slapping the tag on your page does not instantly fix everything.

Источник