Getting started with Native-Minimal

Native-Minimal framework can be installed with npm or yarn. And used as a ready-to-go css bundle or SASS (.scss) source import.

Install with NPM

npm i native-minimal

Typography

Native-Minimal framework styles all the headings from h1 to h6. Simply use the appropriate heading tag in your HTML code.

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

Text and Links

Native-Minimal framework styles paragraphs and links. Just use the <p> tag for paragraphs and <a> tag for links.

Here's a sample paragraph. For links, you can use the <a> tag like this example link.

Lists

Native-Minimal framework styles both ordered and unordered lists. Use <ol> for ordered lists and <ul> for unordered lists.

Ordered List

1. List item 1
2. List item 2
3. List item 3

Unordered List

• List item 1
• List item 2
• List item 3

Code and Preformatted Text

Native-Minimal framework styles code and preformatted text. Use the <code> tag for inline code and <pre> tag for blocks of preformatted text.

Here's an example of inline code using the <code> tag.

Here's an example
of preformatted text
using the <pre> tag.
      

Tables

Native-Minimal framework styles tables. Use the <table>, <thead>, <tbody>, <tr>, <th>, and <td> tags to create tables.

Images, Video, and Audio

Native-Minimal framework styles media elements like images, videos, and audio. Use the <img> tag for images, the <video> tag for videos, and the <audio> tag for audio files.

Figure and Figcaption

Native-Minimal framework styles figure and figcaption elements. Use the <figure> tag to wrap images or media, and the <figcaption> tag for captions.

Form Elements

Our CSS framework styles form elements such as inputs, textareas, buttons, selects, and more. Use the appropriate tags to create and style your form elements.

Details and Summary

Native-Minimal framework styles details and summary elements. Use the <details> tag to create collapsible content and the <summary> tag for the title of the collapsible content.

Progress Bar

Native-Minimal framework styles progress elements. Use the <progress> tag to create progress bars.

Utility Classes

Native-Minimal framework includes utility classes for text alignment, hiding elements, and smaller text.

Use the .small class to make the text smaller.

Use the .text-left class to align the text to the left.

Use the .text-center class to center the text.

Use the .text-right class to align the text to the right.

Use the hidden attribute to hide an element.