cardinalcss / cardinalcss Goto Github PK

I think I want to do this, so that IE < 9 compatibility is a bit easier for folks not using preprocessors to automate pixel fallbacks. Any objections / glaring reasons why this should not be done? Speak up now!

Documentation is pretty weak at the moment. Will attempt to make steady progress here.

Nice to see basic styling for embedded content, but the iframe option isn't particularly useful for YouTube/Vimeo videos. You'd think they'd have figured a way to do this via their own embed method by now, but until they do I'd suggest adding a helper class:

.youtube {
  position: relative;
  padding-bottom: 56.25%;
  height: 0; overflow: hidden;
  max-width: 100%;
}
.youtube iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

Only tested on a couple of browsers, but works well without the need for js — source: http://embedresponsively.com

Consider creating a gulp folder to house the various tasks used in this project. Also, consider adding better error handling so that watch streams are not interuppted when errors occur.

Consider re-organizing the repo in a similar fashion to jQuery (a dist/ folder for build CSS & sourcemap files that does not get committed to the repo, but is available when downloaded with package managers).

Also, consider slimming down which files get sent to Bower (currently the entire repo gets sent).

So now using !important is not a bad thing. Bootstrap has 106 times and Foundation has 160 times

Hey Chris,

Do you have any .psd that would match the Cardinal grid system? It would be useful for mockups.

Totally bogus, but iOS 7/8 does not support ::selection styles. Including them actually crashes the browser in some instances. Remove!

There's a browser bug in safari with the grid system. Check out hazel.bigroomstudios.com in safari and firefox (older versions of chrome also seem to be effected).

I like susy grid and cardinal base too. Can i easily and successfully Cardinal's components with other Grid system or to get best use of Cardinal it suggested to use it with it's on grid system ?

Please see this thread:
gulp-community/gulp-less#140

.button-small {
    padding: @button-medium-padding;
    font-size: @button-medium-font-size;
}

should be

.button-small {
    padding: @button-small-padding;
    font-size: @button-small-font-size;
}

I guess

Hey Chris,

Cardinal 1.0 gave me double scroll bars.

I fixed that changing min-height: 100% to height: 100% at:

html,
body {
min-height: 100%;
overflow-x: hidden; /* 2 */
}

Can you duplicate this issue?

I really like the look of this framework, especially as (ignoring the IE8 issues) the font sizing is succinct and easy to manage. The one thing that at this point which might stop me from using the framework is the grid system is:

• A little verbose
• Not flexible enough

Granted we could add .one_seventh .one_eighth etc, but I'd much prefer to use the standard 12/16/24 column grid, of which Frameless is quite a good example (although a different way of working), or Kube's percentage style which is similar to Bootstrap, and really clear to understand.

With Less you could create this grid with a lot less code I expect, with the added benefit of being able to use pure CSS to use the grid (via mixins).

Although I agree with you on Bootstrap being way too heavy, their upcoming grid system is similar, more flexible, and easier to understand at-a-glance.

Perhaps utilising an existing grid, along with the rem gutters?

I'd like to style an arbitrary div to look like an input, but actually have two unstyled inputs within it. It'd be nice if you guys had a class that one could apply to style any element.

Also, would a PR for this feature be welcome?

As per some conversations on Twitter, I think it's time for a unified test.html page for the project. Opinions/ideas?

Hey Chris,

I think we don't need this code too.

/* Remove black outlines on <input> buttons in IE7. */
input[type="button"], 
input[type="reset"],
input[type="submit"] {
filter: chroma(color=#000000);
}

I've created this issue as a place to talk about LESS and SASS versions of Cardinal. I recently deleted the wip-0.4.0 branch of Cardinal because I wanted to re-work it, but in doing so GitHub declined and closed a previous issue and pull request on this very topic.

@muhas has already begun working on a LESS version, and @ericdfields has expressed interest in writing a SASS version.

If anyone else is interested in helping, please speak up here! Simply fork Cardinal and create your version.

Thanks all for your interest and help!

Hey Chris,

There are some pieces of code in Cardinal that are exclusive for IE6/7/8. IMHO they shouldn't exist, since they are redundant.

In my logic, the simple fact of using media queries already make Cardinal IE9+. And to ratify that, the whole framework is based on REM, another IE9+ feature :-)

Just my two cents.

Hello, great framework!
I've got an issue with using LESS. If I use the normal main.css all works fine, if I compile with LESS, the grid doesn't work properly, unless I set the @grid-gutter variable to zero.
Somehow, the grid elements render to wide ...
Thanx, Regards

