aurora-kit/aurora-grid

Grid system for Aurora Kit

Aurora Grid

The big idea behind Aurora Grid is to empower our users with all the tools necessary to create beautiful layouts for any devices with a simple and easy to use system.

It’s an easy, flexible and full of responsive and mobile first features, made for designers, CSS Grid System.

Use it to create modern website and apps with a strong focus on precise controlled layouts

• Documentation
• Download
• Generator

You can also install through npm i aurora-grid

### Custom Build

Aurora Grid was created using Sass . It includes some settings and mixins to control and create custom builds for advanced needs. For an easy to use development process you just have to install the npm packages and start editing, building and exporting your custom aurora-grid.css file. From the Terminal App, in the path where you have the Aurora Grid folder, you can run:

npm install

Now you have all the development dependencies installed in your node_modules folder.

We use Gulp as a task runner. Make sure you have it installed globally or just npm install gulp@next -g. Now you are ready to create a custom build of your project or watch it when working on it. Just run one of the two commands on the Terminal:

gulp

or

gulp watch

The scss files are in /src folder. And your output files will be available on the /dist folder.

More information about Sass settings and functions here

• Documentation
• Download
• Generator

---

© 2015 Pixeden | License

aurora-grid's Issues

Error: Undefined variable: "$min-val"

When you install project as is and run $ gulp command, error prevents it from being built:

Error: src/_functions.scss
Error: Undefined variable: "$min-val".
        on line 101 of src/_functions.scss
>>   $min-query: if($min-val and $min-val != 0, '(min-width: #{$min-val})', null)
   -----------------^

Of course, I ran npm install first but apparently, some variables are missing out.

Root font-size?

Re-defining the root font-size is probably not the best idea, especially not even allowing it as a setting. Is there a better solution for this need?

I'd almost say the same for the box-sizing, but I'm sure that's a requirement for flexbox.

Weird wrapping of columns

Not sure if this has something with flex-wrap:wrap on the grid container, or some other property, but I am having a very weird column wrap case.

Here is the fiddle https://jsfiddle.net/LmLo4x69/ . It is completely broken in Firefox, and works to some extent in Chrome.

The columns begin wrapping(stacking) before the xs layout kicks in.

Here is the same thing with flexbox grid. https://jsfiddle.net/16dwj7k0/

In this fiddle the columns wrap exactly when the xs layout starts. I think that something is broken in how Aurora grid behaves.

Guess it is something with flex shorthand on each ae-grid__item, and not related to flex-wrap on the container.

Please correct me if I am wrong.

Aspect ratio for bg images

This is really not an issue, nor it is related to Aurora grid, but didn't knew where to ask so here it is.

In your Urku theme I saw a very interesting approach to maintaining aspect ratios for bg images. What is the reasoning behind the padding-top values used there? Is it from this article http://nicolasgallagher.com/flexible-css-cover-images/ ? The values used there are different though.

p.s. One suggestion. Add an Image Portfolio repo to github, it is brilliant. All the possibilities+ switch options are truly amazing. It could be like an add-on for Aurora grid. And thanks for the grid, I've switched to it for my latest project, really nice work !

Including into into existing projects with custom settings

It's be nice to see some examples around including into existing projects while being managed by npm.

Right now you can't really do this with npm manager without copying over all of the source from node_modules/ of aurora-grid and aurora-shared. And what's the deal with aurora-shared AND that it's a dependency? It holds some important settings, e.g., $ae-breakpoints.

Susy seems to have a decent settings system that allows this. See this npm/susy/gulp example