Comments (13)
Like I've written in my other post: The current LESS files are not very organized. Basically what I did was to take the old CSS file and split it into multiple files according to the comments (like this one: https://github.com/OlegKi/jqGrid/blob/master/css/ui.jqgrid.css#L14). I then converted the CSS selectors into nested LESS statements, but without changing the logic (of course I may have changed some logic without noticing it). so what you write about ui-jqgrid-pager
and such actually comes from Tony's original code.
But this is only the first version. I fully plan to do the file more properly later on, and I want to introduce variables, so that on can control e.g. the border color by changing only one line of code.
LESS building is integrated into grunt watch
, so the workflow for developing is to run grunt watch
in a terminal. When you modify a less file, the CSS file (in the build/
folder) will automatically be regenerated. You can then symlink this file into an existing project (to test integration with other frameworks e.g.), or you can just use the demos in the documentation for reference (they automatically get refreshed by grunt watch
, too)
from jsgrid.
P.S.: The generated CSS in the build/
folder is uncompressed, so it is somewhat easier to compare with the original. But honestly, I can't think of many reasons to compare them at all. Tony's original CSS is pretty simple (and badly written), so I don't know what insights can be gained by comparing to it
from jsgrid.
@flack Sorry, but one can't see the file on https://github.com/openpsa/grid.js. Compare with the folder structure here for example.
from jsgrid.
@OlegKi That's because the build/
directory is not commited (see https://github.com/openpsa/grid.js/blob/master/.gitignore#L3). build/
is the working directory for grunt
, so it will only appear on local checkouts
from jsgrid.
@flack It's absolutely clear for me. I miss the file ui.jqgrid.css
like the file grid.js-0.1.0.js
some time before. Why one should install the whole systems used by developers if one just want to use the results? I don't know such in any public available systems.
I think that dist
should contain all files required for the usage of jqGrid? The CSS file is do required. So one have to find it in dist
. Isn't so?
from jsgrid.
Well, I think end users should use the minified CSS, and that is available in dist
:
https://github.com/openpsa/grid.js/blob/master/dist/grid.js-0.1.0.min.css
Of course we could add the uncompressed file as well, but IMO it would only invite the wrong usage: Because when users get the uncompressed file, they will be tempted to make their own local modifications, and then they will have problems when they update to a newer release later on
from jsgrid.
It seem that I understand now how to explain the problem which I have with LESS files.
The first case: I use github repository not only in a projects. If I wrote an answer on the stackoverflow or describe a bug in a forum or in some issue I permanently include references to the line of source code (.js file) of to the line of CSS file (like to the line). I can't reference minimized version of the file.
The next problem: I use minimized versions of JavaScript and CSS files almost only in solution installed in production. I used to use non-minimized versions. For example I have a page where I included bootstrap.css
, jquery-ui.css
, font-awesome.css
and ui.jqgrid.css
(in the order) and I see some CSS conflict. Then I can start the developer tools, examine which styles will be overwritten by which another CSS. I can see the line number of the corresponding rule in the CSS file in some web browsers (like Chrome) or I can click on the CSS file near the CSS rule (like on ui.jqgrid.css
) to see the rule in the file. Even if the line number will be not shown I can search for the line text like .ui-jqgrid .ui-search-table
and will find the line of CSS file which need be used with small modification. I tried to write the texts in ui.jqgrid.css
in the same way like Developer Tools shows. Probably I need to fix some lines (include spaces) to fix the problem. I work permanently in the way to create demos like this one.
Moreover the the usage of LESS version of CSS is close to rewriting of some modules in TypeScript of CoffeeScript language. It would be very good for people, who uses the same language as his developer language, but if not, then one will have only problems.
In any way I still don't know any argument which shows some clear advantage for the end users of transformation ui.jqgrid.css
to many LES files. There are exist a lot of existing users, who uses ui.jqgrid.css
now, who includes his own custom CSS rules to solve conflicts with other CSS files which are included on the HTML pages. I see that providing uncompressed CSS file is really required. Some other arguments, like which files are better readable, could be the matter of taste.
from jsgrid.
Your development workflow can be enabled if we tell grunt to also compile a source map. Then, the inspector will point you to the source file line. See e.g.:
http://code.tutsplus.com/tutorials/working-with-less-and-the-chrome-devtools--net-36636
But if you start developing a bit with less, you will find that you really don't use it very much. The advantage of less to the developer is that it makes the CSS structure feel a lot the the DOM of the page, so after a while, you know pretty much without thinking where the selector you're looking for is. Of course, this is assuming that the less files are properly structured (which will happen gradually).
For the end user (using the compressed CSS), there is no advantage. But there is no disadvantage either. People who use less already, or who don't mind using it, an advantage is that we can provide them with an easy way to customize the layout. If users include our less files into their code, they can do for example this:
// Import default layout
@import 'grid.less';
// do some customizations
@grid-default-font-size: 13px;
@grid-border-color: #ccc;
This is just an example. Actually, there are no variables defined yet. But we can do it, and this will also make development easier (because you if you want to change e.g. the border-width globally, you would only have to modify one line of code).
If you think you need an uncompressed version of the CSS available on github, we can add it easily. But I really wonder: Wouldn't it be easier to just post screenshots from the inspector, or doesn't stackoverflow support that?
from jsgrid.
Thank you for adding uncompressed CSS!
from jsgrid.
@OlegKi try beautify css on google.
from jsgrid.
@bouks: Thank you! If the most other prefer such format, then I can live with it. I'll reformat ui.jqgrid.css
from my fork in the way, then I hope we could compare it easier with grid.js-0.1.0.css.
from jsgrid.
You're welcome.
from jsgrid.
Ok closing.
from jsgrid.
Related Issues (20)
- multiselect checkboxes not working properly HOT 1
- clicking form edit submit button does nothing when editurl and url are the same value
- form width in pager edit option not working HOT 14
- Edit option closeAfterEdit not functioning HOT 22
- Builder logs HOT 5
- grid not updating when editing HOT 39
- downloaded files naming in builder HOT 1
- Base in builder HOT 6
- use of grouping and loadonce:true causes subGrids to not work HOT 3
- New less organization HOT 29
- minifying css after (instead of) less HOT 2
- use JSDoc 3 for API documentation? HOT 1
- column alignment off when using group headers HOT 10
- Form Edit repopulate the entire table HOT 2
- What Is The Difference To free-jqgrid HOT 3
- one more jsgrid exist on GitHub HOT 2
- How to submit new row as JSON? HOT 3
- user definable footer summaries via drop down HOT 1
- setting the height property causes the horizontal scroll to unnecessarily appear HOT 3
- Clicking inline editing buttons should not remove selection HOT 16
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jsgrid.