kumailht / flakes

Flakes is an Admin Template Framework. A combination of CSS Libraries, JavaScript Libraries and Design files that help you build business tools very quickly.

• 👋 Hi, I’m @kumailht on Twitter, Github & LinkedIn
• 🍿 Visit my website: www.kumailht.com
• 📫 How to reach me [email protected]

flakes's Issues

Could you add LICENSE file?

First of all, thanks for sharing a nice framework!

Could you add LICENSE file?
The following page may help for choosing a license.
Choosing an OSS license doesn’t need to be scary - ChooseALicense.com

Thanks!

Empty space on the right

Hi
Is there a clean way to get flakes span over 100% width of the browser? I have 1920 screen and have an empty space on the right

AJAX!

Why don't you load the right panel with AJAX
$( "#result" ).load( "ajax/test.html" );
http://api.jquery.com/load/

flakes gridforms demo product description does not handle verticle scaling on firefox nightly

1. go to http://kumailht.com/gridforms/
2. type d d d into product description.
3. see scroll bar.
4. expand field vertically with lower right toggle. see form respond by moving SKU's row down.
5. do the same on http://getflakes.com/preview/grid-forms.html and form does not respond. d's are overlayed on top of SKU

Content does not grow tall enough to hide nav options if nav options are added via javascript

How to reproduce:

1. Add 50 li nav items in the HTML of the ul that is child of div.flakes-navigation
2. Open in either Firefox or Chromium and shrink the page so the left-hand side is automatically hidden.

At this point all of the elements should be hidden. Great.

3. Besides the previous 50 elements, create a javascript that runs after the page is loaded. In my case, I'm using AngularJS.
4. Create 50 more li elements in your javascript code and append to the said ul
5. Shrink the page again.

Now, if you scroll down enough some elements aren't hidden, because the div.flakes-content hasn't grown enough to hide them all: it is as tall as the ul containing the nav links.

if I include the heights of one li element (probably the title), the p.foot, a.logo elements and the top padding of the div.flakes-navigation, the resulting height is exactly is how tall the content needs to be.

However, I don't actually need that functionality to hide the menu when the screen is narrow. Is there any way to disable that?

Spans on multiple lines in Firefox

If you have a gutter with your grid in Firefox, your spans will be on multiple lines. As seen on the Flakes Preview Page.

I fixed the problem on my project by adding the following css:
div {
-moz-box-sizing:border-box;
}

I only dabble in programming so I'm not sure the best way to contribute the change to the project. But I figured I'd pass along the fix I found.

Documentation error

Hi @kumailht,

There might be a documentation error in the Read Only Information section.
You have an example with a 'read-only-information' class:

`

Product Specs

`

I think the correct class is 'flakes-information-box'.

Any solutions to viewing the full table on mobile browsers?

Right now we can't view the full table on mobile browsers.
Actually the table gets cut off since we cannot scroll left to view the remaining table content.

Any ideas/solutions to this?

NPM

Would you accept a pull request to make this an npm package?

Classes for use in form validation

I think it would be useful to have some clean CSS classes that can be used in form validation. Style changes like text color, background color...

It is easy to put this in custom CSS, but I think it should be in the basic framework itself. Like bootstraps has-error, has-warning and so on.

Layout broken between 1151-1166px window width

How to reproduce:

1. Go to http://getflakes.com/preview/index.html
2. Resize window between 1151px and 1166px (body 1135-1149px)

Git hook doesn't work

$ flake8 --version
2.4.0 (pep8: 1.5.7, naming: 0.2.2, pyflakes: 0.8.1, flake8-print: 1.5.0, mccabe: 0.3) CPython 2.7.8 on Linux
$ flake8 --install-hook
$ flake8 
./tags/views.py:18:61: E226 missing whitespace around arithmetic operator
$ git commit -m 'Go on'
[master 2eda873] Go on
 1 file changed, 9 insertions(+), 6 deletions(-)

So it let the commit despite the error. This is my cat .git/hooks/pre-commit:

#!/usr/bin/env python
import sys
from flake8.hooks import git_hook, get_git_param

# `get_git_param` will retrieve configuration from your local git config and
# then fall back to using the environment variables that the hook has always
# supported.
# For example, to set the complexity, you'll need to do:
#   git config flake8.complexity 10
COMPLEXITY = get_git_param('FLAKE8_COMPLEXITY', 10)
STRICT = get_git_param('FLAKE8_STRICT', False)
IGNORE = get_git_param('FLAKE8_IGNORE')
LAZY = get_git_param('FLAKE8_LAZY', False)

if __name__ == '__main__':
    sys.exit(git_hook(
        complexity=COMPLEXITY,
        strict=STRICT,
        ignore=IGNORE,
        lazy=LAZY,
        ))

Grid Forms - Product Description - Broken when resized

screenshot: http://take.ms/ZYPy4

But, if you resize the whole window, then it updates and things look ok:

screenshot: http://take.ms/trgBl

Sideways scrolling doesn't work on Android 5.0

Go to http://getflakes.com/preview/browsing-data.html, with the device in portrait mode. Notice that the right hand side of the table is not visible, and scrolling does not work. However, it does work if you open the menu, scroll by touching the menu, then scroll the rest of the page directly to close the menu.

Tested on Chrome

utils.js is empty

Just pointing this out.

Bower compatibility