If I wanted to make Cardinal IE8 Ready, do you think the following set up would work?

Media Query Support: Respond.js - https://github.com/scottjehl/Respond
Box-SIzing - Schepp Box SIzing Polyfil - https://github.com/Schepp/box-sizing-polyfil
REM Units - REM Unit Polyfill - https://github.com/chuckcarpenter/REM-unit-polyfill

And Moderizr of course for sniffing out IE8. Thoughts? What about about packaging these in so we can use IE8. I still consider IE8 as a browser that needs to work for a production project.

It was brought to my attention that Modernizr is not being loaded correctly on http://cardinalcss.com.

...soooo, fix that! 🤘

I don't like the current setup. Simplify!

New organization:

less/
│
└───base/
    │
    └───mixins/
│
└───components/
│
└───layout/
│
└───utilities/

Hi I was looking over a few css frameworks and noticed the same stuff being repeated:

/* Set box model to include the padding and the border. */
*, *:before, *:after {
    box-sizing: border-box;
}

/* Don't jump on x axis when y overflows due to insertion of scroll bar. */
html {
    overflow-y: scroll
}

/* NON-STANDARD: Make selected text more legible. */
::selection {
    text-shadow: none;
}

textarea {
    resize: vertical
}

/* Remove line-height gap at bottom of containers. */
audio, canvas, img, svg, video {
    vertical-align: middle;
}

I was planning on splitting it out, there probably is some more fixes that could go in it as well.

e.g.
when using the "small" element in a header the size difference should be relative
when using rem for this it's just don't fit,
that's my opinion - feel free to comment
never mind - old version

Currently font-sizes are defined early in the stylesheet : .text_medium { font-size: 1.333rem; }. After that, some class-specific font-sizes are defined, for example: .grid-item { ...; font-size: 1rem; }.

With the stylesheet ordered this way, adding a .text_medium class to the grid-item is ineffective : <div class="grid-item text_medium"> has text with a font-size set to 1rem instead of 1.333rem, like one would expect.

I suggest moving font-size declarations after all other specific font-sizes. I would have also name those classes font_..., because they are font-property modifiers.

Is there a plan to add navs, navbars and forms?

Now that we have a basic shell of documentation, it would be nice to include demo links, because "demo or it didn't happen". Create a Codepen collection for demos!

Hey Chris,

I'm flirting with the idea of media queriy splitting approach. I would like to know your thoughts about it.

http://simurai.com/post/30451824480/media-query-splitting

Cheers

Hey Chris,

I when I was using the grid on a page I noticed that the grid-item was messing with my design. Mostly because there was only one grid-item on that page. So, to fix that I came out with this code.

 /** 
  * Remove the bottom margin on the last element inside each `.grid_item` 
  * and if there is no siblings of the given type.
  */
 .grid-item > *:last-child,
 .grid-item:only-of-type {
    margin-bottom: 0;
 }

Just my two cents :-)

Hey Chris,

I think there is a typo on the grid gutter sizes:

.grid-gutter-half              { margin-left: -1rem; }
.grid-gutter-half .grid-item   { padding-left: 1rem; }
.grid-gutter-double            { margin-left: -4rem; }
.grid-gutter-double .grid-item { padding-left: 4rem; }

Don't you mean 2rem? Now if it is half or double, is up to you ;-)

Cheers,
Daniel

Including @Viewport styles to determine device width and zoom level does not seem to cooperate with Chrome's new "device mode" tool. I will remove this declaration until it is actually needed (basically, until the viewport <meta> tag is phased out).

Thanks @maxatbrs for pointing this out!

More info on that

Hi,

I searched in the issues if this question had already been asked and I couldn't find any answer. Why is there a specifically defined font-family for headings? Can't it simply be set to inherit?

I usually add the following to the normalize reset for better text rendering.

html, body {
-webkit-font-smoothing: antialiased;
}

I'm currently working on 2.0.0, which be a fairly large update from the current version 1.4.0. I'd like to delete a bunch of stuff that I have not really been using (some helper classes, in particular), simplify naming conventions (hyphens on all the things), remove the @media queries that resize your entire project (instead favoring a base font size of 16px across devices), using EMs instead of REMs for browser compatibility, and much more.

Anyone, pelase feel free to chime in with any ideas, feature requests, or complaints. Any feedback is greatly appreciated. Thanks!

This style rule is too opinionated, IMO.

Lol.

