Comments (6)
I might start taking a crack at this tonight
from flexiblegs-scss-plus.
Am I correct in thinking that the idea for the Sass version is: maintain the same usage (adding classes to HTML), but provide settings and so forth?
from flexiblegs-scss-plus.
@mknadler examine code :)
@mixin breakpoint($class) {
@if $class == xs {
@content;
}
@else if $class == sm {
@media (min-width: 415px) { @content; }
}
@else if $class == md {
@media (min-width: 668px) { @content; }
}
@else if $class == lg {
@media (min-width: 769px) { @content; }
}
@else if $class == xl {
@media (min-width: 1025px) { @content; }
}
@else {
@warn "Breakpoint mixin supports: xs, sm, md, lg, xl";
}
}
ul{
@include wrap;
@include breakpoint(xs) {
$gutter: 2;
}
@include breakpoint(sm) {
$gutter: 5;
}
@include breakpoint(md) {
$gutter: 10;
}
@include breakpoint(lg) {
$gutter: 15;
}
@include breakpoint(xl) {
$gutter: 20;
}
}
ul li {
@include breakpoint(xs) {
$row: 2;
$col: 1;
}
@include breakpoint(sm) {
$row: 3;
$col: 1;
}
@include breakpoint(md) {
$row: 12;
$col: 6;
}
@include breakpoint(lg) {
$row: 6;
$col: 1;
}
@include breakpoint(xl) {
$row: 5;
$col: 1;
}
}
from flexiblegs-scss-plus.
@mknadler have you checked ?
from flexiblegs-scss-plus.
@dnomak My first thought: I'm not sure if passing configuration with variables inside of an included mixin (e.g. @include breakpoint(xs) { $row: 2; $col: $1}
is going to be the best approach? I think that if I were using this GS for the first time, and I saw that I needed to explicitly call $row and $col each time I used it, I'd probably move on to a simpler-to-implement system.
Also, can you clarify what $row
and $col
are intended to do, here? is the user setting height with $row?
from flexiblegs-scss-plus.
@mknadler that should be used :)
// Example 1
ul {
@include wrap;
// @include wrap(flexbox);
@include center(lg);
@include left(md);
@include right(sm);
@include reverse(lg);
@include reverse(sm);
@include gutter(xs, 2);
@include gutter(sm, 5);
@include gutter(md, 10, out);
@include gutter(lg, 15);
@include gutter(xl, 20);
}
ul li {
@include fisrt(lg);
@include last(md);
@include column(xs, auto);
@include column(sm, hidden);
@include column(md, 12, 6);
@include column(lg, 5,1);
@include column(xl, 1);
}
// Formule
// width : 100%; (xl - li)
// width : calc(100% / 5 * 1); (lg - li - row: 5 col: 1)
// width : calc(100% / 12 * 6); (md - li - row: 12 col: 6)
// display : none; (sm - li)
// width : auto; (xs - li)
// Example 2
section {
@include wrap;
aside {
@include column(lg, 12, 3);
}
article {
@include column(lg, 12, 9);
}
}
// Formule
// width : calc(100% / 12 * 3); (lg - aside - row: 12 col: 3)
// width : calc(100% / 12 * 9); (lg - article - row: 12 col: 9)
http://css-tricks.com/a-couple-of-use-cases-for-calc/
from flexiblegs-scss-plus.
Related Issues (20)
- add class .reverse-*, .first-* and .last-* HOT 1
- add class .top-*, .middle-* and .bottom-*
- add class .flex-*-*
- create less version
- create stylus version
- Custom number of columns HOT 1
- create .sass version
- bower.json main attribute HOT 3
- Kenar çubuğu yapılabilir mi? HOT 3
- Comparison with flexboxgrid HOT 2
- add class .*-table and .*-not-table HOT 1
- add class *-masonry
- npm eklemesi
- rails gem güncellemesi
- update mixin sass, scss, less and stylus
- Convert to SCSS HOT 2
- yeni özellik *-width-*
- kod tekrarı düzeltilmeli HOT 19
- Görebildiğim düzeltmeler HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flexiblegs-scss-plus.