nickrigby / silc-grid Goto Github PK
View Code? Open in Web Editor NEWFlexbox-based grid for the silc framework
Home Page: https://silc.io
License: MIT License
Flexbox-based grid for the silc framework
Home Page: https://silc.io
License: MIT License
Since flexbox doesn't support collapsing margins, sometimes using silc-grid causes there to be excess whitespace. For example, if paragraphs have margin-bottom: 20px
and heading tags have margin-top: 30px
, normally a paragraph followed by a heading would have 30px of space beneath it. If a silc-grid with a paragraph inside one of its silc-grid__col's comes before a heading though the spacing will be 50px because margins don't collapse with flex containers. I've come up with the following Sass to address this:
.silc-grid--collapse-children .#{$silc-grid--namespace}grid__col {
@each $breakpoint-name, $breakpoint-width in $silc-core--breakpoints {
@for $x from 1 to $silc-grid--columns + 1 {
&--#{$x}-#{$breakpoint-name} {
&:first-child > *:first-child {
margin-top: 0;
}
&:last-child > *:last-child {
margin-bottom: 0;
}
@include media(#{$breakpoint-name}) {
> *:first-child {
margin-top: 0;
}
> *:last-child {
margin-bottom: 0;
}
}
}
}
}
}
This forces the first column's first child to always have no margin-top and the last column's last child to have no margin-bottom. When columns aren't stacked it applies those styles to the first and last children of each column. Proposing that this functionality will be available via a modifier class like .silc-grid--collapse-children
.
Add breakpoint modifier classes for grid collapse and no gutters functionality.
In a 12 column grid, no breakpoint classes are generated for the last column.
Grid class for "auto" columns are duplicated for styles outside of specific breakpoints.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.