rsms / raster Goto Github PK

Hey there!

What a splendid grid system. I ported it to Sass, which fits my worflow: https://github.com/johannschopplich/raster-sass/

Almost every paramter is configurable just like in the original JS generator, for example:

$raster-element: r-grid !default;
$grid-attribute: columns !default;
$cell-attribute: span !default;
$columns: 12 !default;

$small-breakpoint: 600px;
$small-suffix: s;
$large-breakpoint: 1600px;
$large-suffix: l;

If you should create a README at some point, you are welcome to link to the project. I can imagine that some users will benefit from a Sass implementation. Thanks in advance!

1. There is padding between grids in "raster2.css" expressions. When I use "raster.grid.css" there is no padding between grids.

2. How do I adjust the paddings as I want?

Thanks.

I was wondering why in the newer versions you added a prefix on <grid> and <c>?! Is it for browser compatibility or else.. ? Should I switch also?

Hi, I was looking at your example and thought you may want to see this:

.

Hi, thanks for the library. I'm trying to use it with yarn but it doesn't like the version specified in package.json.

$ yarn add https://github.com/rsms/raster.git#v6
yarn add v1.19.1
[1/4] Resolving packages...
error Can't add "raster": invalid package version "4".

I believe the field is required to be semver formatted, so in this case it would be 6.0.

It seems not, but how do I know it would work on all browsers ?

Maybe the docs should have a little paragraph about it.

Looks like it should go from 1 through 8, but it's stuck at 5.

Thanks for the library. I found that while browsing the repository that the v6 tag is 493c5f0 but it's the commit after (5dca1b9) that actually puts v6 into raster.css etc.

Hi,
Love the framework so far!

Question - can I overlay cells using z-index? Looks like z-index has no effect and the cell is being pushed to the next cell in the grid.

Example with Raster: Codepen
Example w/o Raster: Codepen

Thank you!

Thanks a lot for this great CSS Grid / Framework implementation, it's a breeze to work with! I'm super happy with it.

After using it for a while, I noticed some inconsistencies across the files.

Like the raster.grid.css doesn't include the [flow-cols="X"] option and miss the

r-grid {
  grid-column-gap: var(--columnGap);
  grid-row-gap: var(--rowGap)
}

part, both which is very helpful for some grid implementation.

If you then reach for the framework raster2.css file, you get a lot more general styling for regular tags which you actually don't need or want.

Can you provide one full-featured raster.grid.csswhich is "feature-complete" in terms of the grid?

Thanks a lot! I do not expect an answer to this, just some thoughts.

mega noob incoming.

Im hacking my way around angular and raster grid then made the foolish error of trying to include the .css files in an angular component and the 'r-cell' etc html in the template. this throws up all kind of errors, and im starting to learn why.

Has anyone successfully incorporated raster grid into an angular app please?

Do the 'r-cell' 'r-grid' etc elements need to be declared in angular via Angular Elements?

Many thanks, would be good to use raster in my little angular project.

Jeremy
slonch.com