mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-04-13 08:51:52 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dist/mini-default.css vendored
View File

@ -850,7 +850,6 @@ th:first-child, td:first-child {
width: 100%;
background: #f5f5f5;
border: 1px solid #9e9e9e;
border-radius: 2px;
margin: 2px 10px 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); }
.card > .section {

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

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>

2
src/flavors/mini-default.scss
View File

@ -288,7 +288,7 @@ $card-name: 'card'; // Class name for cards
$card-back-color: #f5f5f5; // Background color for cards
$card-fore-color: $fore-color; // Text color for cards
$card-border-style: 1px solid #9e9e9e; // Border style for cards
$card-border-radius: 2px; // Border radius for cards
$card-border-radius: 0; // Border radius for cards
$card-margin: 2px 10px 20px; // Margin for cards
$card-box-shadow: // Box shadow for cards
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);