jonikorpi / golden-grid-system Goto Github PK
View Code? Open in Web Editor NEWA folding grid for responsive design.
Home Page: http://goldengridsystem.com/
License: MIT License
A folding grid for responsive design.
Home Page: http://goldengridsystem.com/
License: MIT License
Since Rails has moved entirely to SASS, it would be great to be able to enable advanced customization out of the box for that as well.
on the previous responsive site I did, I set a max-width for each media query, then I used a spreadsheet to calculate percentage values for the widths and margins.
For example max-width : 748px
then if I want a width of 2 columns, I'd do( 2 x column width + 1x gutter width) / max-width
how did you get to the values that yo uuse for example in this declaration:
header, #twoway {
margin: 0 27.77777777777778%;
}
thanks
Paul
Hi, I just wanted to point out that in the Sass version of the grid, the @extend
directive is used inside "IE fixes" and the min-width: 40em
media query. Because of the way Sass handles @extend
this results in the .huge declaration being converted to:
.huge, .ie h1, h1 {
/* 42px / 48px */
font-size: 2.625em;
line-height: 1.143em;
}
… which I don't think is what's intended. Less has a slightly simpler mixin syntax, but I think this is what you want:
@mixin huge {
/* 42px / 48px */
font-size: #{42 / $em}em;
line-height: ($line *2) / 42 * 1em;
}
.huge { @include huge; }
… then, in the IE-specific, and media query declarations, you'd use the same, @include huge;
… this produces a CSS document that looks more like the GGS.css that's included in the source.
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library jonikorpi/Golden-Grid-System
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "jonikorpi/Golden-Grid-System",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Hi
<article id="twoway">
<section class="wrapper">
<h3>A two-way split</h3>
<p class="wrapper" style="width=50%;float:left;">
These two blocks of text will float side by side with some empty columns on the sides on large screens. On medium-sized screens the empty columns will disappear, and on small screens the blocks will be stacked vertically.
</p>
<p class="wrapper" style="width=50%;float:left;">
These two blocks of text will float side by side with some empty columns on the sides on large screens. On medium-sized screens the empty columns will disappear, and on small screens the blocks will be stacked vertically.
</p>
</section>
<section class="wrapper">
<h3>By the way</h3>
<p>
If you're viewing this page on an iOS device, it might zoom in wonkily when you rotate your device. This is because of <a href="http://filamentgroup.com/examples/iosScaleBug/">a Mobile Safari bug</a>.
</p>
</section>
</article>
the left and right margins of the floated paragraphs should somehow merge with the parent margins, shouldn't they?
Sometimes in RWD apps, the leftmost column only contains icons (e.g. similar to this).
In cases like this, the leftmost column's width does not change within the bounds of two breakpoint (e.g. from 481px to 768px).
Is it possible to create layouts like this using StackLayout?
I'm starting to work with GGS, and I wanted a simpler way to define the width of blocks in relation to the grid. So, rather than thinking about the margins on a block, and rather than thinking about the low-level 18 columns, I wanted to be able to declare: make a block that is 8 columns wide for the 8 column grid.
Here's what I came up with, using Less:
#block (@left_col, @span, @colcnt: 4) {
@fold: 16/@colcnt;
margin-left: @column + ((@left_col - 1) * @fold * @column);
margin-right: @column + (16/@fold - (@left_col - 1) - (@span)) * @fold * @column;
}
@4cols: 4;
@8cols: 8;
@16cols: 16;
Then, it's used like:
/* @media screen and (min-width: 1200px) */
@media screen and (min-width: 75em) {
header {
#block(1,8,@8cols); // an 8 column wide block for the 8 column grid
}
}
/* @media screen and (min-width: 1872px) */
@media screen and (min-width: 117em) {
header {
#block(4,8,@16cols); // an 8 column wide block for the 16 column grid
}
}
Note the first parameter sets on which column the block starts (assuming it clears to a new row--I haven't really thought this through relative to floating blocks yet).
I wanted to find some way to not have to reference the @8cols, etc., in each rule. It seems like the ideal would be that, based on the context in the CSS, the mixin would "know" if the rule was in the context of a 4, 8, or 16 column grid. Less does support scoping in the media queries, which I played with. But, using the global @4cols, @8cols, and @16cols seemed clearer and easier to maintain, albeit a bit less elegant.
What do you think about adding something like this to GGS?
I'd appreciate any feedback about the semantics of how this mixin and parameters are named vs what it's meant to do. And, also if there are any Less tricks that might make this more streamlined.
Thanks!
Hi,
whats up with your website? The CSS-Files will not be loaded.
Greetings
I'm pretty sure you can remove all these elements from your padding/border/margin reset without any problem (although maybe a couple have default margins). There is also a double mention of menu
in the reset
div,
span,
object,
iframe,
a,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
table,
tbody,
tfoot,
thead,
article,
aside,
footer,
header,
hgroup,
nav,
section,
menu,
time,
mark,
audio,
video,
canvas
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.