Simplette is a relatively basic CSS stylesheet whose main purpose is to provide a simple and yet functional set of styles that make it easier to generate web pages with a consistent appearance.
It started as a simple temporary stylesheet in the Simple-Chan project and was re-used and improved in multiple projects before getting its own dedicated repository that you are visiting today.
One of the main "advantages" is the fact that there is no hidden margins paddings or spacings, you have to manually toggle/enable them when and where you want them.
This might seem a bit cumbersome, but it makes it easier to generate a web page with a consistent appearance without having to fight the stylesheet itself.
And whatever spacing you chose to enable will always be the same value: 1em or 15px (Expect for the ".nice-border" and ".space-vert-small" classes)
It is also released into the public domain so that you can use it without having to bother about licensing.
Base :: Headings
Using Elements - By using the <h1> to <h6> elements. (Automatic line-break)
Using Classes - By using the .h1 to .h6 classes in a <span> element. (No automatic line-break)
Base :: Text & Paragraphs - A margin is added between every paragraph, see the first paragraph
Single line paragraph: You can use ".auto-paragraph-margin" on the container to automate the paragraph spacing.
Multi line paragraph:
If you don't add the aforementioned class, you will have to manually add <br> elements in between paragraphs.
A line-break is added at the end automatically in both cases.
Inline link example
Decorated text via elements:
Normal
Bold
Italic
Underline
Striketrough
Decorated text via classes:
Normal
Bold
Italic
Underline
Striketrough
Oblique
Overline
Classes have the same name as the text shown above.
Justified text can be done with the ".justified" class.
No example is shown here to make this paragraph easier to read.
See the grid section for an example of justified text.
By using the <sup> and <sub> elements, you can create some inline supertext and subtext in a paragraph.
Base :: Containers
Borders are shown for the demo with a special class defined in the demo page and the ".frame" class.
The light border represents the parent container, and the dark one is the container that may have margins and uses the described classes.
Simple div with no container class (Uses the full width and has no margin)
.magin-container ⇨ 15px of margin on all sides - (Left and right can be disabled on portrait mobile when combined with the ".no-mobile-indent" class)
.indent-container ⇨ 15px of margin on left - (Can also be disabled with the ".no-mobile-indent" class, see above)
.spacing-container ⇨ 15px of margin on top and bottom
Base :: Lists
Base :: Details
My content
It avoids having to use yet another container.
You simply have to add the ".space-vert-small" class to the summary.
Base :: Forms (Unfinished)
Buttons:
Inputs:
Base :: Helpers
The classes are applied to a container "<div>" element contained in a grid cell to help with visualisation.
Text with ".tl" or ".text-left".
Text with ".tr" or ".text-right".
Text with ".fl" or ".float-left", "<div>" becomes dynamically sized.
Text with ".fr" or ".float-right", "<div>" becomes dynamically sized.
Text with ".fl" or ".float-left", and ".full-width", "<div>" stays at full width. Has sizing issues however
Grid :: Grid
Every <div> element with the ".grid" class will be considered as a grid.
You can also choose its internal size by using the ".col-4", ".col-8" or ".col-12" classes for 4, 8 and 12 columns respectively.
Afterward, each cell has to be a <div> element with the ".cell" class.
You can specify their size by using the ".from-N" and ".to-N" classes where N is a number between 1 and the maximum amount of columns.
Rows are also automatically created when using the full row.
Alternatively, you can simple create a new <div> element and use it as another row.
Default: non-spaced cell that contain justified text.
Spaced: Uses the ".spaced" class on the <div> element with the ".grid" class.
Fancy :: Gradient
Fancy :: Borders - They are a bit wider for some reason, this will be fixed later.
<div> element with ".nice-border" class. (Thickness: 2px)
<div> element with ".nice-border" and ".inverted" classes.
Same element as above with the ".thick" class added. (Thickness: 4px)
Same element as above with the ".thick" class added.
Same element as above with the ".low-res" class added.
Same element as above with the ".low-res" class added.
The thick border uses a higher resolution image and can be made to use that same one as the default one by setting "$border-image-save-space" to true in "scss/abstract/options.scss".
This can help save around 570 bytes in the final compiled stylesheet and removes the ".low-res" class.
The smoothing can also be configures with "$border-use-smooth-scaling" if you use the low-res version.
Fancy :: Frame
This is a normal frame
This is a "<div>" element with the ".frame" class.
The frame also has the ".spaced" and ".padded" classes to ensure no elements overlap.
The margin on top is 0.5em for the title, and the inner padding is 0.5em on all sides to keep a consistent look if no title is used when you have a top margin or previous paragraph margin.
The frame also contains a "<div>" element with the ".title" class to get a WinForm-style title.
This is a dark frame
This frame was simply given the ".dark" class.
You can also add a stylish arrow in the title by adding the ".fun" class to the parent frame.
This paragraph or any other element is glued to the top of the frame below since the ".auto-paragraph-margin" class is not used.
Title
Text here.
This frame simply does not use the ".spaced" and ".padded" classes.