jamiewilson / corpus Goto Github PK

The site looks great in Chrome, but in Firefox and IE11, things look very jumbled. 🌀
If you can't seem to reproduce the problem, let me know and I can post some screenshots.

If you specify the border-radius property for all fields:

input,
select,
textarea,
fieldset {
  font-family: inherit;
  font-size: 1rem;
  border: none;
  border-radius: 0;        <--- this property
}

then in iOS, fields of type radio lose their appearance. A screenshot on iOS 9.2:

You have a few dependencies (e.g. body definition), that are impacted by the order in which sass files are compiled. Suggest that you offer an aggregate sass file that imports your general sass files to avoid these issues.

Suggest that you either commit to using variables.scss, or remove it. Other files have their own and it may conflict.

Sorry to publicly add this as an issue - I could not figure out how else to contact you.

On the website under "Sizing":
"Because flex items defualt"

defualt should be default.

Hello
Nice framework - what I was wondering though is whether you're planning to add some mixins so it could be used in a more semantic way to use existing classes.

As a convenience, these would be helpful:

//horizontal padding
.ph0 { padding-left: 0; padding-right:0}
.ph1 { padding-left: $padding; padding-right:$padding}
.ph2 { padding-left: $padding * 2; padding-right:$padding * 2}
etc...

//vertical padding
.pv0 { padding-top: 0; padding-bottom:0}
.pv1 { padding-top: $padding; padding-bottom:$padding}
.pv2 { padding-top: $padding * 2; padding-bottom: $padding * 2}
etc...

Hey,

corpus seems to be very nice. Thanks for uploading it to Github :)

I think people could use it more easily if you would create folders like src/lib and build/dist.
So for example src for all the .scss files and a dist folder for a compiled and bundled .css file and a bundled .scss file.

Regards,

Moritz

https://validator.w3.org/nu/?doc=http%3A%2F%2Fcorpuscss.com%2F
there's a stray closing span tag on line 148. it's making the site break in Firefox.

Hey Jamie -- I've needed a class that creates a responsive grid without column/row specifications. Consider adding the following class to closure. I've provided some sample breakpoints:

.griddle {
    margin:0px;
    width:100%;
    padding:0px;
    list-style-type:none;

    > li {
        float:left;
        width:100%;
        padding:0px;
        margin:0px 0px 1rem 0px;
    }

    @media all and (min-width: 800px) and (max-width: 1279px) {
        li {
            width:50%;
            &:nth-of-type(2n+1) {padding-right:1%; }
            &:nth-of-type(2n+2) {padding-left:1%; }
        }
    }

    @media all and (min-width: 1280px) and (max-width: 1599px)  {
        li {
            width:33.33%;
            &:nth-of-type(3n+1) {padding-right:1%; }
            &:nth-of-type(3n+2) {padding:0 .5%; }
            &:nth-of-type(3n+3) {padding-left:1%; }
        }
    }

    @media all and (min-width: 1600px) {
        li {
            width:25%;
            &:nth-of-type(4n+1) {padding-right:.75%; }
            &:nth-of-type(4n+2) {padding:0 .75%; }
            &:nth-of-type(4n+3) {padding:0 .75%; }
            &:nth-of-type(4n+4) {padding-left:.75%; }
        }
    }
}

This is exactly what I am trying to do for my projects but better and well organized.

What do you think about adding classes for sizing text such as ".small-text, lg-text, etc". I was thinking that now we only have h1-h6 that is preferable used with heading but not ordinary texts. There are cases we want to use texts with 75% smaller size or 125% larger either for hints or attracting attention.

Suggest adding the following margin types (maybe padding too) for whitespace symmetry:

mt-min {margin-top: $margin/2}
mr-min {margin-right: $margin/2}
mb-min {margin-bottom: $margin/2}
ml-min {margin-left: $margin/2}