I have recently started to make some User Interfaces for Websites. What i am currently using something called Bootstrap, which is easy to start with and looks good. But the idea behind does not seem too efficient, since we are making our jsp code (the content) dependent on the css elements like this:
<tr class="row col-m-7">
<td class="column"> ...
<a class="btn btn-xs btn-success"> .. </a>
</td>
<td class="column"> ... </td>
</tr>
Recently the Bootstrap has introduced a newer version (v3), and i had to change many class attributes until the jsp gets a stable look. I would like to keep the code in separate layers for content and presentation like this, so i can easily switch my UI framework without loosing any content:
Content (simple html or jstl):
<tr>
<td>...
<td>...
</tr>
Presentation:
.. somehow achieving giving a good look to the table above .. (how ???)
How can i separate content and presentation layers on JSPs?
UPDATE
A new standard is being developed, called Web Components, which will enable developers to create custom html elements which hide the implementation of styling and inner html markup. For example, a modal widget could be declared by the following syntax:
<bootstrap-modal>
<h1>Hello World!</h1>
</bootstrap-modal>
Behind the scenes, the developer has specified the actual html markup used to render the widget, that implementation is tied to the custom component.
Here are a few tutorials to get you started:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/#toc-separation
http://css-tricks.com/modular-future-web-components/
https://hacks.mozilla.org/2013/08/introducing-brick-minimal-markup-web-components-for-faster-app-development/
If all <a> elements were to look the same, then you could write one css class and all <a> elements would have the same styling:
a {
color:blue;
}
Some websites, for whatever reason, possibly even concerning the value of the href attribute; will want different colors and styling for different <a> elements. The only way to achieve that is with the class attribute which refers to a css class from a stylesheet:
a.red {
color:red;
}
<a class="red" href="red.html"/>
This means that if you want unique styling for same element names, you will always need to write code which links together the presentation element and the styling.
Related
I have a table class that I use to vertically centralise text in a span or div. I am using Handlebars in Node to render several templates server side, I have used this method on several partials in my web project, with no problems.
However in one particular partial / area of markup, either the browser or Handlebars is ignoring or removing the table, tr and td tags, showing only the text that is inside the tags.
In the past when this has happened it was because my tags were incorrect. However I have cross checked this code with my other markup where the table tags do show (in other partials), so I can't see where the problem is, and I can't find any suitable online topic about this (it is probably something really obvious that will make me look like a dummy).
I have tried in Chrome and Edge. I have also tried saving the markup snippet in a .html file (as opposed to a .hbs file) and opening that in the browser, and by doing this it does show the table tags. The consequence of this error is that I am unable to vertically align the text in the span. I am not sure if the markup is invalid according to the browser or Handlebars, but I am not using any {{Handlebars}} tags here so it shouldn't warrant the table tags to be invalid.
Markup:
<div class="lp-menuselector" title="View summary of Individual Learning Plan and evidence pack">
<div class="lp-menuselector-iconholder">
<img src="icons/icon_lp-overview.svg"/>
</div>
<span class="lp-menuselector-textholder">
<table class="tablecellleftalign">
<tr>
<td>
ILP Overview
</td>
</tr>
</table>
</span>
</div>
Output markup shown in Chrome Developer Tools / Elements:
<span class="lp-menuselector-textholder">
ILP Overview
</span>
Topic Closed:
After I restarted my computer and restarted the Node application, this error no longer occurs. Glitches in the matrix.
In my application I have noticed that my template repeater does not get called when inside of a table. My goal is to use the repeater to complete the data and refresh it as needed.
Markup:
<table>
<tr>
<th>Name</th>
<th>Date Uploaded</th>
<th>Default</th>
</tr>
<template id="themesRows" is="dom-repeat" items="{{themeList}}">
<tr>
<td>TEST {{item.name}}</td>
<td>{{item.dateCreatedUtc}}</td>
<td>
<!--<input type="radio" name="default" value="{{item.id}}" selected="{{item.id == model.defaultThemeId}}" />-->
</td>
<td>{{index}}</td>
</tr>
</template>
</table>
Dart:
class SampleB {
String name = "";
String dateCreatedUtc = "";
int id = 0;
SampleB(this.id, this.name, this.dateCreatedUtc);
}
class MyPolymerElement extends PolymerElement{
#property List themeList = [];
MyPolymerElement.created() : super.created();
attached(){}
}
This is not necessarily something "broken" in Polymer or your code, rather it is a limitation caused by a "feature" in the browser parser. Since the element hierarchy for table is well defined, browsers have specific parsing rules when they process them. When drilling into a table hierarchy, if the parser comes across a child it does not expect, it produces unexpected results.
It's hard to tell from the excerpt, but I would guess that your repeater is actually working, but the browser is not rendering the rows within the table. If you want to post a complete demo of the issue, I'd be happy to review and amend my answer.
A way around this is to just put an observer on your themeList property. When the value changes, use DOM manipulation to fill or modify the table.
There is some good information about it in the discussion related to this issue: https://github.com/Polymer/polymer/issues/4135
Per the thread, it appears there is a fix that will allow this in the Polymer 2.0 preview release.
When looking at design methodologies of Polymer being a modern version of HTML, coupled with Dart (originally tagged as the future of web programming). I had to do some sample tests. After extracting it to its own spot, outside that of the table I did confirm that the data does in fact, repeat. The issue comes from the table.
A table is an old way of listing out data. It is the oldest but one of the most used concepts on the internet. With this new age of computing and the leveraging of Design methodologies of Polymer we aren't actually suppose to use them at all.
Conceptually, there are more modern and entertaining ways to display information to users. One of the most commonplace concepts is the idea all throughout Polymer, Cards. You would define a card through css and html and repeat that, creating so many of the lists around the polymer websites.
I thought long and hard about this. It seems that putting a template repeater inside of a table and a table>tbody pair would not carry out the render, instead it just rendered it as is. 1 row of empty strings underneath the header concepts.
So to get the correct answer to your explicit question, you could do something like this.
<dom-module id="tableDesign">
<template>
<style>
.table { display: table;}
.row { display: table-row;}
.header { font-weight:bold; display: table-cell; text-align:center;}
.cell { display: table-cell;}
</style>
<div class="table">
<div class="row">
<div class="header">Name</div>
<div class="header">Date Created</div>
<div class="header">Default</div>
</div>
<template is="dom-repeat" items="{{themeList}}">
<div class="row">
<div class="cell">{{item.name}}</div>
<div class="cell">{{item.dateCreatedUtc}}</div>
<div class="cell">
<!-- Insert Radio Here -->
</div>
</div>
</template>
</div>
</template>
</dom-module>
This will get your repeater to work, while leveraging a "table" without using thetable tag.
On a deeper level of understanding though, I think that looking at a more modern concept for displaying your rows of data should be looked into. Developing a card or structure which fits with the modern concepts would allow you to effectively lever the modern tools you are trying to use.
This sounds very backwards, but I want to take existing CSS classes and make them inline in the element itself (The css styles and the html elements are in the same file). There is a reason for this, for which I will not go into detail.
Example:
<html>
<style type="text/css">
.p1 { height: 10px; }
</style>
<body>
<p class="p1">...</p> <!-- Remove class="p1" and replace with style="height: 10px;" -->
<p class="p1">...</p>
<p class="p1">...</p>
</body>
</html>
Keep in mind there can be many CSS classes, and many can belong to a single element.
Edit: The reason I'm doing this is because (based on our client) we want to generate PDF documents from an HTML template. The PDF tool we use does not work well with external CSS classes.
You are looking for Premailer (The source available as well) - it is a Ruby library that does just that (inlines CSS for HTML email - but the output isn't specific to HTML email - it should work just fine with your PDF document generator as well).
There is also lamson.html.HtmlMail if you are using Python and there are a variety of Node.js libraries available to do the same thing.
MailChimp has a page for this in their labs, the CSS Inliner -
http://beaker.mailchimp.com/inline-css
It does leave the class, however.
I've tried to search for a subject on this, but I haven't found any, so I thought I'd go ahead.
My question is when it is correct, if anytime, to just put your style directly in your HTML file, instead of using a .css file.
I mean, I get that it is very useful to use your .css file when you have alot of things that needs to be repeated, or is used on several pages.
But in my case, I have one page where I'm about to style something, that I'm pretty sure only will be on that page. This being the width, height, and small stuff for a div.
To show you what I mean, here's the code:
<div style="margin:0px auto; width:600px;">
<div style="float:left">
<p class="InputFieldsText">Brugernavn</p>
<div class="InputFields"><input name="Text1" type="text" class="Medium" placeholder="Din e-mail adresse" /></div>
<p class="InputFieldsUnderText">Glemt dit brugernavn?</p>
<p class="InputFieldsText">Password</p>
<div class="InputFields"><input name="Text1" type="password" class="Medium" /></div>
<p class="InputFieldsUnderText">Glemt dit password?</p>
<input onclick="window.location='user_page.html'" class="LargeIndent" name="Submit1" type="button" value="Log ind" />
</div>
<div style="float:left; width:172px; text-align:center">
<img alt="" height="128" src="images/lock.png" width="128">
</div>
</div>
So, as you can see, in some divs I styled it directly, instead of coming up with a name for my class and put on there.
I know it isn't wrong to do, since it will come out the same if I used it in my .css file and called a class, but is there a "guideline" or something that this and this is not recommended etc. etc.
Hope you understood my question. Really not that big of a deal, I've just always wondered :)
Regards
The answer is pretty simple, IMO: never. :)
You should always use a style sheet, because it allows you to quickly and easily change the entire appearance and layout of your site. If you embed the style information in the HTML directly, you have to work a lot harder if something needs to change; with a style sheet, you simply change the CSS file in a single location, and the change becomes global everywhere that style sheet is used.
It's best not to mix presentation with content. To simplify your CSS there is nothing wrong with using smarter selectors and IDs for elements for which you know there will always be one and only one. You don't have to define classes for every little thing.
In my opinion, inline styles make markup so cluttered, especially with large style declarations which cause line wrapping.
A small block of style inside the HTML page (instead of an external file) might be acceptable in some cases as it reduces the number of requests sent to the server. Server-side processing can be used to accomplish this by reading a separate stylesheet file and injecting the style directly into the page. With this approach, there is a trade-off between page size and the number of HTTP requests.
During development of a page I bung eveything into the same file.
just being lazy - have the stylesheet in the head part.
Then when in production seperate the HTML from the CSS. actually I do that during development when they share common features - a cut and paste job is required.
Never have your style information inline
When working with hierarchical template systems, I sometimes find it convenient to place style definitions in a stylesheet in that template, which ends up being part of the page. If these need to be reused, they can be migrated to a separate stylesheet.
Well, first things first. Styling takes some order of precedence :
inline styling
CSS in HEAD
imported CSS files
That is, if a specific element has some attributes defined in the .css file, then you can definitely override them by using inline CSS (<div style='...'></div>), for example.
Apart from that, I suppose it's merely a matter of taste and of how 'cluttered' (vs 'compartmentalized') you want your code to end up. Don't forget that CSS's main purpose is to separate : LOOK from STRUCTURE.
My GENERAL STRATEGY is :
Use CSS files, for better organization is bigger sites, that may be used an re-used in various files (portability)
Use CSS in HEAD in some "quite" big, but not too big chunks of CSS code, that are page-specific.
Use inline CSS for local modifications only (in REALLY small pages, or for existing specifications that I want to alter on location)...
CONCLUSION :
Anyway, as your main issue is about inline CSS, here's my 2 cents : inline CSS makes the code easily unreadable (at least for my taste), so why do it unless necessary?
You should always use a external .css files, because external style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
If you will use inline css rather than external css in HTML pages that will take of much time to edit the changes so should use the external css files for smoother process.
I have a form within a table which is within another form. My problem is that the embedded form tag is not appearing - the input and iframe appears, but the form tags do not appear. The table and outer form appear. What's wrong?
<form>
<table id=\"mytableid\">
<tr class=\"form_row\">
<td align=\"right\">
Upload Photo:
</td>
<td align=\"left\">
<form action=\"/myuploadpath\" method=\"post\" enctype=\"multipart/form-data\" target=\"upload_target\" id=\"photo_url_upload_form\" name=\"venue_photo_url_upload_form\">
<input type=\"file\" name=\"photo_url\" id=\"photo_url\" size=\"40\" />
<iframe id=\"upload_target\" name=\"upload_target\" src=\"#\" style=\"width:0;height:0;border:0px solid #fff;\"></iframe>
</form>
</td>
</tr>
</table>
</form>
Putting a form inside another form is not valid HTML. When this happens each browser will do different things with the markup. Some ignore parts, some break, etc. Either way you shouldn't do this.
Edit
If you are using tables for layout purposes, you technically shouldn't be. They are only meant for tabular data. You should use divs/spans and CSS to create the look you want on your site. A great place to learn about this stuff is W3C Schools.
I assume you're using something like Firebug or the Chrome DOM Inspector to look at your DOM tree and you can't see the inner <form>. These tools inspect the DOM itself, not the HTML source. That is, they show you what the browser has interpreted from your HTML. The problem in this case is that nesting a <form> within another <form> is invalid, and hence the browser has ignored it and continued parsing the rest of the document.
Obviously, the fix is to ditch that outer form since it's not doing anything. If you have it there for styling purposes, perhaps use a <div> with a class.