mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-04-16 10:21:51 +02:00
Code Issues Releases Wiki Activity

Resolves #61

Browse Source 
Hiding (normal and accessible) has been added via mixins in the utility_mixins file (utility module). Updated both mixins, along with the responsive padding and margin mixins to deal with incosistencies with four-step grid. The legacy grid system should now be fully supported in all 4 mixins in the utility module, making it easier to use them with four-step grids.
This commit is contained in:
Angelos Chalaris 2017-04-02 20:33:35 +03:00
parent 16ce611b1d
commit d1ae3a89e9
8 changed files with 301 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
dist/mini-default.css vendored
View File

@ -1743,3 +1743,54 @@ ul.breadcrumbs {
.shadow-large {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15) !important; }
@media screen and (max-width: 767px) {
.hidden-sm {
display: none; } }
@media screen and (min-width: 768px) and (max-width: 1279px) {
.hidden-md {
display: none; } }
@media screen and (min-width: 1280px) {
.hidden-lg {
display: none; } }
@media screen and (max-width: 767px) {
.visually-hidden-sm {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important; } }
@media screen and (min-width: 768px) and (max-width: 1279px) {
.visually-hidden-md {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important; } }
@media screen and (min-width: 1280px) {
.visually-hidden-lg {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important; } }

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

File diff suppressed because one or more lines are too long

51
dist/mini-sucroa.css vendored
View File

@ -1626,3 +1626,54 @@ ul.breadcrumbs {
.shadow-large {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15) !important; }
@media screen and (max-width: 767px) {
.hidden-sm {
display: none; } }
@media screen and (min-width: 768px) and (max-width: 1279px) {
.hidden-md {
display: none; } }
@media screen and (min-width: 1280px) {
.hidden-lg {
display: none; } }
@media screen and (max-width: 767px) {
.visually-hidden-sm {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important; } }
@media screen and (min-width: 768px) and (max-width: 1279px) {
.visually-hidden-md {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important; } }
@media screen and (min-width: 1280px) {
.visually-hidden-lg {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important; } }

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

File diff suppressed because one or more lines are too long

4
docs/v2/DEVLOG.md
View File

@ -926,3 +926,7 @@
## 20170402
- Updated `@media` queries in all modules to utilize `screen`, so that layout changes will only apply to screens (irrelevant in print). `print` stylesheets are coming later down the line and all layouts will print as if in *small* screens (basically `col-sm-...` layouts), to simplifiy everything. Size increased from `6.79KB` to `6.82KB`, worthwhile cost.
- Added resposnive hiding (both normal and accessible) in `utility_mixins` via the `make-hidden-responsive` and `make-visually-hidden-responsive` `mixin`s. Both have as many defaults as possible to make things easier.
- Updated `make-margin-responsive` and `make-padding-responsive` `mixin`s to make sure they are now compatible with four-step grid (legacy).
- Added `.hidden-` and `.visually-hidden-` elements to both flavors via new `mixin`s. Current size for `default` is `6.88KB` gzipped, reasonable tradeoff for a much requested and needed feature.
- *TODO* update documentation pages to showcase the new responsive hiding, add codepen etc.

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

@ -516,17 +516,15 @@ $box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shad
$box-shadow-style4-value: // Box shadow value for generic box-shadow style 4
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
$responsive-margin-medium-breakpoint: $grid-medium-breakpoint; // Medium screen breakpoint for responsive margin
$responsive-margin-large-breakpoint: $grid-large-breakpoint; // Large screen breakpoint for responsive margin
$responsive-margin-small-value: 4px; // Margin value for responsive margin on small screens
$responsive-margin-medium-value: 6px; // Margin value for responsive margin on medium screens
$responsive-margin-large-value: 8px; // Margin value for responsive margin on large screens
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
$responsive-padding-medium-breakpoint: $grid-medium-breakpoint; // Medium screen breakpoint for responsive padding
$responsive-padding-large-breakpoint: $grid-large-breakpoint; // Large screen breakpoint for responsive padding
$responsive-padding-small-value: 2px 4px; // Padding value for responsive padding on small screens
$responsive-padding-medium-value: 4px 6px; // Padding value for responsive padding on medium screens
$responsive-padding-large-value: 6px 8px; // Padding value for responsive padding on large screens
$responsive-hidden-prefix: 'hidden'; // Class name prefix for responsive hidden elements
$responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
@ -611,13 +609,13 @@ $include-center-block-name: false; // Should center block be included? (
@include make-border-generic ($border-generic-name);
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-medium-breakpoint,
$responsive-margin-large-breakpoint, $responsive-margin-small-value, $responsive-margin-medium-value,
$responsive-margin-large-value);
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-medium-breakpoint,
$responsive-padding-large-breakpoint, $responsive-padding-small-value, $responsive-padding-medium-value,
$responsive-padding-large-value);
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-small-value,
$responsive-margin-medium-value, $responsive-margin-large-value);
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-small-value,
$responsive-padding-medium-value, $responsive-padding-large-value);
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
@include make-box-shadow-generic ($box-shadow-style4-name, $box-shadow-style4-value);
@include make-hidden-responsive ($responsive-hidden-prefix);
@include make-visually-hidden-responsive ($responsive-visually-hidden-prefix);

