👉 Preview live demo 👈
Hextech CSS is a framework based on Flexbox inspired by the style of the game League of Legends. Note that Hextech CSS is currently in development. Feel free to open issues or fork it and do all your stuff.
TO-DO List 📝
You can see the TO-DO list for Hextech CSS on this public Trello board. If you want to suggest a new feature or report a bug, please create a new issue.
Getting started 🛠️
Start using Hextech CSS is as simple as any other CSS framework or library!
1. Use the HTML5 doctype
<!DOCTYPE html>
2. Add the responsive viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
3. Load the CSS file locally or from jsDelivr
<link rel="stylesheet" href="hextech-css/dist/hextech.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pxlucasf/hextech-css@master/dist/hextech.min.css">
🖼️
Starter template If you want to get started right away, you can use this HTML starter template. Just copy/paste this code in a file and save it on your computer.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hextech CSS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pxlucasf/hextech-css@master/dist/hextech.min.css">
</head>
<body>
<button class="button is-primary">Hello world</button>
</body>
</html>
📚
Docs Documentation is not available yet. For now, you can use our demo page as reference.
⚠️
Disclaimer Unfortunately, Hextech CSS is not related to League of Legends or Riot Games. All assets used on this project are self-made, for exception of the League of Legends logo, that is intellectual property of Riot Games, Inc.