Larger, more prevelant frameworks like Bootstrap, Material Design and the likes provide a lot of
elements which you might not use but would still waste your bandwidth and lead to larger
pagesize and slower loadtimes. Add to it some custom designing aspect which you might want to
add in later. This created problems maintaining which each update. So lightweight css
provides a baseline css boilerplate which contains only all the basic elements (plus some
selected utilities).
Note: The font, it uses no pixel values (or doesn't set a fixed
font size), that is by design. It is to respect user's chosen font-size (For
example: Extra Small / Small / Medium / Large / Extra Large in Chrome and so on).
Note: It is strictly CSS only. All the JS used on the page is only for
demonstration purpose.
Elements
Following are the items included in the css < 5KB minified and
gzipped
The class page is the first class of the page, it contains all the elements except
fixed positioned nav or footer (You need to align "main" accordingly, in case you are using
fixed divs).The class page contains all the elements of a traditional web page.
Navs / Headers / Mains / Footer etc.
However, to keep the structure simple, the page structure is divided in to 3:
Header
Main
Footer
The <header> has the navigation class=nav (with branding and
search as displayed above), the <main> part holds all the web page content
and <footer> has the footer. Pretty self-explanatory there.
There is also a class container which holds (contains) the elements so that they
don't go out of a certain maximum width, currently set to 1346px. What this
means is, for displays less than 1346px, the width will be 100%, for displays larger than that,
the items within container will have width as 1346px and align themselves centrally.
Color Palette
Primary
Complementary
Secondary
Tertiary
Responsive Grids
Use parent class as row i.e. class row and then class col-[1-12]. Here,
the number used takes up that parts from 12 available, col-1 is 1/12th of total width and so on
... till col-12 which takes up 100% of the width. If there is any width remaining, the
col-[1-12] will stretch till the rest of the width available. Note: This is FLEX Based, so this isn't supported on IE9
and below. On IE10, flex based grids do not work.
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-7
col-5
col-8
col-4
col-9
col-3
col-10
col-2
col-11
col-1
col-12
Content
Use class content, for a clear, spacious div which can be used for Content. For
demo, each rectangle with rounded corners are "content" divs.
Navbars
Use <nav> for a navbar. 3 classes to use with navs.
Use class navbar-brand for left sided logo, width is 50px and stretches upto
250px max
Use class nav-link for a right sided links like the one shown below. This one
auto expands, however there's a limit (of parent width - the logo).
Optionally, you can use class nav-search for a centered search div like the one
shown on this page (header above). This will stretch and take up all the available space
The navbar comes by default in black, easily can be changed with background-color in css. Here's
a demo nav.
Just add a container class in nav to have it aligned with page.
Also you can use class nav nav-fixed to have it fixed always at the top.
Breadcrumb
Adding class breadcrumb to a list to make it show like a breadcrumb below
The problem with internet quotes is that you cant always depend on their accuracy
Abraham Lincoln, 1864
<sub>: This is a subscript text
<p>: This is a normal paragraph: Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.
<sup>: This text is exponential!
<hr>: Above is an example of tag
<small>: This line of text is slightly smaller.
<strong>: The following snippet of text is rendered as bold text.Use
strong tag or class strong
<em>: The following snippet of text is rendered as italicized text.Use em tag or
class italic
<abbr>: Web pages are styled by CSS
Below is a code block, while this is inline code
# This program prints Hello, world!
print('Hello, world!');
print('This is some decently long line to see if this line goes out and overflows and does not instead break the line');
Text align left
Use class text-left for left-aligned texts
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum.
Text align right
Use class text-right for right-aligned texts
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on
purpose (injected humour and the like).
Centered
Use class text-center for centrally-aligned texts
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in
classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32
and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced
in their exact original form, accompanied by English versions from the 1914 translation by H.
Rackham.
Justified Text
Use class text-justify for justified text blocks
There are many variations of passages of Lorem Ipsum available, but the majority have suffered
alteration in some form, by injected humour, or randomised words which don't look even slightly
believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't
anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the
Internet tend to repeat predefined chunks as necessary, making this the first true generator on
the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model
sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum
is therefore always free from repetition, injected humour, or non-characteristic words etc.
Shades of text
We have class text-light, class text-lighter and class
text-lightest as demonstrated below
Normal:
a quick brown fox jumps over the lazy dog
Light:
a quick brown fox jumps over the lazy dog
Lighter:
a quick brown fox jumps over the lazy dog
Lightest:
a quick brown fox jumps over the lazy dog
Invisible Text
Use class text-invisible for invisible texts
This is a rather very small line of invisible text
There is actually some text between the "Invisible Text" and this line which is not visible.
Highlight Text
Use class highlight to highlight a span of text as shown below.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model
text, and a search for 'lorem ipsum' will uncover many web sites
still in their infancy.
Responsive Image
Use class responsive on any img tag to make it responsive.
Nothing specific about 950x450, just a relatively large image for testing responsive-ness
Responsive Media (video / iframe / embeds)
Use class video-responsive and iframe / embed / object as a child div (16:9)
Default
Use class video-responsive and iframe / embed / object as a child div for a 4:3
ratio
Lists
Lists & Nested lists
This is a nice list
Nice Ordered list!
Another item!
sub list item
sub list item
sub list item
Last list item!
Description Lists
description list term 1
description list description 1
description list term 2
description list description 2
description list term 3
description list description 3
An Item
Item
That item
Just an item with multiple terms but the same description.
Use class label for creating a label. Add primary / secondary / tertiary /
complementary for different colored label.
DefaultPrimarySecondaryTertiaryComplementary
Alert
Use class alert for creating an alert. Add primary / secondary / tertiary /
complementary for different colored alert.
Default alert with class alert×
Primary alert with class alert primary×
Secondary alert with class alert secondary×
Tertiary alert with class alert tertiary×
Complementary alert with class
alert complementary×
Fullscreen div
Use class fullscreen on a div to keep a div with 100% width and 100vh height.
This is a fullscreen div
Hide / Show / Misc classes
3 Classes which would help when eventually further stuff is added like Dropdowns / Toggles /
etc. Please note that the hide / show classes change the opacity &
pointer-events of the elements on
which they're being used and not the display property.
Adding class hide would hide the div
Adding class show would show the div
Adding class invisible would make the div invisible.
Adding class visible would make the div visible, if it was not already.
Adding class noborder would make the element have no border.
Adding class no-padding will make the element have 0 padding.
Adding class no-margin will make the element have 0 margin.
Final Thoughts
If you plan on using this, do note that, a lot of it is flex based so compatibility is from IE10
onwards. If you need support for older browsers, do not use this. I have left out the dropdown,
tooltips, popover, modal and other things intentionally because that requires javascript to
function properly and I intend on keeping this without any javascript. This is the first
release, if you intend on contributing - Please do :)
Credits
The night-mode toggle on the page is from Ali Soueidan