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

Card fluidity fixes

Browse Source
This commit is contained in:
Angelos Chalaris 2016-11-13 23:12:36 +02:00
parent cfdc0b5ee4
commit 3e0ae4fa7f
7 changed files with 163 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dist/mini-default.css vendored
View File

@ -1180,13 +1180,16 @@ button.large, [type="button"].large, [type="submit"].large,
margin: 7px; }
.card.large {
max-width: 480px; }
max-width: 480px;
width: auto; }
.card.small {
max-width: 160px; }
max-width: 160px;
width: auto; }
.card.fluid {
max-width: 100%; }
max-width: 100%;
width: auto; }
.card.primary {
background: #e1f5fe;

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

File diff suppressed because one or more lines are too long

10
docs/v2/DEVLOG.md
View File

@ -431,3 +431,13 @@
- Updated `table` `border-radius`es.
- Deployed live demo with fixes etc.
- Added a module list and browser support to the `index` page.
## 20161113
- Added `docs/v2/playground.html` to more extensively test some of the components, especially `card`s and more specifically `fluid` ones.
- Added the fix for `fluid` `card`s using `width: auto;` which was supposed to solve some issues (see #31).
- Figured out a new design paradigm for `fluid` `card`s inside `col-` elements: if two separate `div` containers are used, no `card` "spilling" is observed. This could be either a temporary or a permanent solution depending on the complexity of the real issue at hand. However **Fermion** can initially release like this, as the issue is considered controlled and stable for now.
- Removed the old fix from the `index` page, updated as needed.
- Removed a typo in the index page that read `Reponsive`.
- Figured out a good enough solution for the `fluid` `card` problem.

66
docs/v2/index.html
View File

@ -31,23 +31,13 @@
.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;
}
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
</style>
</head>
@ -76,28 +66,34 @@
<!-- Insert your page content here-->
<main><div class="container">
<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> 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><br>
<div class="col-sm-12 col-md box-centered row">
<div class="card fluid">
<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> 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><br>
</div>
</div>
</div>
<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 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><br>
<div class="col-sm-12 col-md box-centered row">
<div class="card fluid">
<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 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><br>
</div>
</div>
</div>
<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> 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><br>
<div class="col-sm-12 col-md box-centered row">
<div class="card fluid">
<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> 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><br>
</div>
</div>
</div>
</div>

93
docs/v2/playground.html Normal file
View File

@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<!-- Live demo styled as of 20161111 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/64af6f2d5fb2bdcad4ed49631031bf2ef4c3cd54/dist/mini-default.min.css">
<!-- Local stylesheet -->
<link rel="stylesheet" href="../../dist/mini-default.min.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, responsive, framework, mobile first, style agnostic, Sass">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<style>
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-header {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 3px 5px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.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>
<header>
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
<a href="#" class="button">Introduction</a>
<a href="#" class="button">Module Overview</a>
<a href="#" class="button">Module Demos</a>
<a href="#" class="button">Flavors</a>
<a href="#" class="button">Customization</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
</div>
</header>
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
<div class="row">
<div class="col-sm">
<div class="box-centered">
<img src="mini-logo.svg" id="top-logo">
<h1 id="top-header"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
<mark class="tag tertiary" id="top-version-tag">v2.0</mark>
</div>
</div>
</div>
</div>
<!-- Insert your page content here-->
<main><div class="container" style="padding-top: 20px;">
<div class="row">
<div class="col-sm-12">
<div class="box-colored"></div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card fluid"></div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card fluid"></div>
</div>
</div>
</div></main>
<!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

25
docs/v2/template.html
View File

@ -2,9 +2,9 @@
<html>
<head>
<!-- Live demo styled as of 20161111 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/f429b1037c42505081454ef8aff2409fffb62e74/dist/mini-default.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/64af6f2d5fb2bdcad4ed49631031bf2ef4c3cd54/dist/mini-default.min.css">
<!-- Local stylesheet -->
<!-- <link rel="stylesheet" href="../../dist/mini-default.min.css"> -->
<link rel="stylesheet" href="../../dist/mini-default.min.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -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>
@ -44,7 +62,7 @@
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
</div>
</header>
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 1px 3px rgba(0,0,0,0.35);">
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
<div class="row">
<div class="col-sm">
<div class="box-centered">
@ -58,7 +76,6 @@
<!-- Insert your page content here-->
<main><div class="container">
</div></main>
<!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>

1
src/mini/_card.scss
View File

@ -82,6 +82,7 @@ $card-normal-width: 320px !default; // Width for normal cards
@if type-of($card-alt-size-width) == 'number' && unit($card-alt-size-width) == '%' {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
width: auto;
}
}
@else {