Introduction to markup-refine-lib.css
markup-refine-lib.css is a lightweight CSS library that aims to provide a simple way to style HTML with an emphasis on a native HTML look. What's more, markup-refine-lib.css is fully responsive, just like the native styling of HTML.
Demonstration
To see how to use markup-refine-lib in your website's you can preview usage under: components preview section
To start using markup-refine-lib.css, simply add the following code to your website's HTML.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bartlomiej-aleksiejczyk/markup-refine-lib.css@0.9.5/dist/markup-refine-lib.min.css" />
By default, all elements will take up the available space. To prevent excessive stretching, use the class: responsive-container
<div class="responsive-container"> ...your html content </div>Examples and Usage
Form Elements
Typography
Main Heading
Subheading
This is a paragraph demonstrating bold , italic , and underlined text.
Keyboard Shortcut: Ctrl + Alt + Delete
Images
Tables
| ID | Name | Job | Date |
|---|---|---|---|
| 1 | John Doe | Junior PHP Developer | 2021-01-02 |
| 2 | Jane Smith | Lead Architect | 2020-12-19 |
| 3 | Jack Doe | Designer | 2022-08-09 |
Asci image
_
/\ | |
/ \ __ _ _ _ __ ___ _____| |__ ___ ___ ___
/ /\ \ / _` | | | |/ _` \ \ /\ / / _ \ '_ \ / __/ __/ __|
/ ____ \ (_| | |_| | (_| |\ V V / __/ |_) | (__\__ \__ \
/_/ \_\__, |\__,_|\__,_| \_/\_/ \___|_.__(_)___|___/___/
| |
|_|
Tree list
-
Fruits
- Apple
- Banana
- Cherry
-
Vegetables
- Carrot
- Broccoli
- Spinach
-
Dairy
- Milk
- Cheese
- Yogurt
Food
-
Fruits
- Apple
- Banana
- Cherry
-
Vegetables
- Carrot
- Broccoli
- Spinach
-
Dairy
- Milk
- Cheese
- Yogurt
-
Fruits
- Apple
- Banana
- Cherry
-
Fruits
- Apple
- Banana
- Cherry