QTML is an HTML framework that aims to to simplify web design with the use of pre-made classes.
It is very easy to use and also tries to adapt websites for a better mobile experience.
This "framework" is far from good and finished, it is just something that I wrote to use personally.
You can view the qtml.css file to see all the variables that you can reference (if you want to use the variables on other non-supported elements).
Template HTML File start with this file
Icon Resources
FontAwesome
FlatIcon
Made with QTML (CTRL+U to view source code on the website)
Cofs.fun roblox related website
PKings.net video platform, W.I.P
You may also take a look at the 'examples' folder in this Github Repo.
Docs Contents
Setup/Template
Prepare your web page with the Template:
<!DOCTYPE html>
<html lang="en" qtml-mode="light" qtml-theme="white">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QTML Template</title>
<link href="https://cdn.jsdelivr.net/gh/alvin677/qtml@latest/qtml.css" rel="stylesheet">
</head>
<body>
</body>
</html>Simple Button
Inside of the body, create a button and apply the simple class:
<body>
<button class="simple">Hello World!</button>
</body>
The following classes; simple, primary and secondary can be applied to certain elements to change their styles.
Head over to Elements for a list of supported classes for each element.
Common Classes
Some classes might be more commonly used than others, here is a short list of useful ones:
container center primary
Reset Styling
A couple of elements are intially given style data when linking the framework.
The following elements are
body i footer hr and * (the scrollbar is also affected)
Available Themes
purple cyan red magenta yellow blue burple aqua white black gray darkgray
Theme Modes
light dark
All colors are classes that can be applied to elements.
Color Palette
purple
cyan
red
magenta
yellow
blue
burple
aqua
gray
darkgray
black
white
accent - theme relative
Background Colors
purple-bg
cyan-bg
red-bg
magenta-bg
yellow-bg
blue-bg
burple-bg
aqua-bg
gray-bg
darkgray-bg
black-bg
white-bg
accent-bg - theme relative
Border Colors
purple-border
cyan-border
red-border
magenta-border
yellow-border
blue-border
burple-border
aqua-border
gray-border
darkgray-border
black-border
white-border
accent-border - theme relative
All supported elements and their available classes.
Footer
center
Button
simple primary secondary
large small
Input
primary
large small
Span
primary secondary status success notify error warning
large small
a
primary secondary
large small
i
primary secondary
large small
Div
outline bordernotification notification class puts the div outside of the right bottom corner of the screencontainer while container is not exclusive to the div element, you will find it commonly used with it
Iframe
primary
Textarea
primary
Table
primary
Hr
primary
All the utility classes that you may apply to elements.
container mostly used on the div element, position elements correctly
center used to center an element
color set color to default text color (based on mode)
transparent set background color to transparent
disabled disable an element
Glow
glow make element glow
glow-hover make element glow when hovering
shadow apply shadow around element
Gradient
gradient make gradient text
gradient-bg make gradient background
reverse-gradient gradient text but reversed
Text
text-sans sans font
text-serif serif font
text-mono monospace font
text-big enlarge text
text-header header-like text
text-space modify letter spacing
text-glow make text glow
text-glow-hover make text glow when hovering
text-left align text to left
text-center align text to the middle
text-right align text to the right
bold font weight 700
underline underline the text
underline-hover underline when hovering text
drop-shadow make a drop shadow
Border, Scale, Display and Position
sharp sharp border radius
round smooth border radius
noborder remove border
scale scale element
scale-hover scale element when hovering
in-flex inline flex display
in-block inline block display
flex flex display
block block display
hide display none
grid grid display
wrap flex wrap
gap gap
relative position relative
absolute position absolute
fixed position fixed
invisible set visibility to hidden
visible set visibility to visible
column flex direction column
row flex direction row
top vertically align on the top
middle vertically align in the middle
base vertically align on the baseline
select allow text selection
noselect disable all selection
pointer make cursor a pointer when hovering
auto automatically set width and height to 100%
auto-w automatically set width
auto-h automatically set height
All animations are classes that you apply to elements.
Text Pulse
pulse pulse the text with accent color, works with hr element as well
Fade
fade-in fade in animation
fade-out fade out animation
Scale
grow grow element from 0 to 1
shrink shrink element until gone
beat grow and shrink repeatedly
Gradient
If an element has the gradient or reverse-gradient class applied, you can add the animate class to animate it.
Ideas and what will be added/done:
blurclass??- make sure checkboxes and such work fine
labelsupport