Flat-UI
Flat UI Free - Design Framework (html/css3/less/js). Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the development of websites.
Flat UI Free - Framework and Bootstrap Theme Design - Designmodo flat ui kit free is made on the basis of twitter bootstrap themes in a stunning flat design style, framework also includes a psd and html version.
I've tried everything to make typeahead styling work, but did not succeed so far.
I'm writing a django app with:
-django1.7
-bootstrap3
-flatui
-typeahead
I'm getting to work my hints displayed under search field, however the styling is transparent, so looks ugly. no matter what custom css i use to override twitter typeahead styling, nothing changes.
Here's how it looks like : http://imgur.com/A4JjgyX
I'd like to have some control over how the hintbox looks like, but everything's been failing so far :(
Thanks :)
Source: (StackOverflow)
I'm pretty new to the use of .less files. I downloaded a FLAT UI bootstrap. Now I wanted to change the base color of the bootstrap and therefor I used the variables.less file. There I changed the brand-primary to an other colorscheme.
Now I read everywhere I need to compile this file. But to where do I need to compile this because there is no variables.css file available only there is a bootstrap.css file and flat-ui.css file. I'm I seeing something wrong here?
It's about this bootstrap: http://designmodo.github.io/Flat-UI
Source: (StackOverflow)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Create League</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Loading Bootstrap -->
<link rel='nofollow' href="../dist/css/vendor/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI Pro -->
<link rel='nofollow' href="../dist/css/flat-ui-pro.css" rel="stylesheet">
<link rel="shortcut icon" rel='nofollow' href="img/favicon.ico">
<script type='text/javascript'>
function addFields(){
var number = document.getElementById("member").value;
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
container.appendChild(document.createTextNode("Team " + (i+1) +" Name"));
var input = document.createElement("input");
var newIn = '<input class="col-md-6"';
input.type = "text";
input.name = "member" + i;
input.class="form-control";
input.placeholder="Please enter the team name";
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
}
</script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.js"></script>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" align="left" rel='nofollow' href="#topContainer">
<img style="max-width:100px;margin-top:-7px;"
src="img/logo.png" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a rel='nofollow' href="">Home</a></li>
<li><a rel='nofollow' href="#CMContainer">Recent Matches</a></li>
</ul>
</div>
</div>
</div>
<div class="container contentContainer">
<div class="row">
<div class="col-md-6">
<br>
<br>
<h4>Please enter the fields below</h3>
<div class="form-group">
<label for="noofteams">Number of Teams</label>
<input type="text" class="form-control" id="member" name="member" value=""placeholder="Enter number of teams"><br />
<a rel='nofollow' href="#" id="filldetails" class="btn btn-default" onclick="addFields()">OK</a>
<div id="container"/>
</div>
</div>
</div>
</div>
I am trying to update the second form field dynamically from the first given input .I am using flatUI and bootstrap css files. but i am not able to change the generated text field type like that of bootstrap or flat UI , Its showing up a basic text field !! Kindly someone help me to resolve this issue. thank you
<!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
<script src="../dist/js/vendor/jquery.min.js"></script>
<script src="../dist/js/vendor/video.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../dist/js/flat-ui-pro.js">
<script>
$(".contentContainer").css("min-height", $(window).height());
</script>
</body>
</html>
Source: (StackOverflow)
I'm using the flatui kit found here https://github.com/Grouper/FlatUIKit as an add-on for ios development in xcode. When I make a text field, it fails to properly set the border as a uicolor. I'm using what's showed in the tutorial on the github page, but it doesn't seem to work. My code for setting the properties is as follows:
_NameField.font = [UIFont flatFontOfSize:16];
_NameField.backgroundColor = [UIColor clearColor];
_NameField.edgeInsets = UIEdgeInsetsMake(4.0f, 15.0f, 4.0f, 15.0f);
_NameField.textFieldColor = [UIColor whiteColor];
_NameField.borderColor = [UIColor turquoiseColor];
_NameField.borderWidth = 20;
_NameField.cornerRadius = 3.0f;
I have set the text field as an outlet named _NameField, changed the outlet type to an FUITextField, and set the class on the storyboard as an FUITextField. Thanks for the help!
Also, I searched the example included with the github download and it does not implement the FUITextField element.
Source: (StackOverflow)
I'm using Flat UI which is based on Bootstrap. It includes a dropdown replaced based on bootstrap-select.
Whenever I use it, my list always has the first element selected. I've tried using the bootstrap-select command deselectAll to prevent this but it isn't working.
How do I prevent this from happening?
Source: (StackOverflow)
I have this problem since I upgraded flat ui. The reason I did this is because I needed to use an angular directive (ui-select) and this required latest angularjs, which in turns required an updated version of bootstrap as well. At the end I ended up updating angular,bootstrap and flat ui.
However, since this update, checkboxes are not being shown properly and the interface looks bigger,like it's zoomed in.
Has anyone else had this problem? any solution?
Thank you
Source: (StackOverflow)
I have downloaded flat-ui from official website. Then I copy pased dist folder in root directory of the application.
I have created basic meteor app using meteor create app_name
I am trying to implement the login form given on demo page of flat-ui.
http://designmodo.github.io/Flat-UI/
Login page is at the end of the page.
As far as know meteor can iterate through all the folder in the root directory and add css files.(correct me if I am wrong). Also I get error like
W20150210-01:58:23.516(5.5)? (STDERR)
W20150210-01:58:23.519(5.5)? (STDERR) /home/ajinkya/.meteor/packages/meteor-tool/.1.0.38.ieqxkv++os.linux.x86_64+web.browser+web.cordova/meteor-tool-os.linux.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:173
W20150210-01:58:23.519(5.5)? (STDERR) throw(ex);
W20150210-01:58:23.520(5.5)? (STDERR) ^
W20150210-01:58:23.520(5.5)? (STDERR) ReferenceError: document is not defined
W20150210-01:58:23.521(5.5)? (STDERR) at app/dist/js/vendor/html5shiv.js:322:9
W20150210-01:58:23.521(5.5)? (STDERR) at app/dist/js/vendor/html5shiv.js:324:3
W20150210-01:58:23.521(5.5)? (STDERR) at /home/ajinkya/projects/umang/.meteor/local/build/programs/server/boot.js:175:10
W20150210-01:58:23.522(5.5)? (STDERR) at Array.forEach (native)
W20150210-01:58:23.522(5.5)? (STDERR) at Function._.each._.forEach (/home/ajinkya/.meteor/packages/meteor-tool/.1.0.38.ieqxkv++os.linux.x86_64+web.browser+web.cordova/meteor-tool-os.linux.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
W20150210-01:58:23.522(5.5)? (STDERR) at /home/ajinkya/projects/umang/.meteor/local/build/programs/server/boot.js:86:5
=> Exited with code: 8
So I tried removing js folder. After that error went but when I tried that login form example there was no icons in input box.
Please help me with this. I think its maybe folder structure that is causing the issue.
Source: (StackOverflow)
This question already has an answer here:
How can I use JavaScript (or JQuery) to achieve the affect detailed here? I wish to do it in JS because the CSS seems long and inefficient.
Source: (StackOverflow)
I'm trying to include the flat-ui theme for bootstrap in Meteor. I have added the mrt:bootstrap-3 and less packages. Then I have copied the folders fonts, img, js and less from the flat-ui project inside lib/Flay-UI-2.2.2/ in my project directory. However I have the following compiling error:
While building the application:
lib/Flat-UI-2.2.2/less/modules/button-groups.less:12:35: Less compiler
error: variable @brand-primary is undefined
lib/Flat-UI-2.2.2/less/modules/buttons.less:10:14: Less compiler error:
variable @btn-font-size-base is undefined
...
It looks like it is not compiling in the right order, how can I solve this issue? I have also tried to rename flat-ui.less with flat-ui.import.less without any success.
Update 1
Following the indication of @user3435693 I was able to compile. However I still have some troubles. I'm not able to use the checkbox and switches. For example, I see switches like this
instead of this
Plus I'm not able to see the glyphicons. Any suggestion?
Source: (StackOverflow)
Does anybody know how to use this flat ui for android ?
GITHUB-LINK
There are no proper docs plus no tutorials also , I want to create the flat buttons also apply themes cant find anything .
Source: (StackOverflow)
FUIAlertView does not work in swift project, although other FlatUIKit functions work normally.
When I code this...
alertView = FUIAlertView(title: "a", message: "a", delegate: self, cancelButtonTitle: "a")
I got this runtime error..
2015-03-01 18:32:48.852 Oracle[21705:2263344] -[FUIAlertView initWithTitle:message:delegate:cancelButtonTitle:]: unrecognized selector sent to instance 0x7fc685a41b60
2015-03-01 18:32:48.902 Oracle[21705:2263344] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[FUIAlertView initWithTitle:message:delegate:cancelButtonTitle:]: unrecognized selector sent to instance 0x7fc685a41b60'
I checked FUIAlertView.m. Surprisingly, the arguments are different from I coded as XCode' code completion.
- (id)initWithTitle:(NSString *)title
message:(NSString *)message
delegate:(id<FUIAlertViewDelegate>)delegate
cancelButtonTitle:(NSString *)cancelButtonTitle
otherButtonTitles:(NSString *)otherButtonTitles, ... NS_REQUIRES_NIL_TERMINATION;
Then, I tried to add an parameter.
alertView = FUIAlertView(title: "a", message: "a", delegate: self, cancelButtonTitle: "a", otherButtonTitles: "a")
But got this build error.
Extra argument 'otherButtonTitles' in call
Does anyone know how to fix it? Thanks,
Source: (StackOverflow)
I use Express 4.12.3 + JADE + flat-ui npm module (https://www.npmjs.com/package/flat-ui)
How is it possible use this module in jade?
When i run page, i get many 404 codes.
I fix it with:
app.get('/e-css/flat/bootstrap.css',function(req,res) {
res.sendFile(path.join(__dirname,'node_modules','flat-ui','bootstrap','css','bootstrap.css'));
});
In Jade:
link(rel='stylesheet', rel='nofollow' href='/e-css/flat/bootstrap.css')
I have in code many links like this.
Can be there more elegant solution?
Thank you.
Source: (StackOverflow)
I'm making a website using the Bootstrap FlatUI Framework and I found something weird happening. When I use <br> tags after the nav bar it makes this weird white box.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CS:GO - Premium Betting</title>
<meta name="description" content="Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version."/>
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
<!-- Loading Bootstrap -->
<link rel='nofollow' href="dist/css/vendor/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link rel='nofollow' href="dist/css/flat-ui.min.css" rel="stylesheet">
<link rel='nofollow' href="docs/assets/css/demo.css" rel="stylesheet">
<link rel="shortcut icon" rel='nofollow' href="img/favicon.ico">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="dist/js/vendor/html5shiv.js"></script>
<script src="dist/js/vendor/respond.min.js"></script>
<![endif]-->
<style>
html {
background-color: #485B6E;
}
.logo {
width: 300px;
}
.navbar {
height: 90px;
}
.navbar-nav {
margin-top: 35px;
}
.place {
height: 32px;
background-color: #ecf0f1;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-tasks"></span>
</button>
<a class="navbar-brand" rel='nofollow' href="#"><img class="logo" src="img/home/main_logo_complete.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="a{text-transform: uppercase;}">
<li><a rel='nofollow' href="#">HOW TO PLAY</a></li>
<li><a rel='nofollow' href="#">SUPPORT</a></li>
<li><a rel='nofollow' href="#"><img src="img/icons/sits_small.png"></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
<br><br>
<div class="place"></div>
<br><br>
<div class="container">
<p>Hello</p>
</div>
<script src="dist/js/vendor/jquery.min.js"></script>
<script src="dist/js/flat-ui.min.js"></script>
<script src="docs/assets/js/application.js"></script>
</body>
</html>
Image:
Source: (StackOverflow)
I can not add Flat UI Pro to rails4.2
i usedreflection/designmodo-flatuipro-rails
but i can not
STEP1
・Flat-UI-HTML-Developers-License.zip download on Desktop
・changed folder name to flat-ui-pro
・Locate the bower.json file that unzipped with the kit, and run the following from the same directory: bower install
- cd
- cd Desktop
- cd flat-ui-pro
- cd HTML
- cd UI
- cd Flat-UI-Pro-1.3.2
- bower install
STEP2
gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'jquery-ui-rails'
gem 'designmodo-flatuipro-rails', '~> 1.3.2.0.branch'
gem 'therubyracer', platforms: :ruby
bundle update
and
bundle install
STEP3
bin/rails generate flatuipro:install ~/Desktop/flat-ui-pro
rake assets:clean RAILS_ENV=development
rake assets:precompile RAILS_ENV=development
STEP4
rails generate flatuipro:demo
STEP5
scaffolds.scss delete
but...collapse layout
flatuipro_demo/index
correctly layout
Example Post scaffold
select box
collapse layout
correctly layout
Source: (StackOverflow)