Dealman Posted October 5, 2015 Share Posted October 5, 2015 (edited) Since the addition of the CEF Browser in MTA 1.5, I've been using it quite a bit. And I've recently begun looking into creating various interfaces using this instead of the traditional CEGUI or DirectX functions. And since my HTML and CSS knowledge is rather limited at the moment - I looked into the possibility of adding a UI Framework. I'm glad to report that it's a very easy thing to do. And you can access this framework's features from a separate resource. Download: MTA Community Download (V1.0.0) Installation: Just "install" it like any other resource. It comes pre-packages as a .zip file for compression so all you have to do is place it inside the resources folder, refresh and start it. That's all you have to do! How To Use: In order to use this from an external resource, you'll have to provide MTA with the proper location of the CSS and JS files. A very simple example would look like this; <html> <head> <link rel="stylesheet" href="http://mta/UIKit/css/uikit.gradient.css"/> <script src="http://mta/UIKit/js/jquery.js"></script> <script src="http://mta/UIKit/js/uikit.js"></script> </head> <body> <div class="uk-panel uk-panel-box uk-text-center"> <h1>Hello MTA Community!</h2> <p>This is just a little example. You can now create local webpages for use within MTA using the wonderful UIKit Framework!</p> <button class="uk-button uk-button-danger uk-button-large" type="button">Cancel</button> <button class="uk-button uk-button-success uk-button-large" type="button">Accept</button> </div> </body> </html> And it would look something like this; Example Screenshot(1920x1080) Available Stylesheets: uikit.almost-flat.css uikit.almost-flat.min.css uikit.gradient.css uikit.gradient.min.css uikit.css uikit.min.css For further information on how to use this, I suggest you visit their website! UIKit Homepage Edited October 11, 2015 by Guest Link to comment
alberto2345 Posted October 5, 2015 Share Posted October 5, 2015 Just tried it out and is pretty cool! Gave me an excuse to figure out how to use the new CEF system lol. When I took a look at your screenshot as well as looking at the uikit website, it reminds me alot of bootstrap in terms of the design. Do you know of any major differences between the two? I myself haven't really looked deep into either so I'm not sure. I also found that when I am loading the script, this error comes up: [bROWSER] Console: Uncaught SyntaxError: Unexpected identifier (http://mta/uikit/js/uikit.js) Any ideas what this means? I haven't used it too much, so I'm not sure if any features aren't working because of this, I just noticed it every time I restart my resource using your uikit resource. Link to comment
Dealman Posted October 5, 2015 Author Share Posted October 5, 2015 Just tried it out and is pretty cool! Gave me an excuse to figure out how to use the new CEF system lol.When I took a look at your screenshot as well as looking at the uikit website, it reminds me alot of bootstrap in terms of the design. Do you know of any major differences between the two? I myself haven't really looked deep into either so I'm not sure. I also found that when I am loading the script, this error comes up: [bROWSER] Console: Uncaught SyntaxError: Unexpected identifier (http://mta/uikit/js/uikit.js) Any ideas what this means? I haven't used it too much, so I'm not sure if any features aren't working because of this, I just noticed it every time I restart my resource using your uikit resource. I think a lot of those frameworks look similar, as for the differences I think they're pretty much the same to some extent. One of the biggest differences I can think of is that Bootstrap doesn't natively support responsive(you need to add it manually) widgets whereas UIKit does. As for the error I'm not quite sure, I don't ever get any error or warnings from the browser at all. So I assumed it didn't have any debug messages yet. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now