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

🚑 Grid breakpoint changes, trickles down to other modules as well

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-21 10:25:06 +02:00
parent 1c7b7a081f
commit 1e86e6fa5a
6 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
dist/mini-default.css vendored
View File

@@ -274,7 +274,7 @@ a {
-webkit-order: 999; -webkit-order: 999;
order: 999; } order: 999; }
@media (min-width: 800px) { @media (min-width: 768px) {
.col-md, .col-md,
[class^='col-md-'], [class^='col-md-'],
[class^='col-md-offset-'] { [class^='col-md-offset-'] {
@@ -399,7 +399,7 @@ a {
.col-md-last { .col-md-last {
-webkit-order: 999; -webkit-order: 999;
order: 999; } } order: 999; } }
@media (min-width: 1080px) { @media (min-width: 1280px) {
.col-lg, .col-lg,
[class^='col-lg-'], [class^='col-lg-'],
[class^='col-lg-offset-'] { [class^='col-lg-offset-'] {
@@ -713,7 +713,7 @@ input[type="file"] {
.button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"], .button-group button + a.button, .button-group button + label.button, .button-group button + .button, .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"], .button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button, .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"], .button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button, .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"], .button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button, .button-group a.button + button, .button-group a.button + [type="button"], .button-group a.button + [type="submit"], .button-group a.button + [type="reset"], .button-group a.button + a.button, .button-group a.button + label.button, .button-group a.button + .button, .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"], .button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button, .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"], .button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button { .button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"], .button-group button + a.button, .button-group button + label.button, .button-group button + .button, .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"], .button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button, .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"], .button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button, .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"], .button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button, .button-group a.button + button, .button-group a.button + [type="button"], .button-group a.button + [type="submit"], .button-group a.button + [type="reset"], .button-group a.button + a.button, .button-group a.button + label.button, .button-group a.button + .button, .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"], .button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button, .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"], .button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button {
border-left: 1px solid #bdbdbd; } border-left: 1px solid #bdbdbd; }
@media (max-width: 768px) { @media (max-width: 767px) {
.button-group { .button-group {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-flex-direction: column; -webkit-flex-direction: column;
@@ -798,7 +798,7 @@ th {
th:first-child, td:first-child { th:first-child, td:first-child {
border-left: 0; } border-left: 0; }
@media (max-width: 768px) { @media (max-width: 767px) {
table { table {
border-collapse: collapse; border-collapse: collapse;
border: 0; border: 0;
@@ -984,7 +984,7 @@ th:first-child, td:first-child {
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; } border-bottom-right-radius: 2px; }
@media (max-width: 800px) { @media (max-width: 768px) {
.tabs { .tabs {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-flex-direction: column; -webkit-flex-direction: column;

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

File diff suppressed because one or more lines are too long

7
docs/v2/DEVLOG.md
View File

@@ -484,3 +484,10 @@
- Started writing `grid.html` page. - Started writing `grid.html` page.
- Added basic info for grid, set layout for the page, checked styles - they're all good for grid. - Added basic info for grid, set layout for the page, checked styles - they're all good for grid.
- Added layout demo showcase for the screen specific layouts. - Added layout demo showcase for the screen specific layouts.
## 20161121
- Changed `grid` breakpoints to `768px` and `1280px` accordingly to better support different resolutions.
- Updated `$button-group-mobile-breakpoint` to `767px` so that it will break on resolutions under `768px` instead of including `768px`.
- Same update for `$table-mobile-breakpoint` to `767px`.

2
docs/v2/demo.html
View File

@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<!-- Live demo styled as of 20161117 --> <!-- Live demo styled as of 20161117 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/e6d74493378ebf8837bb3fc2469864dda719af41/dist/mini-default.min.css"> <!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/e6d74493378ebf8837bb3fc2469864dda719af41/dist/mini-default.min.css"> -->
<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> <title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<meta charset="utf-8"> <meta charset="utf-8">

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

@@ -126,9 +126,9 @@ $grid-column-padding: 0 4px; // Padding for the columns of the grid
//$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid //$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid
//$grid-small-breakpoint: 480px; // Small screen breakpoint for grid //$grid-small-breakpoint: 480px; // Small screen breakpoint for grid
$grid-small-prefix: 'sm'; // Small screen class prefix for grid $grid-small-prefix: 'sm'; // Small screen class prefix for grid
$grid-medium-breakpoint: 800px; // Medium screen breakpoint for grid $grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid $grid-medium-prefix: 'md'; // Medium screen class prefix for grid
$grid-large-breakpoint: 1080px; // Large screen breakpoint for grid $grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
$grid-large-prefix: 'lg'; // Large screen class prefix for grid $grid-large-prefix: 'lg'; // Large screen class prefix for grid
// Notes: // Notes:
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with // [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
@@ -210,7 +210,7 @@ $button-disabled-opacity: 0.65; // Disabled button elements opacity
$button-class-name: 'button'; // Class for custom button elements $button-class-name: 'button'; // Class for custom button elements
$button-group-name: 'button-group'; // Class for button groups $button-group-name: 'button-group'; // Class for button groups
$button-group-border-style: 1px solid #bdbdbd; // Border style for button groups $button-group-border-style: 1px solid #bdbdbd; // Border style for button groups
$button-group-mobile-breakpoint:768px; // Breakpoint for button group mobile view $button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
$hide-file-inputs: true; // Should a style be added that makes all $hide-file-inputs: true; // Should a style be added that makes all
// <input>s of type `file` hidden? // <input>s of type `file` hidden?
// (`true`/`false`) [1] // (`true`/`false`) [1]
@@ -278,7 +278,7 @@ $table-head-back-color: #eceff1; // Background color for <th>
$table-head-fore-color: $fore-color; // Tex color for <th> $table-head-fore-color: $fore-color; // Tex color for <th>
$table-body-back-color: #fafafa; // Background color for <td> $table-body-back-color: #fafafa; // Background color for <td>
$table-body-fore-color: $fore-color; // Text color for <td> $table-body-fore-color: $fore-color; // Text color for <td>
$table-mobile-breakpoint: 768px; // Breakpoint for <table> mobile view $table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
$table-mobile-card-spacing: 10px; // Space between <tr> cards - mobile view $table-mobile-card-spacing: 10px; // Space between <tr> cards - mobile view
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers $table-mobile-card-label: 'data-label'; // Attribute used to replace column headers
// in mobile view [1] // in mobile view [1]

2
src/mini/_grid.scss
View File

@@ -277,7 +277,7 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
order: 999; order: 999;
} }
} }
$grid-large-breakpoint: 1200px !default; // Large screen breakpoint for grid $grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
// Large screen breakpoint. // Large screen breakpoint.
@media (min-width: #{$grid-large-breakpoint}){ @media (min-width: #{$grid-large-breakpoint}){