owlystuff / amazium Goto Github PK
View Code? Open in Web Editor NEWThe responsive CSS web framework
Home Page: https://www.amazium.co.uk
License: MIT License
The responsive CSS web framework
Home Page: https://www.amazium.co.uk
License: MIT License
a {transition:all} in base.css prevents smooth opacity animation of UItoTop button
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
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; }
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.
Nice form but in ie-9 Browser showing differently Radio Buttons and Check Boxes appearing weired please
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')) {
...
...
...
}
Build in SASS, but still offer a compiled CSS version.
Currently, Amazium doesn't support errors on checkboxes and radio buttons... we should do that
Currently it uses a listener on resize, there must be a better way...
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.
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-...
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
Just installed V04 and the grid seems broken in Safari. Even your website the grid doesn't appear to be working.
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.
Is it just me? I have not been able to find the bug yet...
Dom
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% }
It would be nice if Amazium provided a consistent style for the progress
element and possibly the meter
element as well
Look into changing images used in input fields to icon fonts
Need to check browser support
Greetings,
Amazium looks wonderful and clean! Do you have any plans to add tabs and modal dialogs?
Cheers,
Everardo
I have something like this
<div class="row">
<div class="grid-8 grid-12-mobile grid-12-tablet">
</div>
</div>
and I would expect
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!
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
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
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!!
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;
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.