mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-13 17:33:59 +02:00
Code Issues Releases Wiki Activity

Introduction page updates

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-11 14:25:35 +02:00
parent 80196ee4ac
commit 5dcfabb7f3
5 changed files with 35 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/v2/DEVLOG.md
View File

@@ -422,3 +422,5 @@
- Renamed `index.html` from `v2` to `demo.html`.
- Created `template.html` as an empty template for pages for the framework's demo pages.
- Created new `index.html` as introduction page. Bare minimum content added.
- Added some custom styling for the cards in `index`.
- Changed the `border-radius` of `card`s to `0`.

44
docs/v2/index.html
View File

@@ -31,6 +31,24 @@
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #b71c1c; }
.card.fluid.box-centered {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
@media (max-width: 800px) {
.row.cards {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
}
.card.fluid.box-centered {
width: auto;
}
}
</style>
</head>
<body>
@@ -57,29 +75,29 @@
</div>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 20px;">
<div class="col-sm-12 col-md">
<div class="box-centered">
<h2>Minimal</h2>
<div class="row cards" style="padding-top: 20px;">
<div class="col-sm-12 col-md card fluid box-centered">
<div class="section">
<h2>Minimal<small>Size matters!</small></h2><br>
<i class="fa fa-compress fa-4x" aria-hidden="true"></i>
<br><br>
<p><strong>mini.css</strong> is one of the lightest front-end frameworks on the web: about 5KB gzipped. This helps your websites load faster, while still looking great!</p>
<p><strong>mini.css</strong> aims to provide as much functionality as possible in about 5KB gzipped. This very small footprint means that your websites and web applications will load faster, while still looking great utilising the modern components we provide!</p>
</div>
</div>
<div class="col-sm-12 col-md">
<div class="box-centered">
<h2>Reponsive</h2>
<div class="col-sm-12 col-md card fluid box-centered">
<div class="section">
<h2>Reponsive<small>Think mobile!</small></h2><br>
<i class="fa fa-mobile fa-4x" aria-hidden="true"></i>
<br><br>
<p><strong>mini.css</strong> is built in such a way that it will look great on most devices and especially phones and tablets. This allows you to easily tailor your websites to different users!</p>
<p><strong>mini.css</strong> is crafted with both desktops and mobile devices in mind. All of its components are well-tested on different devices and will respond to any changes in the viewport, allowing for an experience tailored to each user's device!</p>
</div>
</div>
<div class="col-sm-12 col-md">
<div class="box-centered">
<h2>Style-agnostic</h2>
<div class="col-sm-12 col-md card fluid box-centered">
<div class="section">
<h2>Style-agnostic<small>Infinitely customizable!</small></h2><br>
<i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i>
<br><br>
<p><strong>mini.css</strong> gives you the power of customization, using its fully moddable flavors. This will give you control over how your websites look and allow great designs to stand out!</p>
<p><strong>mini.css</strong> provides you with a customizable flavor system, allowing you to be a designer without all the hard work. This way you can create your own custom design and personalize your websites any way you want!</p>
</div>
</div>
</div>