Introduction
Static.css is a simple light css library for building web-docs / simple web-pages. Unlike most css frameworks it does not contain too many contents; which eventually helps to build a lighter web platform . It gives exacly what you initially need for building web-doc / web-page. And this documentation helps to override for further customization. As most of you already assumed, this library is not suited for building a dynamic web-app. It is specially designed for building simple light weight web pages. Even though it is a lighter library compared to other css frameworks, it covers almost all essential features you need to create your page. Also a cool feature, this library is not JavaScript dependent! Some people may see this as a drawback, it is intentionally done to make the library light weight and use the full potential of HTML+CSS (like old websites!).
To start using this libray either use stylesheet links or download the bundle. And follow the Getting Started section to know more about tags & how to override for further customization.
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
Development
Static.css intially developed by:
This project is open souce. Feel free to introduce any new features or other further development. Visit GitHub repository.
Download / Installation
Direct link:
For quick access I recommend using the direct link to our library. Use one from Static.min.css / Static.css file. Both are same but the .min version has all the unnecessary character removed to make the file size smaller.
Copy direct link for Static.css:
https://jayedrafi.com/static-css/link/Static.css
Copy direct link for Static.min.css:
https://jayedrafi.com/static-css/link/Static.min.css
Bundle pack:
Download the Static.css bundle file: Download Bundle
Getting Started
This sections covers the details about existing tags and override process.
Heading
Heading classes:
- Heading class: header
- Heading logo class: header-logo
- Heading text class: header-text
Style 1: Logo with text
Title
<div class="header">
<img src="./image_folder/logo.jpg" alt="logo" class="header-logo">
<p class="header-text">Title</p>
</div>
Style option 2: Text
Title
<div class="header">
<p class="header-text">Title</p>
</div>
Add background/text color:
Use Color section to pick desired color and use the class as following.
Title
<div class="header bg-navy-blue t-white">
<p class="header-text">Title</p>
</div>
Body
Body contains most parts of the site layout. All tags except footer tag should remain inside HTML body.
Layout 1: Body with only container (with/without heading)
For layout 1 use only heading class & content class inside HTML body. You can also opt-out heading by not using the heading class.
<body>
<div class="content">
</div>
</body>
Layout 2: Body with left/right hand navigation (with/without heading)
Following from layout 1, to add an left/right hand navigation use side-nav-left / side-nav-right class before content class.
<body>
<div class="side-nav-left">
<p class="topic"> TOPIC NAME </p>
<p><a href="#"> OPTION#1 </a></p>
<p><a href="#"> OPTION#2 </a></p>
</div>
<div class="content">
</div>
</body>
Following from discussion in the Body section, Static.css offers two side navigation options (left & right). Both options are built with device compatibility feature.
Note: Default side navigation design is similar to the side navigation on this web-document.
Side navigation clases:
- Left hand side navigation class: side-nav-left
- Right hand side navigation class: side-nav-right
Inside classes:
- Highlight topic class: topic
- Menu options with/without hyperlink tag: <p> tag for adding options and <a> for hyperlink.
- Rounded corner design class: round-nav class with (side-nav-left/side-nav-left) class.
<body>
<div class="side-nav-left round-nav">
<p class="topic">Topic</p>
<p>Option 1</p>
<p>Option 2</p>
<p class="topic">Topic</p>
<p><a href="#" target="_self">Option 1</a></p>
<p><a href="#" target="_self">Option 2</a></p>
</div>
</body>
Container
Container class: content
Basic container details are discussed in the Body section.
Customization options:
- Border removal class: rm-border
Grid
2 column:
<div class="grid-2">
<div class="grid-content">Item 1</div>
<div class="grid-content">Item 2</div>
<div class="grid-content">Item 3</div>
<div class="grid-content">Item 4</div>
</div>
3 column:
<div class="grid-3">
<div class="grid-content">Item 1</div>
<div class="grid-content">Item 2</div>
<div class="grid-content">Item 3</div>
<div class="grid-content">Item 4</div>
<div class="grid-content">Item 5</div>
<div class="grid-content">Item 6</div>
</div>
4 column:
<div class="grid-4">
<div class="grid-content">Item 1</div>
<div class="grid-content">Item 2</div>
<div class="grid-content">Item 3</div>
<div class="grid-content">Item 4</div>
<div class="grid-content">Item 5</div>
<div class="grid-content">Item 6</div>
<div class="grid-content">Item 7</div>
<div class="grid-content">Item 8</div>
</div>
5 column:
<div class="grid-5">
<div class="grid-content">Item 1</div>
<div class="grid-content">Item 2</div>
<div class="grid-content">Item 3</div>
<div class="grid-content">Item 4</div>
<div class="grid-content">Item 5</div>
<div class="grid-content">Item 6</div>
<div class="grid-content">Item 7</div>
<div class="grid-content">Item 8</div>
<div class="grid-content">Item 9</div>
<div class="grid-content">Item 10</div>
</div>
Customization options:
- Border removal class: rm-border
Table
| Topic 1 | Topic 2 | Topic 3 | Topic 4 |
|---|---|---|---|
| Item | Item | Item | Item |
| Item | Item | Item | Item |
| Item | Item | Item | Item |
| Item | Item | Item | Item |
<table>
<tr>
<th>Topic 1</th>
<th>Topic 2</th>
<th>Topic 3</th>
<th>Topic 4</th>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
</table>
Other options:
- Border removal class: rm-border
Typography
Text classes:
- Header text: header-text
- Title 1: title1
- Title 2: title2
- Text highlight: snippet
Examples:
- Header
- Title 1
- Title 2
- Text Highlight
Text position classes:
- Left align: text-left
- Right align: text-right
- Centered align: text-center
- Justify: text-justify
Text style classes:
- Bold text class: emphasis
- Italic text class: italic
- Underline text class: underline
- Capitalize text class: all-capitalize
- Uppercase text class: all-uppercase
- Lowercase text class: all-lowercase
Color
Static.css does not contain every color as it was built to be a light css facility. How ever I included some popular color to use as text/background. If this does not satisfy your need, it is recommended to use the provided code after the color table to override existing colors.
Background/text color classes:
| Color | background class | text class |
|---|---|---|
| bg-black | t-black | |
| bg-dark-gray | t-dark-gray | |
| bg-gray | t-gray | |
| bg-white | t-white | |
| bg-red | t-red | |
| bg-orange | t-orange | |
| bg-yellow | t-yellow | |
| bg-navy-blue | t-navy-blue | |
| bg-acqua | t-acqua | |
| bg-green | t-green | |
| rm-bg | Not applicable |
Change default background:
Background color of the HTML is set to a yellowish color by default. If you want to change the color, then copy & paste the following code in your HTML file.
<style>
html{
background-color: white;
}
</style>
Image
Image position class:
- Left align: image-left
- Right align: image-right
- Centered align: image-center
- Multiple image side by side: image-image-same-line
Image shapes and sizes:
Round shape:
Class image-profile + any size class (image-sm / image-md / image-lg).
Small size:
Class image-sm
Medium size:
Class image-md
Large size:
Class image-lg
Other options:
- Border removal class: rm-border
footer tag: footer
<footer>
<p>An open source light css library.</p>
</footer>