Tiles
A keyboard centric, feature rich, responsive design homepage!
Live Demo
Homepage
Benefits over- Entire js rewrite
- Clearer data structure with one static index.html file
- Support for preloading icons
- Major bug fixes and stability improvements
- Clearer code and documentation -> much easier customization
- Lib.js allows for easy addition and deletion of tiles and themes
- Live search and external searches
- Cool new themes
- Better mobile support
- Live search and definitions
Setup
- Add any custom tiles to lib.js
- Add your api key to the var "api" for open weather and news updates
Features
- Keyboard navigation and shortcuts
- Full mobile support
- Simple and clear data structure for customization
- Dynamic approach towards page generation
- Multiple themes and easy support for adding new ones
- Live "tile" search as well as external api search
- External api support for tiles (in progress)
Keyboard Shortcuts
Function | Key | Description |
---|---|---|
up | k / up |
up one tile |
down | j / down |
down one tile |
left | h / left |
left one tile |
right | l / right |
right one tile |
hop | 1...0 , - , + |
hop to any tile # |
search | [space] |
starts live search |
api search | / |
searches external sources |
themes | \ |
opens theme menu |
enter | [enter] |
go to tile / exit search |
esc | [esc] |
close search, return to homepage |
Mobile Support
- Fixed css breakpoints and general layout improvements
- Full featured w/o different file base
Data structure
Tile syntax
There are 3 types of tile that all use similar syntax:
- Tiles represent static webpages.
["url","icn","title","subtitle"]
- Folders represent a key for a array of tiles.
["#key-name","icn","title","subtitle"]
- Themes repersent tiles for a given theme name
["$theme-name","icn","title",["background","main color","alt color","main text","subtext"]]
- Themes can also have background images
["$theme-name","icn","title",["image_url","main color","alt color","main text","subtext"]]
- References represent simple tiles for duplicate entries
["~Title"]
for a given tile inpages["~"]
Example
tile = ["https://github.com","gh","Github","Code"]
folder = ["#","mt","Code","~/hack.sh"]
theme = ["$","ds","Discord","Purple, Black, Grey",['#23272A','#2C2F33','#7289DA','#7289DA','#99AAB5']]
wallpaper = ["$","pnr","Starry Night","Blue Green Yellow",["src/wall/starry.jpg","#007849","#FECE00","#FFFFFF","#FFFFFF"]]
reference = ["~Github"]
Both themes and tiles are stored in lib.js -> look there for more info and examples
Icons8
Icons taken from Icons 8
Themes
Theme | Bg | Main | Comp | Sub | Txt | Credit |
---|---|---|---|---|---|---|
Skeletor | Syntax |
|||||
Switch | Switch |
|||||
Gogh | Gogh |
|||||
Todoist | Todoist Dark |
|||||
Discord | Discord |
|||||
Terminal | None |
|||||
Lava | None |
|||||
Purple | None |
|||||
(table generated with help from placehold.it) |