owlystuff/amazium

The responsive CSS web framework

amazium's Issues

Navigation bug solution needs improvement

Currently it uses a listener on resize, there must be a better way...

Required Checkboxes look odd

When a checkbox is required (i.e. it has `required="required" attribute), the checkbox and the Amazium override both show. This is a particular problem on Terms and Conditions checkboxes:

Consistently use variables for media queries

While breakpoint variables as specified, they are not consistently applied. In several places media queries have hardcoded px values.

These values also differ from the values in the configuration file, but from the comments it appears they are meant to be the same value. So it appears these hardcoded values were forgotten at some point, while the configuration values were updated.

Square background around radio button elements

Amazium website is displaying square background behind the radio buttons.

Showing Googles reCaptcha in a Form

It seems the applied Amazium styles don't go well together with reCaptcha. See attached screenprint.

How would you display a reCaptcha correctly in a form?

.borderless colums overwritten

Nice framework! I've been using parts of it in a new project. I did find some issues though, starting with borderless columns.

The borderless class effectively removes the top border, but because of the positioning of media queries the side borders get added further down in the stylesheet.

Moving this line to the bottom of _columns.scss, below the media queries, fixes things.
.borderless > * { border-color:transparent; }

Use !Default for sass variables

Please add !default to each sass variable. It allows us to override these values without having to touch the framework code. See: https://robots.thoughtbot.com/sass-default

A related issue: Could you use a namespace for your variables? Like $amazium-...

IE10 compatibility

Could you please add support for the IE10 by adding the following styles:

  display: -ms-flexbox;
  -ms-flex: 0 1 auto;
  -ms-flex-wrap: wrap;

grid-*-tablet doesn't override max-width

I have something like this

<div class="row">
    <div class="grid-8 grid-12-mobile grid-12-tablet">
    </div>
</div>

and I would expect

• size 8 in desktop
• size 12 in tablet
• size 12 in mobile

but this rule

@media only screen and (min-width:768px) and (max-width:959px) {
    .grid-12-tablet {
        flex-basic:100%;
    }
}

doesn't override the max-width of this rule

@media (min-width:768px) {
    .grid-8 {
        flex-basis:66.66667%;
        max-width:66.66667%;
    }
}

so I'm getting flex-basis:100% and max-width:66.66667% when max-width should be 100%.

I don't know if this is intended or not. If it's bug then I would be happy to do a pull request to fix this.

Thanks!

All buttons and links are black (except white bs & ls) -> version 3.6.1

Is it just me? I have not been able to find the bug yet...

Dom

Help

Thank you for this instructions Catchamonkey. I'm reading this now and I believe that this solution is very good for my need. ,

P2or, I'm using the forms.html as sample. But, i can't create or change the validation options?i.e. I need to verify the password lenght, if the confirmation password is equal to password, the text fields lenght... and I want to show the Amazium messages, as a red bar (tag small). Its a beautifull solution.

PS.: Sorry. Idon't know how can I reopen another issue.

Thank you all!!

UItoTop opacity animation issue

a {transition:all} in base.css prevents smooth opacity animation of UItoTop button

Keep the fluid sperate from the pixel grid

I have seen your newest commit (4.0 pre 9) and i would like to point out that it is more convenient to keep the two grids seperate from each other. This way i can include or exclude (SASS) the different versions as needed. And it is clearer and more practical to adjust certain values if the two grids aren't merged together.

By the way i'm preparing some improvements for the grid and would like to contribute, are you ok with a pull request?

Preview of my improvements: http://codepen.io/retober/pen/LNweww

Help

Hi.

I´m trying to use Amazium and i like it! But i don't understand how can i change or create new validations like password, text field count chars etc.

Can you help me please.

Thank you.

inline-child--width--n tags

They must be named wrong, shouldn't be inline-child--grid-n?

.inline-parent .inline-child--width-1, .inline-parent .inline-child--width-2, .inline-parent .inline-child--width-3, .inline-parent .inline-child--width-4, .inline-parent .inline-child--width-5, .inline-parent .inline-child--width-6, .inline-parent .inline-child--width-7, .inline-parent .inline-child--width-8, .inline-parent .inline-child--width-9 { width: 100% }

Modularity

As indicated in another issue, I'm using small parts of Amazium. I briefly considered switching to your grid system, but considering I'm on a clock and halfway in the project I left that for another time. In the end I chose to only use parts of the base and the form modules.

Because I like to keep my code clean and mean, I edited the main Amazium file to disable all other modules. It would be nice to be able to do this without having to edit the framework.

This can easily be achieved by adding this to the variables file:

$amazium-modules: ('base', 'form', 'buttons', 'grid', 'columns') !default;

And wrapping each module in an if statement, like this:

@if (index($amazium-modules, 'grid')) {
...
...
...
}

CDN

hello

could you please make this available for use through unpkg CDN

https://unpkg.com

Tabs and Modals

Greetings,
Amazium looks wonderful and clean! Do you have any plans to add tabs and modal dialogs?
Cheers,
Everardo

Create SASS version

Build in SASS, but still offer a compiled CSS version.

Remove MavenPro

I think it would be nice to remove the Maven Pro in the next release (v5). As a starting point for new projects i think it is not necessary to include a font, because mostly other fonts are needed. There are very few use cases for the included font. Could it be removed in the next release? The css files referencing it could call a system font.

What are your thoughts about it ? @catchamonkey @MikeBallan

Worth removing the resize property on textarea?

Add resize: none; to textarea or leave it down to user preference?

Grid Line Breaks

Question about how rows work, and if this is just a bug.

It used to be I could run a loop within a row to create a grid of portfolio images like so:

<section id="portfolio">
    <div class="row">
        <!-- Start Loop -->
        <div class="grid-6">
            STUFF
        </div>
        <!-- End Loop -->
        <!-- Run Loop 5 more Times (3 Rows, 2 Columns) -->
    </div>
</section>

When I run this same loop in Amazium 4.0 the grid shrinks down to have six images in one row, rather than wrapping or line breaking. Is that something different with the new css flex or is that me using Amazium 4.0 before it's had the kinks run out.

I had pulled this repository open to download the script again for a new project and saw that you all had updated to 4.0, so I figured I'd try it out and now I'm being annoying guy asking too many questions.

Icon font for form inputs

Look into changing images used in input fields to icon fonts
Need to check browser support

Nice Form but ie-9 Browser Radio Buttons and Check Boxes appearing weired

Nice form but in ie-9 Browser showing differently Radio Buttons and Check Boxes appearing weired please

columns-1-mobile

Your tutorial in http://www.amazium.co.uk/structure/columns says you can use that.
That css rule is not present in your https://github.com/OwlyStuff/amazium/releases/download/v4.1.2/amazium.css

Rules to generic: Can´t use span or small inseide form or fieldset

Hi,

first thanks for your great and simple theme. I use this theme very often. But there are some css rules that are to generic and break some of my stuff.

form.css

form span         {/*...*/}
fieldset small    {/*...*/}
/*...*/
input[type="checkbox"] + label + small
/*...*/
input[type="radio"] + label + small
/*...*/
.hide-lables fieldset.error input + small,
.hide-lables fieldset.error select + small,
.hide-lables fieldset.error textarea + small
.hide-lables small

Because of this to selectors I can´t really use a span or small element inside my forms. Also form span change the inline element span into a block element. I use span very often for inline styling e.g.: changing a text color. I´m not sure for what you are using this selector. Disable the display:block and the margin properties doesn´t change anything in your examples, because .radio > span or .checkbox > span will take over.
Also I use small to only changing the size of the inner text. In the hide-labels the small element will also be hidden.
So you may wanna change this selectors to something like this:
form.css

form .form-block         {/*...*/}
fieldset .error    {/*...*/}
/*...*/
input[type="checkbox"] + label + .error
/*...*/
input[type="radio"] + label + .error
/*...*/
.hide-lables fieldset.error input + .error,
.hide-lables fieldset.error select + .error,
.hide-lables fieldset.error textarea + .error
.hide-lables .error

It´s just an recommendation but in the current state, I always have to change this values before i can use your theme.

regards,
David

HTML5 Progress element could do with styling

It would be nice if Amazium provided a consistent style for the progress element and possibly the meter element as well

Broken in Safari?

Just installed V04 and the grid seems broken in Safari. Even your website the grid doesn't appear to be working.

Errors on Checkboxes and Radio Buttons

Currently, Amazium doesn't support errors on checkboxes and radio buttons... we should do that