Quite a bit of the framework uses map-get(). While this is a standard Sass function it wouldn't hurt to explain some of it's usage within the context of the framework.

Tent CSS is designed to be unsemantic by nature. The framework is more or less made up by chaining together classes to create components. While this is fine for most developers some may wish to use the objects and components with their own class names instead.

To do this much of the flex and grid objects will have to be rewrote to employ mixins. From a CSS distribution point of view this should have no real effect. This will only effect developers that wish to roll their own CSS output using the SCSS source files.

At first, thank you and congrats for this awesome little project.

I was looking for a variable in 01_settings/_variables.defaults.scss allowing me to reduce the transition time of the changes when hovering a button or a link, for instance... But to no avail.

It would be great to have such a variable in the settings, because I found that 1s is a bit too much.

Thanks in advance! :)

Hi,
it's possible equal height for grid__columns and card?

As reported, the source does not need to contain any prefixes as this should be compiled in the build step.

Currently rem and em functions are returning a string, because the unit is incorrectly appended.
See: https://css-tricks.com/snippets/sass/correctly-adding-unit-number/

 	$return: append($return, ($val / $root + rem)); 
 } @else { 
 	$return: append($return, ($val * $root + px)); 

 	$return: append($return, ($val / $root + em)); 
 } @else { 
 	$return: append($return, ($val * $root + px)); 

As reported, some fonts are not displaying normally on smaller viewports. The framework relies on system fonts this needs to be verified on multiple viewports and browsers and normalized for the default fonts.

Currently the list object has a modifier entitled .list--nulled while there are standalone utilities entitled .padding-null and .margin-null. This was a slight oversight during the initial development and release of the framework. My plan is to phase out .padding-null and .margin-null and replace them with .padding-nulled and .margin-nulled. The past-tense "nulled" seems more appropriate as these are classes in which an action has been taken place.

I'll leave this one open for a while for feedback, otherwise will be moving forward with having this is as a core highlight of v1.4.0.

The docs "Elements" section could use some examples of the elements and how they look with the framework. Right now it is just a list of modified elements.

Currently, when we use a dark background and the .inverse class on an element, it makes the text lighter, to be more visible. That's great.
However, if there is a link in this text, its color left unchanged, both normal and hovered. This results in a darker link when hovering it, making it less bright, and less visible. Same happens with buttons.

I think it would be worth a thing to inverse hover colors as well as normal ones, when using .inverse class. I mean, make the links and buttons brighter when hovering them, instead of darker like currently.

Thanks!

This package doesn't have a default file set. You can set it via jsdelivr, browser, or main field in package.json

Need documentation on all grid usage

Currently the distribution file, tent.min.css weighs in at 3.7kb gzipped. I am fine with the file growing in size as long as it stays under 5kb gzipped and the inclusions make sense for the overall goals of the framework. The framework will not grow much in size to allow for "pretty" components anyways. So I believe it is advantageous to include many more responsive and visibility classes based around the common breakpoints.

So far I am thinking of general show and hide classes based around the media query breakpoints we currently have defined. These classes could be applied to any element that you'd like to have act different on a certain breakpoint or set of breakpoints.

We already have responsive utilities for flex ordering, so we're set there. What may need to happen is improved documentation that .flex-first--#BP can be used in combination with the grid rather than created repeated classes such as .grid-first--#BP

Any other responsive utility classes feedback is welcome!

In some files we have some repetitive space classes like in the _margin.scss :

    &-xxxs { margin: rem($space-xxxs); }
    &-xxs { margin: rem($space-xxs); }
    &-xs { margin: rem($space-xs); }
    &-sm { margin: rem($space-sm); }
    &-md { margin: rem($space-md); }
    &-lg { margin: rem($space-lg); }
    &-xl { margin: rem($space-xl); }
    &-xxl { margin: rem($space-xxl); }
    &-xxxl { margin: rem($space-xxxl); }

I want to add some loops to avoid it and make the code more maintainable, it will look like this :

_variables-defaults.scss

$spaces: (
  xxxs: $space-xxxs,
  xxs: $space-xxs,
  xs: $space-xs,
  sm: $space-sm,
  md: $space-md,
  lg: $space-lg,
  xl: $space-xl,
  xxl: $space-xxl,
  xxxl: $space-xxxl
);

_margin.scss

@each $space, $margin in $spaces {
    &-#{$space} {
        margin: rem($margin);
    }
}

What do you think about it ?

After recently upgrading to gulp-sass 3.2.1 which uses node-sass 4.8.3, the math to subtract 1px no longer works leaving me things like:

max-width(48em - 0.0625em) in the processed CSS which does not work in the browser.

As a workaround I had to remove the px to em conversion for that 1px and for each breakpoint size.
Could be related to #28, but I tried some of the suggested methods and it still wasn't working.

A new object is in the works for v1.5.x surrounding the idea of levels and shelves. Basically the object is for a grouping of items that will sit flush on a horizontal level together. I am proposing this object be referred to as shelves, singular as a .shelf.

The shelf object would extend the current flex object for the best display possibilities. The grid object would best be used inside shelf because of the current breakpoint classes. This would also help reduce any potential bloat or unneeded redundancies.

The object would be as design-free as possible and only contain properties necessary to develop the core layout.

Basic Examples:

[Logo]        X | X | X | X
----------------------------

[Logo]  X     X | X | X | X
----------------------------

    X | X  [Logo]  X | X
----------------------------

  [Logo] | [Logo] | [Logo]
----------------------------

Theoretically this can be done right now with Tent CSS v1.3.2. Only a little leg work would be necessary. However I imagine for many, having a dedicated object with predefined layout objects would help reduce development time.

This is an oversight that just needs to be removed from the next build. Currently all list items have a bottom margin. If anything they just need natural line spacing going forward.

 margin-bottom: map-get($spaces, xxxs);

Hi,

I would like to use grid with this structure

+-----------+-----------+
+           +           +
+-----------+           +
+           +           +
+-----------+           +
+           +           +
+-----------+-----------+

Is it possible soon to use vertical grid without neested multiple grid?

Thanks

When a card receives a color variation the default border is not being removed or recolored:

border: 1px solid #e0e0e0;

some people are not free to use the internet so to learn this css framework with offline documentation is very helpful.