Skip to content

Commit 99ae5c2

Browse files
scriptexscriptex
authored
Update docs and add more helpers/tools (#7)
Add font-size mixin Add text-truncate mixin Add media query mixin Update documentation Bump version
2 parents 760c852 + 97193d0 commit 99ae5c2

18 files changed

+236
-22
lines changed

‎README.md‎

Lines changed: 106 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,22 @@ More details about each file can be found below.
4545

4646
### Grid
4747

48-
This mixin creates grid rules automagically. There are several variables which can be tweaked to match your project's requirement and then the mixin is ready to be used.
48+
This mixin creates grid rules automagically.
49+
50+
There are several variables which can be tweaked to match your project's requirement and then the mixin is ready to be used.
51+
52+
Here are the defaults:
53+
```scss
54+
$grid-cols: 12; // Number of grid columns
55+
$grid-sizes: 1, 2, 3, 4, 6; // Grid column sizes
56+
$grid-gutter: 16px; // Gap between grid items. Use anything but % values cuz Firefox does not like it...
57+
$grid-element: '.o-grid'; // Selector for the grid element
58+
$grid-breakpoints: ( // Map of breakpoints used for media queries
59+
'small': 0px,
60+
'medium': 768px,
61+
'large': 1024px
62+
);
63+
```
4964

5065
For a quick demo, please see [this pen](https://codepen.io/scriptex/pen/zMebLX).
5166

@@ -248,6 +263,51 @@ Then use the mixin:
248263
@include auto-grid(10rem, 0.5rem);
249264
```
250265

266+
---
267+
268+
### Font size
269+
270+
Set the `font-size` of an element in REMs while providing PX fallback.
271+
272+
Please see the demo [here](https://codepen.io/scriptex/pen/vwNOXK).
273+
274+
To import only this mixin, use
275+
276+
```scss
277+
@import 'scss-goodies/helpers/font-size';
278+
```
279+
280+
Then use the mixin:
281+
282+
```scss
283+
/*
284+
* @param: $size - font size in pixels (without "px" suffix).
285+
* @param: $rem - font size of 1rem (without "px" suffix). Default: 16
286+
*/
287+
@include font-size(12);
288+
```
289+
290+
---
291+
292+
### Text truncate
293+
294+
Prevent a line of text to break by truncating the overflowed text.
295+
296+
To import only this mixin, use
297+
298+
```scss
299+
@import 'scss-goodies/helpers/text-truncate';
300+
```
301+
302+
Then use the mixin:
303+
304+
```scss
305+
/*
306+
* @param: $overflow-style - CSS text-overflow. Default: ellipsis
307+
*/
308+
@include text-truncate(clip);
309+
```
310+
251311
## Tools
252312

253313
---
@@ -395,6 +455,51 @@ body {
395455
}
396456
```
397457

458+
---
459+
460+
### Mixin for media query
461+
462+
Get a media query for a given breakpoint.
463+
464+
To import only this mixin, use
465+
466+
```scss
467+
@import 'scss-goodies/tools/mq';
468+
```
469+
470+
Then use the mixin:
471+
472+
```scss
473+
/*
474+
* @param: $breakpoint - One of the predefined in the third argument
475+
* @param: $type - "min" or "max". "min" makes it mobile-first, "max" makes it desktop-first. Default: "min"
476+
* @param: $breakpoints - map of breakpoints. Defaults to $breakpoints below.
477+
*/
478+
479+
$breakpoints: (
480+
'phone': 320px,
481+
'phone-wide': 480px,
482+
'phablet': 560px,
483+
'tablet-small': 640px,
484+
'tablet': 768px,
485+
'tablet-wide': 1024px,
486+
'desktop': 1280px,
487+
'desktop-wide': 1440px
488+
);
489+
490+
body {
491+
@include font-size(16);
492+
493+
@include mq(desktop, max) {
494+
@include font-size(14);
495+
}
496+
497+
@include mq(tablet, max) {
498+
@include font-size(12);
499+
}
500+
}
501+
```
502+
398503
## LICENSE
399504

400505
MIT

‎helpers/_aspect-ratio.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
/**
2+
* Set aspect ratio
3+
* @param: $shape - either "rect" or "square". Default: "rect"
4+
* "rect" means aspect ratio 16/9
5+
* "square" means aspect ration 1/1
6+
* Demo: https://codepen.io/scriptex/pen/EzVaZL
7+
*/
18
@mixin aspect-ratio($shape: rect) {
29
display: block;
310
position: relative;

‎helpers/_auto-grid.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
/**
2+
* Progressively enhanced, fully responsive grid layout
3+
* without any media queries using CSS Grid
4+
* @param: $min-size - minimum width of a grid item. Default: 16rem
5+
* @param: $gap - gap between grid items. Default: 1rem
6+
* Demo: https://codepen.io/scriptex/pen/vwNOXK
7+
*/
18
@mixin auto-grid($min-size: 16rem, $gap: 1rem) {
29
> * {
310
max-width: $min-size;

‎helpers/_font-size.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* Set font size in REMs and provide PX fallback
3+
* @param: $size - font size in pixels (without "px" suffix).
4+
* @param: $rem - font size of 1rem (without "px" suffix). Default: 16
5+
* Demo: https://codepen.io/scriptex/pen/vwNOXK
6+
*/
7+
@mixin font-size($size, $rem: 16) {
8+
font-size: $size;
9+
font-size: $size / $rem + rem;
10+
}

‎helpers/_full-bleed.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
/**
2+
* Make an element get the full browser width
3+
*/
14
@mixin full-bleed {
25
width: 100vw;
36
margin-left: 50%;

‎helpers/_grid.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,13 @@ $grid-breakpoints: (
1717
@return calc((#{$column} + #{$extra-space}) - #{$grid-gutter});
1818
}
1919

20+
/**
21+
* A responsive grid based on CSS Flexbox layout
22+
* including different sizes based on device width.
23+
* @param: $items - number of items per row. Default: 4
24+
* @param: $gutter - gap between grid items. Default: $grid-gutter
25+
* Demo: https://codepen.io/scriptex/pen/xQgZBg
26+
*/
2027
@mixin grid($items: 4, $gutter: $grid-gutter) {
2128
display: flex;
2229
flex-wrap: wrap;

‎helpers/_loader.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
$loader: '<svg width="100" height="100" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000"><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".5" cx="18" cy="18" r="18"></circle><path d="M36 18c0-9.94-8.06-18-18-18" transform="rotate(0 18 18)"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1.5s" repeatCount="indefinite"></animateTransform></path></g></g></svg>' !default;
44

5+
/**
6+
* An animated SVG loader
7+
* @param: $svg - Valid SVG code. Default: the SVG above
8+
* @param: $repeat - CSS background repeat. Default: no-repeat
9+
* @param: $position - CSS background position. Default: 50% 50%
10+
* @param: $size - CSS background size. Default: 2rem 2rem
11+
*/
512
@mixin loader($svg: $loader, $repeat: no-repeat, $position: 50% 50%, $size: 2rem 2rem) {
613
@include background-svg($svg, $repeat, $position, $size);
714
}

‎helpers/_rainbow.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
* @return - Multiple background declaration consisting of
1313
* many linear gradients
1414
*
15-
* It's important that the keys of both maps are the same.
16-
*
17-
* Live demo: https://codepen.io/scriptex/pen/pQPKXJ
15+
* It's !important that the keys of both maps are the same.
16+
*
17+
* Demo: https://codepen.io/scriptex/pen/pQPKXJ
1818
*/
1919
@mixin rainbow($colors, $stops, $direction: 'horizontal') {
2020
$dir: to right;
@@ -37,6 +37,6 @@
3737
// prettier-ignore
3838
$background: append($background, $gradient no-repeat 0% 0% $slash $size, comma);
3939
}
40-
40+
4141
background: unquote($background);
4242
}

‎helpers/_select.scss‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@
44
* @param: $border-color - Color of the border
55
* @param: $background-color - Color of the background
66
* @param: $shadow-color - Color of the box-shadow
7+
* Live demo: https://codepen.io/scriptex/pen/jXjWbQ
78
*/
8-
@mixin select(
9-
$text-color: #444,
10-
$border-color: #444,
11-
$background-color: #fff,
12-
$shadow-color: #000
13-
) {
9+
@import '../tools/svg-url';
10+
11+
$triangle-before: '<svg width="19" height="11" viewBox="0 0 19 11"><path fill="';
12+
$triangle-after: '" d="M18.6067065,0.422572289 C18.3723515,0.182891566 18.0945495,0.0631506024 17.7735597,0.0631506024 L1.18500341,0.0631506024 C0.863883959,0.0631506024 0.586276451,0.182891566 0.351726962,0.422572289 C0.117177474,0.662518072 0,0.946198795 0,1.27414458 C0,1.6020241 0.117177474,1.88570482 0.351726962,2.12545181 L8.64603754,10.6012169 C8.88084642,10.8408976 9.15845392,10.9609036 9.47931399,10.9609036 C9.80017406,10.9609036 10.078041,10.8408976 10.3123959,10.6012169 L18.6067065,2.12538554 C18.8409966,1.88570482 18.958628,1.6020241 18.958628,1.27407831 C18.958628,0.946198795 18.8409966,0.662518072 18.6067065,0.422572289 Z"/></svg>';
13+
14+
@mixin select($text-color: #444, $border-color: #444, $background-color: #fff, $shadow-color: #000) {
1415
font-family: inherit;
1516
font-size: 1rem;
1617
line-height: 1.3;
@@ -24,12 +25,8 @@
2425
border: 1px solid $border-color;
2526
margin: 0;
2627
background-color: $background-color;
27-
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
28-
linear-gradient(
29-
to bottom,
30-
$background-color 0%,
31-
darken($background-color, 30%) 100%
32-
);
28+
background-image: svg-url($triangle-before + $text-color + $triangle-after),
29+
linear-gradient(to bottom, $background-color 0%, darken($background-color, 30%) 100%);
3330
background-repeat: no-repeat, repeat;
3431
background-position: right 0.7em top 50%, 0 0;
3532
background-size: 0.65em auto, 100%;

‎helpers/_text-truncate.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* Keep a line of text on a single line and add ellipsis if the text overflows.
3+
* @param: $overflow-style - CSS text overflow
4+
*/
5+
@mixin text-truncate($overflow-style: ellipsis) {
6+
white-space: nowrap;
7+
text-overflow: $overflow-style;
8+
overflow: hidden;
9+
}

0 commit comments

Comments
 (0)