As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I want an easy to use grid framework for my current web project. These are the features i would appreciate:
fluid grid layout: boxes that can be aligned horizontally (side by side), each having the same height (for example a 3-column layout), working with 100% width
responsiveness: adapts automatically when resizing the browser window
mobile devices: shows an alternate fitting layout for pads and mobile phones
text size: optionally adjust text sizes dynamically (for example full width headlines)
image size: optionally adjust images sizes dynamically (for example full width image galleries)
breakpoints: optionally define width values which trigger events which alter the layout (for example removing buttons if the width is fallen below a threshold)
Update
I found many grids, but narrowed it down to the following three promising frameworks that might be a good fit for my requirements:
Foundation
Semantic Grid
Golden Grid System
Here are all the others:
CSS Grid (not fluid)
320 and Up (not fluid)
Columnal (not fluid)
Skeleton (not fluid)
SimpleGrid (not fluid)
Less Framework (not fluid)
Bootstrap (non-semantic classes)
Breakpoints.js (only breakpoints, too similar to media queries)
Adaptive images (only images)
FitText (only text)
Gridset (commercial)
HTML5 Boilerplate (old)
Normally, i would test them myself before asking here so that i can formulate more specific questions. But due to the vast amount of frameworks i'd like to hear some pointers where to begin.
How are your experiences with these or other similar frameworks?
Do you recommend a specific framework that matches my requirements?
Solution
I ended up using Foundation which is clearly the winner in this race - in my humble opinion.
Update 2
Bootstrap 3 is a real competition now, because it supports semantic grid classes too. And it supports SASS as well as LESS.
I have used columnal priorly and it does provide most of the functionality that you want apart from the breakpoints feature.
It is easy to use and is adaptive. In mobile screens the grids degrades to a stack so all the column contents are shown one under the other.
However for the intelligent adaption feature, as you have outlined in the breakpoints feature : I would very strongly recommend you to use the CSS 3 media queries directly because that is exactly what they are meant for and they are not difficult to use. The CSS frameworks which provide these features under the sheets utilize media queries only.
Taking a look at http://twitter.github.com/bootstrap/scaffolding.html#responsive , Bootstrap's fluid grid does provide some convenient shortcuts for setting css properties for specific screen sizes which are not present in columnal.
Related
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm looking to use something like Twitter's bootstrap to help me ease some of the pains of creating and working with some of the common design issues. However, I still fully intend to do a whole bunch of styling and stuff outside of their prepared stuff.
Would this be a bad idea? Potential conflicts down the road? Should I try to build on top of and use bootstrap as much as possible?
twitter bootstrap is great to get started and its exactly what it intends on helping developers. Instead of creating a lot of stuff from scratch, you got pretty much everything you need for a basic-to-medium frontend so you don't have to worry about it.
As you build your application, there will be times where you would need, for example, to replace the color of the buttons. So instead of having a .btn-primary be blue you want it pink.
you can override the .btn-primary in your own css, or even better, see how it behaves, copy the styles, change what you need and use your .pink-btn-primary.
Little by little your css would stop being twitter bootstrap and become your own variation, with the ability to rely on features being added to bootstrap with time.
Relying on bootstrap has a bit of a shortcoming - if a bug is fix or a new version changes its behavior (rare on css, but very possible on js) you will have to adjust to make sure you get the behavior that you want.
Also, You should be careful, as suggested, not to use their class names, and make sure you load your css files after bootstrap files.
good luck.
Bootstrap is meant to be used to build on top of and overwrite so you get the design you want.
As always, using Bootstrap depends on the project.
It makes starting out very easy but like most frameworks you don't always want to go against them, so you have to take them into consideration in the early stages of your design. Bootstrap relies heavily on wrapper elements and classes so using it for an existing website where the markup can't be changed won't work out for you.
Example: Their grid system works really well for their fluid container layouts but the default is 12 columns and you will want to look at all their customisation options to change this.. or see examples of using the .less pre-processor with Bootstrap and these settings apply a set margin that may not always work out for you, and you have to start thinking differently.. such as how you can nest elements to achieve the design you want, or start testing with new overwritten margin sizes.
You also need to consider any other frameworks you may be building on, e.g. ASP.NET MVC has a lot of built in features such as the client validation, and HTML helpers for form elements.. but they don't always allow you to apply wrapper elements and class names to them unless you first right your own extension of them.
Bootstrap has an Apache v2.0 license which says
irrevocable copyright license to reproduce, prepare Derivative Works
of
so as long as you keep the copyright license they allow you to change bootstrap as you see fit, obviously you shouldn't look to change what they have already extensively tested for you and you would rather just overwrite some things, but the option is always there.
I think most developers do not just use the prepared stuff, they always add some customization on top of it. As for CSS styling, You can keep the bootstrap.min.css file intact and write your custom css on another CSS file. If Bootstrap updates in future you can just replace that original bootstrap.min.css file and maybe have to make some minor adjustments.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I`m looking for WYSYWIG JavaScript HTML editor for my app. I`ve already tried some of them, for example from this list but some are too complex and some are missing basic features...
Requirements:
It should work with newest stable release of: Mozilla Firefox, Google Chrome, Opera, Internet Explorer (and also Apple Safari support would be nice).
It should have basic features like bold, italic, color change, headers, paragraphs, no-formatting, aligns - those are basic options that browser may handle (it is how it`s done in most WYSIWIG editors).
I don`t need any UI - so if it comes with UI - I should be able to easily remove it. I mean I don`t need any buttons, color pickers, image insert dialogs etc. - I will build my-own menus
Instead of UI I need complex API where I can for example extract selected/full text/HTML, insert text/HTML, replace text/HTML.
I need advanced text processing support - this is what I`m looking for and cannot find anywhere - I need to detect what word is under cursor. For example we have "This is sample text" and User clicks on "sample" - I need to know it`s position, text and HTML.
I found something like this: Javascript Rich Text Editor with get AND set cursor position support - but it`s not full answer for this problem.
It would be great if it`s easy to embed (not to much files), lightweight and fast.
It should be licensed by opensource/GPL/or some other open/free license.
If I miss any info - please let me know and I`ll update them.
Maybe some of You know some nice libraries? Or maybe there are other nice solutions to achieve my goals?
Thanks in advance
Not a WYSIWYG editor as such, but my Rangy library may help you build a simple editor. In particular, the new TextRange module provides methods that work with words.
you can try nicedit. http://nicedit.com/index.php
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have spent days trying to incorporate different editors within my site. None seem to be up to the job. I have delved in to their code a lot and one thing or another doesn't work.
Here's my requirements:
Basic formatting such as size, bold, italic, strikeout, subscript and superscript
Image upload via ajax, image resize and positioning
Link handling
Code tag or styled div with a drop down in the top right for selecting syntax highlighting. And on leaving the code tag/styled div the text updates via ajax to include line numbering.
Paste but encode users code
The main issues with editors I have tried are:
Carriage Returns/Line breaks don't get the cursor out of the current element and if they do they re-create the current element or re-create the current element within itself.
They use a lot of unnecessary code, such as multiple nested divs. Heck looking at the source of some you get <div><div><div><div><div><div>Hello World</div></div></div></div></div></div>
They don't work in quirks which I need them to.
Here's an image of my idea, it's just a knock up:
So my idea is to use a content Editable div and regex to track the code tags and implement my own functionality. But I need to get selection start and length of a content div in all browsers inc' quirks. How can I do that?
Also replacing text within the content div.
Any suggestions, ideas or help would be great thank you.
It's pretty easy actually. You just need a <div/> with an attribute called contenteditable. From then on, the only browser issues you may have is to reliably insert HTML into that div. But I've seen it work well before, so it shouldn't be a real problem.
Since you mentioned quirks mode, I'm afraid it's not possible without hue hacks, however, there's an easy fix: put your editor (the div) in a separate page and embed it within an iframe.
Regarding the image uploading part, your server needs to handle that. From the editor's aspect, it's just an <img/> tag.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm working with JavaScript, JQuery and HTML. UI Of my project is completely dynamic. I am looking for a dynamic JavaScript/JQuery Grid which supports following features.
Can anybody tell me is there any good looking open sources Grid which supports the following features?
I should be able to create an instance of the grid at run-time and add to DOM.
Supports column templates (textbox, select, checkbox or any inputs or simple text)
Supports set new column template or replace existing column template at real-time.
Few input control (e.g textbox, checkbox..) present under a column may be enabled and few may be disabled.
Supports setData() at real-time.
Supports event if any input data changed by user.
It should support selection of a Row
Add row or delete row support at real-time without rendering the whole grid.
Supports Paging.
Supports sorting by any column at real-time.
Fires an event if data is sorted by user at real-time.
Grid UI must support realizable columns
Auto re-sizable (It will be great if grid is auto re-sizable according to the size of the parent element)
Definitely has good documentation.
Some useful are:
Free:
Gijgo Grid
Backgrid.js
Flexigrid
jqGridView
Ingrid
SlickGrid
DataTables
Shield UI Lite Grid
Paid:
Fancy Grid
jQuery Grid
jqxGrid
Shield UI Grid
The best entries in my opinion are Flexigrid and jQuery Grid.
you can try http://datatables.net/
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Key features:
Variable length pagination
On-the-fly filtering
Multi-column sorting with data type detection
Smart handling of column widths
Display data from almost any data source
DOM, Javascript array, Ajax file and server-side processing (PHP, C#,
Perl, Ruby, AIR, Gears etc)
Scrolling options for table viewport
Fully internationalisable
jQuery UI ThemeRoller support
Rock solid - backed by a suite of 2600+ unit tests
Wide variety of plug-ins inc. TableTools, FixedColumns, KeyTable and
more
It's free!
State saving
Hidden columns
Dynamic creation of tables
Ajax auto loading of data
Custom DOM positioning
Single column filtering
Alternative pagination types
Non-destructive DOM interaction
Sorting column(s) highlighting
Advanced data source options
Extensive plug-in support
Sorting, type detection, API functions, pagination and filtering
Fully themeable by CSS
Solid documentation
110+ pre-built examples
Full support for Adobe AIR
My suggestion for dynamic JQuery Grid are below.
http://reconstrukt.com/ingrid/
https://github.com/mleibman/SlickGrid
http://www.datatables.net/index
Best one is :
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Variable length pagination
On-the-fly filtering
Multi-column sorting with data type detection
Smart handling of column widths
Display data from almost any data source
DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
Scrolling options for table viewport
Fully internationalisable
jQuery UI ThemeRoller support
Rock solid - backed by a suite of 2600+ unit tests
Wide variety of plug-ins inc. TableTools, FixedColumns, KeyTable and more
Dynamic creation of tables
Ajax auto loading of data
Custom DOM positioning
Single column filtering
Alternative pagination types
Non-destructive DOM interaction
Sorting column(s) highlighting
Advanced data source options
Extensive plug-in support
Sorting, type detection, API functions, pagination and filtering
Fully themeable by CSS
Solid documentation
110+ pre-built examples
Full support for Adobe AIR
Have a look at agiletoolkit.org as this has a simple to use CRUD which supports 2,4,6,7,9,10 and 12 out of the box (uses Ajax to defender the grid when adding,deleting data and it integrates with jquery.
I would post some examples but on an iPad at the moment.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have used a few javascript frameworks in my career as a developer. Namely jquery, moo tools and atlas. But all of my experience is surrounding professional corporate site development. I am currently working on a game that will have a very rich UI. I am contemplating implementing the UI entirely in javascript and HTML. So right now I'm in the process of researching my options in that regard. Is there a javascript framework out there that I can use that will help me create a rich game UI?
Specifically I need to animate characters and effects. This can be frame by frame if necessary or even hinged like what a lot of flash animations like to use. The ideal framework would have built in functionality to take art assets and perhaps an XML payload that when interpreted would describe how the art assets relate to eachother. For frame by frame this would be a way for me to tell it what sequence the images come in and how fast to switch the frames. For a hinge-type framework it would be a way for me to tell it where to position the arms, legs, where joints are and allow me to group specific joint movements into animations. Lastly the ideal framework would support paper doll functionality where I can use layering to put a pair of glasses on a character for example, or different clothing or hair color.
I realize that most likely the ideal I describe above is not available but if there is something that gets me closer to my ideal from jquery or other similar frameworks it will help me in my decision.
Thanks
Your asking for something far too specific here. When it comes to rendering games to the screen you have 3 mainstream non-plugin options
Canvas
The canvas is a raster based display. You can use a narrow abstraction on the canvas like easel.js or a heavy abstraction like The render engine. Now these probably don't have the fine grained features you want.
The reason they don't is performance. Highly performant code and high level abstractions do not go hand in hand. You will find that using the a heavy abstraction over a lightweight one comes at a serious performance cost.
SVG
You can use SVG, which renders as vector based graphics. A good abstraction library for SVG is rapheal. Again there are no high level abstraction libraries or frameworks for what your looking for simply because of performance costs.
DOM
You can also render by simply using DOM manipulation. Any library like jQuery or MooTools will do for this. If you want to use HTML UI elements rather then customly generated ones you can use some of the heavy weight UI toolkits like Sencha, SproutCore and Cappucino.
There isn't anything generic and mainstream out there to make your life easy yet. You can look at some javacript game engines like crafty
Javascript Game frameworks:
Impact JS
Akihabara
GameQuery