+ This is a module!
+ Actually, this is the content div of a module
+ A module has two divs: a content div and a control div.
+ There's nothing to tag, just make two divs.
+ They're just the first and second div in a .module
+
+
+
+
+
+
+
+ By default, the content div
+ is 3 times wider than
+ the control div.
+ A .module.even-controls
+ divides the space evenly
+
+
+
+
+
+
+
+ The title bar displays the title attribute
+ of the .module. If the .module does not
+ have a title attribute, the title bar
+ does not appear
+
+
+
+
+
+
+
+ The colors of the panels are assigned to
+ CSS variables. Go ahead and change
+ them around, this style tag is editable!
+
+
+
+
+
+
+
+
+
+ Hold on! That module had two buttons! The
+ control div of each module has actually been
+ a div.buttons_v, aka a vertical button group.
+ You can add as many buttons as you want!
+ (click to reset)
+
+
+
+
+
+
+
+
+
+ You can also use .buttons_h to make a
+ horizontal button group. Changing your
+ .module to a .module.auto-controls lets
+ the content and control divs change their
+ width independantly. ()
+
+
+
+
+
+
+
+
+ Vertical and horizontal button
+ groups are great, and have the
+ advantage of adapting to any
+ amount of buttons automatically.
+ A .four_buttons must have four
+ buttons, but it organizes them
+ in a 2x2 pattern.
+
+
+
+
+
+
+
+
+
+
+ A .linebox places each child
+ element on its own line. The
+ child elements can be anything
+ you'd like, they'll probably work.
+ These are pizza! Special, clickable,
+ color changing pizza! The first and
+ last elements will match the
+ border-radius of the .linebox.
+
+
+
+
+
+
+
+
Gridform
+
+
but it's
+
+
labels are
+
+
the items
+ don't have to be <input>'s
+
<h3> elements
+
are for
+
+
+
+
+
+
+
+
+ I wrote this css because i wanted
+ to build localhost web interfaces
+ rather than learning tkinter, but
+ they always turned out ugly. I
+ hope it can help you.
+