14
src/flavors/mini-sucroa.scss
View File

@ -525,6 +525,8 @@ $responsive-padding-large-breakpoint: $grid-large-breakpoint; // Large screen
$responsive-padding-small-value: 2px 3px; // Padding value for responsive padding on small screens
$responsive-padding-medium-value: 4px 6px; // Padding value for responsive padding on medium screens
$responsive-padding-large-value: 8px 10px; // Padding value for responsive padding on large screens
$responsive-hidden-prefix: 'hidden'; // Class name prefix for responsive hidden elements
$responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
@ -609,13 +611,13 @@ $include-center-block-name: false; // Should center block be included? (
@include make-border-generic ($border-generic-name);
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-medium-breakpoint,
$responsive-margin-large-breakpoint, $responsive-margin-small-value, $responsive-margin-medium-value,
$responsive-margin-large-value);
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-medium-breakpoint,
$responsive-padding-large-breakpoint, $responsive-padding-small-value, $responsive-padding-medium-value,
$responsive-padding-large-value);
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-small-value,
$responsive-margin-medium-value, $responsive-margin-large-value);
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-small-value,
$responsive-padding-medium-value, $responsive-padding-large-value);
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
@include make-box-shadow-generic ($box-shadow-style4-name, $box-shadow-style4-value);
@include make-hidden-responsive ($responsive-hidden-prefix);
@include make-visually-hidden-responsive ($responsive-visually-hidden-prefix);

191
src/mini/_utility_mixins.scss
View File