Remove it, and leave it up to the developer to add it in.

More Info

The issue #13 made me think about an old question that I once asked here http://math.stackexchange.com/questions/295407/which-number-has-the-highest-divisibility-factors

The current set up for the .wrapper class gives a 1026px wide element. Which has 16 factors.

.wrapper {
margin: 0 auto;
max-width: 1140px;
width: 90%;
}

What if you increase the max-width a bit:

.wrapper {
margin: 0 auto;
max-width: 1200px;
width: 90%;
}

That would give us a 1080px wide element, which has 32 factors. That way we have a higher flexibility to work more precisely with the grid.

If I'm nesting the grid with different gutter sizes, the children grid-items respect the first grid gutter, not their parent's (eg if gutter-double contains gutter-whole or gutter-none and if gutter-whole contains gutter-none).
Codepen example.

I'm not sure whether chaining (eg. .button.chunky) or block/element-specific modifiers (eg. .button_chunky) is a better, more scalable approach... thoughts, anyone?

First off all, great job on the framework. Out of all the ones I've looked at (alot!) I really like this. I am however dissapointed that it only supports 30% of all android users (http://developer.android.com/about/dashboards/index.html). That's a bit low for a mobile-first-framework. I'm assuming this is because of the font-size: 0 hack on the grid. Is this really necessary?

Hey,

I was having problem with google maps infowindows and I figure out that was the default img value. This fixed my problem. twbs/bootstrap#2410

Here is the place to share any links to Cardinal being used on production websites. If you know of any, or have made any yourself, please share them here!

Thanks!

😈 Chris

Is there any particular reason the body font is set to:
font-family: "Helvetica Neue", Arial, sans-serif;

and the heading stack to:
font-family: "Helvetica Neue", sans-serif;

(note the absence of Arial for headings)

Hi,

Is there an easy way to fix the header to the top of the page?

I tried inline style:

style="position:fixed; "

I tried giving the header an id and adding to the main CSS:

#header { position:fixed; }

I tried giving the header an id and adding extra style to the HTML:

<style>
#header {
    position:fixed;
}
</style>

None of these efforts worked! I note none of the wild sites have a fixed header - is it really difficult?

Kind Regards

Gavin

Hey Chris,

I ran into an issue just now and I would like your thoughts about it. My problem is that the padding-left attribute on grid-item. For example. If you are creating some pricing tables, padding will affect your grid-item. See the example below. I'm using this design http://www.mettaya.com/item/flat-pricing-table-turquoise/169

With padding:

With margin:

Shouldn't be the case to use margin instead padding? Or am I missing something here?

Thanks.

Hello Chris,

Nice work here. I just would like to share two snippets (I don't think they 'deserve' to be treated as a submit, since it's more like i'm sharing some thoughts here. Any case, please let me know if this is not the right place).

1. You could extend your word-wrap: break-word to more elements that usually have this kind of problem.

p,
div, 
textarea, 
table, 
td, 
th, 
code, 
pre, 
samp {
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
  -ms-hyphens:     auto;
  hyphens:         auto;
  word-wrap: break-word;
 }

2. I see myself constantly eliminating the top margin of my first elements on the content. So, this code is something that I always have around.

p:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
blockquote:first-child,
pre:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
margin-top: 0;
}

Cheers

Because of the recent implementation of LESS in the project to modularize the CSS, I'm unsure that there needs to be two versions of the main project styles in the CSS folder when the grunt build is run.

Right now the build process creates two CSS files that are non-minified and minified named cardinal.css and cardinal.min.css. This is in addition to the main.css file which has resided in the project CSS folder for awhile now. We could remove the main.css to have the build process generated the output from here on, but of course this is up for discussion. Thoughs?

Hello, I might be wrong - maybe it's because I work with grunt still - but the "+" selectors in objects/forms.less seem out of place to me?
line 9 .form-label + .form-input for example

line 1952 cardinal.css
.form-label + .form-input

is not a proper selector?
it doesn't work @ my end ...

I changed it to:
.form-label,
.form-input,
.form-select,
.form-textarea {
.to-rem(margin-top, @form-label-margin);
}

to make it work?

The inclusion of max-width based media queries seems to violate the concepts behind mobile-first css architecture. I'm curious as to how this architecture is considered to be mobile-first?

As i noticed, the license text is MIT, however, for including in other open source projects, lets say WordPress (gpl) the license must be named and officially known (you can have your homerolled version, but that would hold users back).

Anyway, Keep up the good work!