yegor256 / tacit Goto Github PK

Change the default selection of gender to "Won't Tell". It's sexist to have "male" be the default and expected option.

Bonus feminist points if you put Female above Male as the 2nd Option.
Bonus LGBTQRSTUV points if you include "Neither", "Both", and "Other" options.

body.height set to 100% make the page not properly aligned vertically when it's longer than the window.

Now the sample page breaks down in mobile widths (even though there's <meta name="viewport" content="width=device-width, initial-scale=1.0"/> tag which indicates that this CSS framework probably should, in the perfect world, be "mobile opitimized").

@yegor256 is this the direction you'd like the framework to be developed to? I can start working on the responsiveness if you think the ideology matches with this project.

Issues with the mobile sizes:

1. Form element widths

Some of the form elements overflow from main container:

P.S. input[name='consent'] is missing id='consent', so tapping the label does not select the input properly

2. Margins in mobile sizes

The margins are way too big in mobile sizes (escalating in 320px iphone width).

Compare this screenshot from the example page:

With a similar screenshot from popular Bootstrap framework:

You see that the amount of pixels in screen for the actual content is much bigger in the Bootstrap's version. I'd remove the grey area completely when in mobile sizes.

3. Table responsiveness

This is more complicated issue, but I'd like to point out that the example table actually would just fit to 320px width if the margins were smaller (see 2.)

The build should check the dates in all files and fail if some of them are expired.

I suggest having the Reset button be disabled to show styles of a disabled button.

Reasoning:
http://www.nngroup.com/articles/reset-and-cancel-buttons/
15 years later this is still true.

The HTML5 docs for pre and code state that when you want block code to not wrap to use <pre><code> foo </code></pre>.

However, tacit css (in my opinion) doesn't then format this as expected. If I use <pre><code>it's rendered just as pre and (seems to) ignore code but if I use <code><pre>it looks better with the darker background - although perhaps the margin is a bit large.

When converting from markdown (and possibly other formats - I've not tested) the conversion does <pre><code>.

Example.

When using tacit with bower it would be usefull to have tacit.min.css and tacit.css in a dist folder

Let's automate cross-browser testing, somehow. Probably one of these platforms can help:

• http://crossbrowsertesting.com/pricing
• https://www.browserstack.com/pricing

From http://yegor256.github.io/tacit/ :

By the way, it is compliant with W3C validator requirements: HTML and CSS.

Follow the W3C CSS validator link:

Let's add it

A few cool feature requests

• Whitelist certain HTML elements only or define a scope for adding styles. i.e. only nodes in a #tacit tag would be effected.
• Blacklist certain HTML elements so they can have custom styles
• have some format / repo for themes and some argument to switch theme

Here's what we have now:

I guess, it should be like that:

select {
    margin-bottom: 0;
}

I will send a PR in a few hours.

Hi,

I just came across your project and I find it a very good idea. The only problem is that you are violating the rules of GitHub. As per the github norms, we should directly include the CSS files to our project. But many still didn't obey.

To tackle this issue, GitHub served all the CSS files directly liked with header Content-Type: text/plain. So many modern browsers will understand it and will assume the CSS file to be a regular text file and thus, the whole page looks like a Ugly 1980's page.

So, a great person named Ryan Grove created a service called RawGit which serves all the content with proper Content-Type headers so that browsers behave well. And as a plus feature, the production URL in the RawGit gets routed through MaxCDN to make it blazing fast.

The main objective of this issue is to make you aware that you SHOULD NOT promote people to use this type of method. Instead there are many CDN providers which offer free CDN to open source project.

Check out :

• JSDelivr
• CDNJS
• RawGit
• GitCDN

Let's create it and see how it works

WIP - To be defined.

Awesome project! I really love the approach tacit solves styling.

Unfortunately I have a hard times reading paragraphs and regular text with the currently used font-weight. Maybe it's also just my screen, which is not rendering cutting edge High-Res. However I think, font should be accessible and therefore easy to read.

Using font-weight 400 instead of 300 on regular text really bumped up readability for me.

Whats your opinion?

Hi, how about a tool to convert CMS themes to tacit-like classless CSS frameworks? CMS e.g. WordPress themes are pretty standard so writing a converter should be quite easy. Furthermore, this would give users more choices and variety when choosing classless CSS frameworks.

While working on #60 I was forced to install some ruby gems.

A lot of webdevs do not use ruby. And it is a good practice in node community not to use it. All the dependencies are available as npm packages:

• you rely on sass gem, but is available for node: https://github.com/sass/node-sass
• you rely on scss_lint gem, but is available for node: https://github.com/sasstools/sass-lint

So, I can change the dependencies in the PR to be 100% node compatible.

The Android's old (pre-Chrome) stock browser does not restrict the <fieldset> tag to it's parent's boundaries:

For discussion see the StackOverflow thread discussing this bug in various browsers:

Unfortunately, in Android 4.1.2 Stock Browser and possibly other similarly old versions, this has no effect.

Checkbox not inline with label, plus, buttons are not inline as they're in other browsers.

Radio Buttons and labels positions is not properly set, and different from other browsers.

I am wondering is there is easyway I can make clean navbars,

something like

|title| nav1 | nav2 |

Couldnt find a stackoverflow page, so I am asking it here.

We don't have a radio button in our current layout, let's add it

WIP - To be defined.

Issues found with elements not being inline and position of the elements for Opera

After #67. Let's fix it.

Add a CONTRIBUTING.md file with contribution guidelines to tacit project.

Current: 2015
Proposal: 2015 - 2017

Issues found with elements not being inline and position of the elements for Safari

A GUI builder a la this

Isn't the background color for normal buttons too dark? They look like disabled rather than clickable at first look until you hover your mouse over it.

The test page's checkbox is small and is not centered on IE9:

Should be possible to use the latest .min.css

Top margin before headers is absent, but should be there.

WIP - To be defined.

font should not be applied to all (*). only for body

Link tacit to https://gitcop.com/

Issues found with elements not being inline and position of the elements for Edge

There don't currently seem to be any docs saying which browsers and versions are intended to be supported. Most CSS libraries mention this info; e.g. http://foundation.zurb.com/docs/compatibility.html
Browser support is an important consideration when choosing between CSS libraries.

Hey Yegor. Sorry spam your issue list.

Do you know if I can make sticky footer. Or footer thats at the bottom of the page.

right now the footer looks a bit weird, I think.

Let's add it and set to 100%