The name in bower.json should comply to the spec. I would suggest flakes for easy install.

That takes me to the other point: please register this name in Bower registry soon (guide). As I am not the owner I decided not to register it instead of you.

Modal CSS

please recommend a modal window CSS that fits with the Flakes theme. Should I add shadows and rounded corners? Thanks.

Bower : ENOGIT git is not installed or not in the PATH error.

Sorry to open a new issue. But this is not exactly an issue.

I have downloaded the package and installed bower.
Now, i am trying to install the dependencies using command : Bower install bower.json
I am getting Bower : ENOGIT git is not installed or not in the PATH error.

Is that necessary to install GIt before using it. ?? What if i dont want to install git
Or i am using the wrong way to install dependencies.
Can anyone please write down the steps to do it. ?

404 on example page

Because Prism isn't contained in the project's Bower config, the reference to prism.css in example.html causes a 404.

The "Live Demo" page uses Prism for syntax highlighting, but the example page doesn't. I've submitted two pull requests for you to decide whether Prism should be included in the Bower config (#18), or if the reference to Prism should be removed from example.html (#17).

Frame & Navigation

Hi there,
I'm sorry about my probably silly question...

On the navigation example you have a menu with 'li' list link items in a 'div' .view-wrap to the main content, right? My question is: How to hide the content not selected? Is there some specific id or class to use in each content tab to interact with some jquery and show just the selected content and hide others?

Thanks!

Height Issue if content larger than "device" height

Hi @kumailht

I think there is an issue with the calculated height if the content is taller than the window or device (etc IPAD) if you have a background color in the page.

Do you think a solution might be a recalculation on resize (when the user stops resizing of course)?

Add X-UA-Compatible IE=edge Meta Tag for Intranet Sites

Many organizations have a group policy that forces IE into compatibility mode for all Intranet sites. Adding the tag <meta http-equiv="X-UA-Compatible" content="IE=edge" /> will ensure that jquery works and that the site loads properly.

Consider adding this tag to the documentation and/or the example html file.

Which prism?

I see example.html uses bower_component/prism/themes/prism.css, but it's not in bower.json.
I tried:
bower i prism, didn't work, then tried
bower i prismjs, works, but it installs to prismjs/ instead of prism/, which is different from example.html.

Flakes-Content Mobile Issue

When minimizing the browser, as Flakes is naturally responsive, clicking on the "hamburger" menu icon and then maximizing or restoring the screen afterwards creates a gap, forcing the content to be pushed over. This looks like a bug.

Viewing on a mobile phone works as it should, but viewing on a browser, and minimizing the browser is when the bug occurs.

Hopeful for a possible fix!

Release version is wrong and causes bower install error

bower not-cached git://github.com/kumailht/flakes.git#0.0.1
bower resolve git://github.com/kumailht/flakes.git#0.0.1
bower not-cached git://github.com/kumailht/flakes.git#*
bower resolve git://github.com/kumailht/flakes.git#*
bower download https://github.com/kumailht/flakes/archive/1.0.0.tar.gz
bower extract flakes#* archive.tar.gz
bower mismatch Version declared in the json (0.0.1) is different than the resolved one (1.0.0)
bower resolved git://github.com/kumailht/flakes.git#1.0.0
bower ENORESTARGET No tag found that was able to satisfy 0.0.1

Additional error details:
Available versions: 1.0.0

The release right now is 1.0.0 but the bower.json is still 0.0.1.

C3.js instead of Morris

Morris' donut charts are not useful because you have to hover your mouse over each slice to see the data.
Most business use cases are pie charts (like it or not) and we want the percentage / value displayed immediately with no user interaction required.
Therefore I recommend using C3.js instead of Morris for the charts.
http://c3js.org/samples/chart_pie.html

How did you get 1500+ GitHub stars?

Congratulations on Flakes - it looks clean, simple and nice; and it's lighter than Bootstrap. I like the clear positioning for internal apps, and on the light end of the spectrum, vs. UI component libraries like Webix, ExtJS or Kendo.

But having in mind that Flakes is only three months old and has only ~20 commits, how did you manage to get 1500 GitHub stars?

Webix by comparison, while also on GitHub, has under 20 stars, despite offering a far wider array of UI widgets, and having launched in July 2013.

Set GitHub repo URL to http://getflakes.com

Example:

Horizontal scrollbar / menu toggle bad behaviour

How to reproduce:

1. Go to http://getflakes.com/preview/index.html
2. resize the window until the menu collapse
3. Click on the navbar toggle
4. expand the window

Tested on both firefox 33 / chrome 39 windows 7 x64

Is Flakes still being maintained?

Hello Kumail,

I want to try Flakes for the first time and I was wondering if you 're still maintaining Flakes or is this project 'dead'?
I just want to know its future.

Thank you in advance. :)

Button demo text overflows

The "Click me, maybe?" button.

Thoughts on converting to SCSS?

SCSS, or Sassy CSS, is «the new main syntax» for Sass. Both Sass and SCSS are basically the same, with the main difference being that SCSS is written like ordinary CSS with semicolons and brackets. Any valid CSS is also valid SCSS, which makes it easy to integrate existing CSS code or use tools built for CSS, e.g. highlighting and plugins.

There are pros and cons for both syntaxes, so I’m interested in hearing why you (@kumailht) decided to use Sass in the first place, and if you would be willing (with help) to convert to SCSS?