Comments (5)
corysimmons
commented on June 18, 2024
You're trying to get column-width + column-gutter? Or do you need half a gutter?
I think we could add something like span-width to do this.
from jeet.
corysimmons
commented on June 18, 2024
I'd also heavily suggest you check out postcss-ant. It was specifically developed to get whatever sizes you could possibly imagine in an intuitive way.
For instance, here is a column, column + 1/2 gutter, column + full gutter: https://codepen.io/corysimmons/pen/dvNNbj?editors=1100
from jeet.
xaddict
commented on June 18, 2024
yeah, column width (3/12) plus one whole gutter width.
with a '12 column' grid the column-offset for 3/12 would
(1/12 column + 1/12 gutter)*3
…On Wed, 8 Mar 2017 at 21:35 Cory Simmons ***@***.***> wrote:
I'd also heavily suggest you check out postcss-ant
<http:///corysimmons/postcss-ant>. It was specifically developed to get
whatever sizes you could possibly imagine in an intuitive way.
For instance, here is a column, column + 1/2 gutter, column + full gutter:
https://codepen.io/corysimmons/pen/dvNNbj?editors=1100
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#525 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/ADJIhOtfrdNIKGeXXjqZGTgFASYfIMvxks5rjxEogaJpZM4MXLoj>
.
from jeet.
xaddict
commented on June 18, 2024
Before Jeet I used to ONLY use Less CSS.
And in LESS it's pretty easy (if Jeet supported LESS):
@column2: column-width(2/12); // 14.1666666667%
@gutter: column-gutter(1/12); // 3%
.col-sm-offset-3 {
margin-left: (@column2 + @gutter);
}
And the margin-left would be an added up percentage (17.1666666667%).
No need for postCSS, just LESS compiling to CSS.
…On Wed, 8 Mar 2017 at 23:13 Luuk Lamers ***@***.***> wrote:
yeah, column width (3/12) plus one whole gutter width.
with a '12 column' grid the column-offset for 3/12 would
(1/12 column + 1/12 gutter)*3
On Wed, 8 Mar 2017 at 21:35 Cory Simmons ***@***.***> wrote:
I'd also heavily suggest you check out postcss-ant
<http:///corysimmons/postcss-ant>. It was specifically developed to get
whatever sizes you could possibly imagine in an intuitive way.
For instance, here is a column, column + 1/2 gutter, column + full gutter:
https://codepen.io/corysimmons/pen/dvNNbj?editors=1100
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#525 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/ADJIhOtfrdNIKGeXXjqZGTgFASYfIMvxks5rjxEogaJpZM4MXLoj>
.
from jeet.
corysimmons
commented on June 18, 2024
Sorry, I hate, and have hated, LESS' syntax so I never ported Jeet to it.
Why would you need the full gutter? span() works by getting half gutter. I see a case for span-column() being introduced, but think your need might be too fringe to warrant more API.
So far as postcss-ant, if you're already into a project, then I wouldn't migrate, but for future projects you should really look into it. It works with any preprocessor (i.e. LESS) or even vanilla CSS.
I think wrapping what you're trying to do in a function is your best bet for now: https://codepen.io/corysimmons/pen/bqgrqo?editors=1100
And this should serve as a lesson that Sass, and other preprocessors, are grossly underpowered. I think they should be used for syntax sugar, but for libs, or anything custom, PostCSS is king.
@pixeldesu Thoughts on this issue?
from jeet.
Related Issues (20)
- Cycle not removing right margin HOT 7
- Column mixin outputs strange behaviour. HOT 3
- Explicit import in Stylus with Node integration is awkward HOT 1
- Is it possible to use flexbox with Jeet? HOT 7
- Problem with last item of a row HOT 1
- shift seems to have been changed to move HOT 1
- Looking for maintainer HOT 2
- Using Column from right to left HOT 3
- Using `box-sizing: border-box` on a column HOT 3
- clearfix() by condition HOT 5
- Column Cycle in Stylus and gutter % values HOT 7
- Rows with skipped elements? HOT 1
- Using align(both) collapses div?
- How do I make jeet ignore first child?
- Could someone please extend the so called API on the website with clearer examples? HOT 3
- Flexbox support HOT 4
- text-align: inherit on columns HOT 1
- Nth offset option for column proposal
- Is this project dead? HOT 1
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 jeet.