@@ -23,7 +23,6 @@ <h1 class="header-title">Flexbox Grid Mixins <span class="version">v.0.1.1</span
2323
2424</ div >
2525
26-
2726< h2 > Feature</ h2 >
2827
2928< p > < strong > Flexbox Grid Mixins</ strong > is Sass Mixins library to help you write well-structured, readable, maintainable, component-based grid using Flexbox (CSS Flexible Box Layout Module).</ p >
@@ -367,6 +366,7 @@ <h3>Other Examples</h3>
367366< li > < a href ="example/example.html "> Flexbox Grid Mixins Example</ a > </ li >
368367< li > < a href ="example/holy-grail-layout.html "> Holy Grail Layout - Using Flexbox Grid Mixins</ a > </ li >
369368< li > < a href ="example/responsive.html "> Responsive web design - Using Flexbox Grid Mixins</ a > </ li >
369+ < li > < a href ="example/unit-set.html "> Unit-Set Grid (Experimental stage)</ a > </ li >
370370< li > < a href ="example/grid-type.html "> Grid Type</ a > </ li >
371371</ ul >
372372
@@ -464,8 +464,8 @@ <h3 class="reference"><span class="small">@include</span> <span class="big">grid
464464 < tr >
465465 < td > $gutter</ td >
466466 < td > null</ td >
467- < td > null | <percentage></ td >
468- < td > < code > null</ code > is no margin of both ends of the grid. < code > <percentage></ code > generate a margin of both ends of the grid.</ td >
467+ < td > null | << a href =" http://www.w3.org/TR/CSS21/syndata.html# percentage-units " target =" _blank " > percentage </ a > > | < < a href =" http://www.w3.org/TR/CSS21/syndata.html#length-units " target =" _blank " > length </ a > ></ td >
468+ < td > < code > null</ code > is no margin of both ends of the grid. < code > <percentage></ code > generate a margin of both ends of the grid. < code > <length> </ code > generate a margin of both ends of the grid ( < code > <length> </ code > is experimental stage). </ td >
469469 </ tr >
470470 < tr >
471471 < td > $grid-type</ td >
@@ -481,6 +481,8 @@ <h3 class="reference"><span class="small">@include</span> <span class="big">grid
481481
482482< p > Generate the grid columns.</ p >
483483
484+ < p > The use of CSS cal() is experimental stage. If $col sets < code > <number></ code > and $gutter sets < code > <length></ code > , use CSS cal().</ p >
485+
484486< table >
485487 < tr >
486488 < th > Arguments</ th >
@@ -491,26 +493,26 @@ <h3 class="reference"><span class="small">@include</span> <span class="big">grid
491493 < tr >
492494 < td > $col</ td >
493495 < td > null</ td >
494- < td > null | initial | <number> | auto | equal | none | breakpoint | <width></ td >
495- < td > < code > null</ code > is no set columns. < code > <number></ code > is number of columns. < code > initial</ code > , < code > auto</ code > , < code > equal</ code > , < code > none</ code > and < code > breakpoint</ code > are preset columns. < code > <width></ code > is unit set columns (Experimental stage).</ td >
496+ < td > null | initial | << a href =" http://www.w3.org/TR/CSS21/syndata.html#numbers " target =" _blank " > number</ a > > | auto | equal | none | breakpoint | << a href =" http://www.w3.org/TR/CSS21/visudet.html#the- width-property " target =" _blank " > width </ a > ></ td >
497+ < td > < code > null</ code > is no set columns. < code > <number></ code > is number of columns. < code > initial</ code > , < code > auto</ code > , < code > equal</ code > , < code > none</ code > and < code > breakpoint</ code > are preset columns. < code > <width></ code > is unit set columns (< code > <width> </ code > is experimental stage).</ td >
496498 </ tr >
497499 < tr >
498500 < td > $grid-columns</ td >
499501 < td > 12</ td >
500- < td > <number></ td >
502+ < td > << a href =" http://www.w3.org/TR/CSS21/syndata.html#numbers " target =" _blank " > number</ a > ></ td >
501503 < td > the total number of columns in the grid.</ td >
502504 </ tr >
503505 < tr >
504506 < td > $col-offset</ td >
505507 < td > null</ td >
506- < td > null | <percentage></ td >
508+ < td > null | << a href =" http://www.w3.org/TR/CSS21/syndata.html# percentage-units " target =" _blank " > percentage </ a > ></ td >
507509 < td > < code > <percentage></ code > offset a width of columns.</ td >
508510 </ tr >
509511 < tr >
510512 < td > $gutter</ td >
511513 < td > null</ td >
512- < td > null | <percentage></ td >
513- < td > < code > null</ code > is no margin between columns. < code > <percentage></ code > generate a margin of between columns.</ td >
514+ < td > null | << a href =" http://www.w3.org/TR/CSS21/syndata.html# percentage-units " target =" _blank " > percentage </ a > > | < < a href =" http://www.w3.org/TR/CSS21/syndata.html#length-units " target =" _blank " > length </ a > ></ td >
515+ < td > < code > null</ code > is no margin between columns. < code > <percentage></ code > generate a margin of between columns. < code > <length> </ code > generate a margin of between columns ( < code > <length> </ code > is experimental stage). </ td >
514516 </ tr >
515517 < tr >
516518 < td > $condensed</ td >
@@ -527,25 +529,25 @@ <h3 class="reference"><span class="small">@include</span> <span class="big">grid
527529 < tr >
528530 < td > $flex-grow</ td >
529531 < td > 0 *</ td >
530- < td > <number></ td >
532+ < td > << a href =" http://www.w3.org/TR/CSS21/syndata.html#numbers " target =" _blank " > number</ a > ></ td >
531533 < td > grow relative to the rest of the columns in the grid</ td >
532534 </ tr >
533535 < tr >
534536 < td > $flex-shrink</ td >
535537 < td > 1 *</ td >
536- < td > <number></ td >
538+ < td > << a href =" http://www.w3.org/TR/CSS21/syndata.html#numbers " target =" _blank " > number</ a > ></ td >
537539 < td > shrink relative to the rest of the columns in the grid</ td >
538540 </ tr >
539541 < tr >
540542 < td > $flex-basis</ td >
541543 < td > auto *</ td >
542- < td > <length> | auto</ td >
544+ < td > << a href =" http://www.w3.org/TR/CSS21/syndata.html# length-units " target =" _blank " > length </ a > > | auto</ td >
543545 < td > initial main size of the columns</ td >
544546 </ tr >
545547 < tr >
546548 < td > $order</ td >
547549 < td > null</ td >
548- < td > null | <integer></ td >
550+ < td > null | << a href =" http://www.w3.org/TR/CSS21/syndata.html#numbers " target =" _blank " > integer</ a > ></ td >
549551 < td > control the order in which appear in the grid container</ td >
550552 </ tr >
551553 < tr >
@@ -578,31 +580,31 @@ <h3 class="reference"><span class="small">@include</span> <span class="big">grid
578580 < tr >
579581 < td > $margin</ td >
580582 < td > null</ td >
581- < td > null | <margin-width></ td >
583+ < td > null | << a href =" http://www.w3.org/TR/CSS21/box.html#value-def- margin-width" target =" _blank " > margin-width </ a > ></ td >
582584 < td > </ td >
583585 </ tr >
584586 < tr >
585587 < td > $margin-top</ td >
586588 < td > null</ td >
587- < td > null | <margin-width></ td >
589+ < td > null | << a href =" http://www.w3.org/TR/CSS21/box.html#value-def- margin-width" target =" _blank " > margin-width </ a > ></ td >
588590 < td > </ td >
589591 </ tr >
590592 < tr >
591593 < td > $margin-right</ td >
592594 < td > null</ td >
593- < td > null | <margin-width></ td >
595+ < td > null | << a href =" http://www.w3.org/TR/CSS21/box.html#value-def- margin-width" target =" _blank " > margin-width </ a > ></ td >
594596 < td > </ td >
595597 </ tr >
596598 < tr >
597599 < td > $margin-bottom</ td >
598600 < td > null</ td >
599- < td > null | <margin-width></ td >
601+ < td > null | << a href =" http://www.w3.org/TR/CSS21/box.html#value-def- margin-width" target =" _blank " > margin-width </ a > ></ td >
600602 < td > </ td >
601603 </ tr >
602604 < tr >
603605 < td > $margin-left</ td >
604606 < td > null</ td >
605- < td > null | <margin-width></ td >
607+ < td > null | << a href =" http://www.w3.org/TR/CSS21/box.html#value-def- margin-width" target =" _blank " > margin-width </ a > ></ td >
606608 < td > </ td >
607609 </ tr >
608610</ table >
@@ -621,31 +623,31 @@ <h3 class="reference"><span class="small">@include</span> <span class="big">grid
621623 < tr >
622624 < td > $margin</ td >
623625 < td > null</ td >
624- < td > null | <margin-width></ td >
626+ < td > null | << a href =" http://www.w3.org/TR/CSS21/box.html#value-def- margin-width" target =" _blank " > margin-width </ a > ></ td >
625627 < td > </ td >
626628 </ tr >
627629 < tr >
628630 < td > $margin-top</ td >
629631 < td > null</ td >
630- < td > null | <margin-width></ td >
632+ < td > null | << a href =" http://www.w3.org/TR/CSS21/box.html#value-def- margin-width" target =" _blank " > margin-width </ a > ></ td >
631633 < td > </ td >
632634 </ tr >
633635 < tr >
634636 < td > $margin-right</ td >
635637 < td > null</ td >
636- < td > null | <margin-width></ td >
638+ < td > null | << a href =" http://www.w3.org/TR/CSS21/box.html#value-def- margin-width" target =" _blank " > margin-width </ a > ></ td >
637639 < td > </ td >
638640 </ tr >
639641 < tr >
640642 < td > $margin-bottom</ td >
641643 < td > null</ td >
642- < td > null | <margin-width></ td >
644+ < td > null | << a href =" http://www.w3.org/TR/CSS21/box.html#value-def- margin-width" target =" _blank " > margin-width </ a > ></ td >
643645 < td > </ td >
644646 </ tr >
645647 < tr >
646648 < td > $margin-left</ td >
647649 < td > null</ td >
648- < td > null | <margin-width></ td >
650+ < td > null | << a href =" http://www.w3.org/TR/CSS21/box.html#value-def- margin-width" target =" _blank " > margin-width </ a > ></ td >
649651 < td > </ td >
650652 </ tr >
651653</ table >
@@ -656,6 +658,7 @@ <h2 id="Resources">Resources</h2>
656658 < li > < a href ="https://www.w3.org/TR/css-flexbox-1/ " target ="_blank "> CSS Flexible Box Layout Module Level 1</ a > </ li >
657659 < li > < a href ="https://css-tricks.com/snippets/css/a-guide-to-flexbox/ " target ="_blank "> A Complete Guide to Flexbox</ a > </ li >
658660 < li > < a href ="http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ " target ="_blank "> Holy Grail Layout - Solved by Flexbox</ a > </ li >
661+ < li > < a href ="https://www.w3.org/TR/css-values/#calc-notation " target ="_blank "> Mathematical Expressions: calc()</ a > </ li >
659662</ ul >
660663
661664< h2 id ="Contribute "> Contribute</ h2 >
0 commit comments