jonikorpi / golden-grid-system Goto Github PK

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.

Hey, maintainer(s) of jonikorpi/Golden-Grid-System!

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!

@media screen and (min-width: 130em)

[...]

max-width: 2560 em;

Hi,
whats up with your website? The CSS-Files will not be loaded.

Greetings

The font style of some selectors are overriding my base font styles. I realise I could make my selectors more specific, but that's a poor workaround that leads to unnecessary complex CSS.

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