Hydrogen Framework showcase

by Aoz0ra

Table of contents

  • This
  • is
  • just
  • another
  • example

xsmall screen

small screen

medium screen

large screen

xlarge screen

Work in progress — This is really coming together now!


Header 1 (secondary text)

Header 2 (secondary text)

Header 3 (secondary text)

Header 4 (secondary text)

Header 5 (secondary text)
Header 6 (secondary text)

Hydrogen's default visual style, for now, resembles the Oxygen theme for KDE. It'll likely default to something more modern when this is finished enough.

Colours:

Red Orange Yellow Lime Green Aqua Green Cyan Sky Blue Blue Purple Pink Hot Pink
Red Orange Yellow Lime Green Aqua Green Cyan Sky Blue Blue Purple Pink Hot Pink
Red Orange Yellow Lime Green Aqua Green Cyan Sky Blue Blue Purple Pink Hot Pink
Red Orange Yellow Lime Green Aqua Green Cyan Sky Blue Blue Purple Pink Hot Pink

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Placeholder image

I'd just like to interject for a moment. What you're referring to as Linux, is in fact, GNU/Linux, or as I've recently taken to calling it, GNU plus Linux. Linux is not an operating system unto itself, but rather another free component of a fully functioning GNU system made useful by the GNU corelibs, shell utilities and vital system components comprising a full OS as defined by POSIX.

Placeholder image

Many computer users run a modified version of the GNU system every day, without realizing it. Through a peculiar turn of events, the version of GNU which is widely used today is often called Linux, and many of its users are not aware that it is basically the GNU system, developed by the GNU Project.

Placeholder image

There really is a Linux, and these people are using it, but it is just a part of the system they use. Linux is the kernel the program in the system that allocates the machine's resources to the other programs that you run. The kernel is an essential part of an operating system, but useless by itself; it can only function in the context of a complete operating system. Linux is normally used in combination with the GNU operating system the whole system is basically GNU with Linux added, or GNU/Linux. All the so-called 'Linux' distributions are really distributions of GNU/Linux.

All 12 colours can be used as accents:

Table Caption
Table AaBbYyZz 0123456789
element element element
element
spanning
2 rows
element spanning 2 columns
element element

This div is 100vh high

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme. Save time in Word with new buttons that show up where you need them. To change the way a picture fits in your document, click it and a button for layout options appears next to it. When you work on a table, click where you want to add a row or a column, and then click the plus sign. Reading is easier, too, in the new Reading view. You can collapse parts of the document and focus on the text you want. If you need to stop reading before you reach the end, Word remembers where you left off - even on another device.
Here I am, showing off
another multi-column,
multi-row, and flexible layout...

On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab.

You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command.

Placeholder image

Caption text

To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.

Bootstrap-inspired stuff:

Text and typography

Text Smaller text with .small

Text Larger text with .lead

abbr element ABBR.INITIALISM

Blockquote

- me

Blockquote to the right

- also me

x = ab + y

kbd element: Meta-D

Sample output

text inline code element more text

Text in a <pre> element
can be used for code,      preserving
that giant space there ^

Just gotta watch out for indenting and
that final EOL.
Scrollable
pre
element
with
a
maximum
height
of
350
pixels













asdf

Buttons

Forms

Helpers

Images

Tables

Bottom Of Page.