@ -29,16 +29,30 @@
// Responsive margin mixin. ATTENTION: Uses !important.
// Variables:
// - $margin-name : The name of the class used for the responsive margin.
// - $margin-medium-breakpoint : Medium screen breakpoint for the responsive margin.
// - $margin-large-breakpoint : Large screen breakpoint for the responsive margin.
// - $margin-small-value : Responsive margin value for smaller screens.
// - $margin-medium-value : Responsive margin value for medium screens.
// - $margin-large-value : Responsive margin value for large screens.
@mixin make-margin-responsive ($margin-name, $margin-medium-breakpoint,
$margin-large-breakpoint, $margin-small-value, $margin-medium-value,
$margin-large-value) {
.#{$margin-name} {
margin: $margin-small-value !important;
// - $margin-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive margin. Defaults to `768px`.
// - $margin-large-breakpoint : (Optional) Large screen breakpoint for the responsive margin. Defaults to `1280px`.
// - $margin-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
// - $margin-small-breakpoint : (Optional) Small screen breakpoint for the responsive margin, used only if above flag is set to `true`. Defaults to `480px`.
// - $margin-extra-small-value : (Optional) Responsive margin value for extra small screens, used only if above flag is set to `true`. Defaults to `0`.
@mixin make-margin-responsive ($margin-name, $margin-small-value,
$margin-medium-value, $margin-large-value, $margin-medium-breakpoint : 768px,
$margin-large-breakpoint : 1280px, $margin-use-four-step-grid : false,
$margin-small-breakpoint : 480px, $margin-extra-small-value : 0) {
@if $margin-use-four-step-grid {
.#{$margin-name} {
margin: $margin-extra-small-value !important;
}
@media screen and (min-width: #{$margin-small-breakpoint}) {
margin: $margin-small-value !important;
}
}
@else {
.#{$margin-name} {
margin: $margin-small-value !important;
}
}
@media screen and (min-width: #{$margin-medium-breakpoint}) {
.#{$margin-name} {
@ -54,16 +68,30 @@
// Responsive padding mixin. ATTENTION: Uses !important.
// Variables:
// - $padding-name : The name of the class used for the responsive padding.
// - $padding-medium-breakpoint : Medium screen breakpoint for the responsive padding.
// - $padding-large-breakpoint : Large screen breakpoint for the responsive padding.
// - $padding-small-value : Responsive padding value for smaller screens.
// - $padding-medium-value : Responsive padding value for medium screens.
// - $padding-large-value : Responsive padding value for large screens.
@mixin make-padding-responsive ($padding-name, $padding-medium-breakpoint,
$padding-large-breakpoint, $padding-small-value, $padding-medium-value,
$padding-large-value) {
.#{$padding-name} {
padding: $padding-small-value !important;
// - $padding-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive padding. Defaults to `768px`.
// - $padding-large-breakpoint : (Optional) Large screen breakpoint for the responsive padding. Defaults to `1280px`.
// - $padding-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
// - $padding-small-breakpoint : (Optional) Small screen breakpoint for the responsive padding, used only if above flag is set to `true`. Defaults to `480px`.
// - $padding-extra-small-value : (Optional) Responsive padding value for extra small screens, used only if above flag is set to `true`. Defaults to `0`.
@mixin make-padding-responsive ($padding-name, $padding-small-value,
$padding-medium-value, $padding-large-value, $padding-medium-breakpoint : 768px,
$padding-large-breakpoint : 1280px, $padding-use-four-step-grid : false,
$padding-small-breakpoint : 480px, $padding-extra-small-value : 0) {
@if $padding-use-four-step-grid{
.#{$padding-name} {
padding: $padding-extra-small-value !important;
}
@media screen and (min-width: #{$padding-small-breakpoint}) {
padding: $padding-small-value !important;
}
}
@else {
.#{$padding-name} {
padding: $padding-small-value !important;
}
}
@media screen and (min-width: #{$padding-medium-breakpoint}) {
.#{$padding-name} {
@ -76,3 +104,138 @@
}
}
}
// Responsive hidden elements mixin. ATTENTION: Uses !important.
// Variables:
// - $hidden-prefix : The prefix for the name of the class used for the responsive hiding.
// - $hidden-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive hiding. Defaults to `768px`.
// - $hidden-large-breakpoint : (Optional) Large screen breakpoint for the responsive hiding. Defaults to `1280px`.
// - $hidden-small-suffix : (Optional) The small-screen suffix for the name of the class used for the responsive hiding. Defaults to 'sm'.
// - $hidden-medium-suffix : (Optional) The medium-screen suffix for the name of the class used for the responsive hiding. Defaults to 'md'.
// - $hidden-large-suffix : (Optional) The large-screen suffix for the name of the class used for the responsive hiding. Defaults to 'lg'.
// - $hidden-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
// - $hidden-small-breakpoint : (Optional) Small screen breakpoint for the responsive hiding, used only if the above variable is set to `true`. Defaults to `480px`.
// - $hidden-extra-small-suffix : (Optional) The extra-small-screen suffix for the name of the class used for the responsive hiding. Used only if the above flag is set to `true`. Defaults to 'xs'.
@mixin make-hidden-responsive ($hidden-prefix, $hidden-medium-breakpoint : 768px,
$hidden-large-breakpoint : 1280px , $hidden-small-suffix : 'sm', $hidden-medium-suffix : 'md',
$hidden-large-suffix : 'lg', $hidden-use-four-step-grid : false,
$hidden-small-breakpoint : 480px, $hidden-extra-small-suffix : 'xs') {
@if $hidden-use-four-step-grid {
@media screen and (max-width: #{$hidden-small-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-extra-small-suffix} {
display: none;
}
}
@media screen and (min-width: #{$hidden-small-breakpoint}) and (max-width: #{$hidden-medium-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-small-suffix} {
display: none;
}
}
}
@else {
@media screen and (max-width: #{$hidden-medium-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-small-suffix} {
display: none;
}
}
@media screen and (min-width: #{$hidden-medium-breakpoint}) and (max-width: #{$hidden-large-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-medium-suffix} {
display: none;
}
}
@media screen and (min-width: #{$hidden-large-breakpoint}) {
.#{$hidden-prefix}-#{$hidden-large-suffix} {
display: none;
}
}
}
}
// Responsive visually hidden elements mixin. ATTENTION: Uses !important.
// Variables:
// - $visually-hidden-prefix : The prefix for the name of the class used for the responsive visual hiding.
// - $visually-hidden-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive visual hiding. Defaults to `768px`.
// - $visually-hidden-large-breakpoint : (Optional) Large screen breakpoint for the responsive visual hiding. Defaults to `1280px`.
// - $visually-hidden-small-suffix : (Optional) The small-screen suffix for the name of the class used for the responsive visual hiding. Defaults to 'sm'.
// - $visually-hidden-medium-suffix : (Optional) The medium-screen suffix for the name of the class used for the responsive visual hiding. Defaults to 'md'.
// - $visually-hidden-large-suffix : (Optional) The large-screen suffix for the name of the class used for the responsive visual hiding. Defaults to 'lg'.
// - $visually-hidden-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
// - $visually-hidden-small-breakpoint : (Optional) Small screen breakpoint for the responsive visual hiding, used only if the above variable is set to `true`. Defaults to `480px`.
// - $visually-hidden-extra-small-suffix : (Optional) The extra-small-screen suffix for the name of the class used for the responsive visual hiding. Used only if the above flag is set to `true`. Defaults to 'xs'.
@mixin make-visually-hidden-responsive ($visually-hidden-prefix, $visually-hidden-medium-breakpoint : 768px,
$visually-hidden-large-breakpoint : 1280px , $visually-hidden-small-suffix : 'sm', $visually-hidden-medium-suffix : 'md',
$visually-hidden-large-suffix : 'lg', $visually-hidden-use-four-step-grid : false,
$visually-hidden-small-breakpoint : 480px, $visually-hidden-extra-small-suffix : 'xs') {
@if $visually-hidden-use-four-step-grid {
@media screen and (max-width: #{$visually-hidden-small-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-extra-small-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
@media screen and (min-width: #{$visually-hidden-small-breakpoint}) and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
}
@else {
@media screen and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
@media screen and (min-width: #{$visually-hidden-medium-breakpoint}) and (max-width: #{$visually-hidden-large-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-medium-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
@media screen and (min-width: #{$visually-hidden-large-breakpoint}) {
.#{$visually-hidden-prefix}-#{$visually-hidden-large-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
}
}