sitetent / tentcss Goto Github PK
View Code? Open in Web Editor NEW:herb: A CSS survival kit. Includes only the essentials to make camp.
Home Page: http://css.sitetent.com/
License: MIT License
:herb: A CSS survival kit. Includes only the essentials to make camp.
Home Page: http://css.sitetent.com/
License: MIT License
Hi,
I would like to use grid with this structure
+-----------+-----------+
+ + +
+-----------+ +
+ + +
+-----------+ +
+ + +
+-----------+-----------+
Is it possible soon to use vertical grid without neested multiple grid?
Thanks
some people are not free to use the internet so to learn this css framework with offline documentation is very helpful.
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 ?
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.
Need documentation on all grid usage
As reported, the source does not need to contain any prefixes as this should be compiled in the build step.
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.
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.
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.
<!doctype html><html><head><meta charset='utf-8' />
<link rel="stylesheet" href="tent.css" />
<style>
body{background:azure}
</style>
</head><body><div class="container" >
<div class="grid" style="background:#fff;margin-top:8px;" >
<div class="grid__column grid__column--8 ">main </div>
<div class="grid__column grid__column--4 " >aside </div>
</div>
<div class="grid" style="background:#fff;margin-top:8px;" >
<div class="grid__column grid__column--8 ">main </div>
<div class="grid__column grid__column--3 " style="margin-left:1em" >aside </div>
</div>
<div class="grid" style="background:#fff;margin-top:8px;" >
<div class="grid grid--justify-start">
<div class="grid__column grid__column--4 ">main </div>
</div>
<div class="grid grid--justify-end" >
<div class="grid__column grid__column--4 " >aside </div>
</div>
</div>
</div></body></html>
When a card receives a color variation the default border is not being removed or recolored:
border: 1px solid #e0e0e0;
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.
tentcss/src/04_elements/_lists.scss
Line 21 in b563e72
margin-bottom: map-get($spaces, xxxs);
Hi,
it's possible equal height for grid__columns and card?
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!
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! :)
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.
This package doesn't have a default file set. You can set it via jsdelivr
, browser
, or main
field in package.json
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.
tentcss/src/02_tools/_breakpoints.scss
Line 20 in bac3d00
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/
tentcss/src/02_tools/_scaling.scss
Lines 15 to 17 in bac3d00
$return: append($return, ($val / $root + rem));
} @else {
$return: append($return, ($val * $root + px));
tentcss/src/02_tools/_scaling.scss
Lines 29 to 31 in bac3d00
$return: append($return, ($val / $root + em));
} @else {
$return: append($return, ($val * $root + px));
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.
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!
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.