When it comes to styling a forms based web app (or pages, components, etc.), how do I build it using the least amount of CSS, style tags, style classes, and style attributes possible?
My understanding was that the paper-* elements implement an opinionated material design style that can be used to build components with similar material design out-of-the-box.
I'm trying to build an internal app for employees at my company (thus, as long as it's not bad, styling is not that important). It's basically a bunch of forms pages that look like many of the protoypical menu-driven web sites (like the polymer docs pages):
Nav menu on the left
Menu selected content on the right - text reports and forms mostly
header/logo on top
However, when I tried to copy some things (like item list boxes) out of the elements catalog like the paper-item demos I couldn't match the look in my components simply by copying the HTML. The demo HTML referenced classes for which I had to copy a bunch of <style> tags in order to get them to work.
It felt like a lot of re-inventing the wheel to copy an often repeated look.
I'm not sure if I understand your problem. The paper-* elements aren't meant to build components, they ARE components. If you want to use them you have to go the full way. If you use them as intended, they look like in the demos out of the box. You can't just copy the HTML. A more traditional way to get the material-design-look is Materialize or Googles own MaterialDesignLite.
Related
I know that this question is not more coding based. But this can cause many problems practically.
I have a website with 10 pages. Each page has the same navigation. Now if I want to change the navigation a little to include a hamburger menu, I will have to make this change in each page one by one. Is there any way in which I can make this common change to all the pages at the same time?
I browsed for this on SO but the answers to a similar question asked to use PHP or WordPress. Is there any method or tool other than them for my requirements?
With HTML, I don't think there's any support for that kind of dynamic feature yet.
However, if you seek to want to make changes on a portion of your website and see it apply to every other page on your website that has the same portion, there are frameworks, libraries and even template engines that support such.
You may need to use HTML alongside these tools or just use them to replace HTML. For instance, when building a website with Node and Express, there are a good number of template engines that you can make use of that can be used alongside HTML to make your website dynamic. I would recommend that you try out one of the following: pug, ejs, handlebars. I believe you can achieve that level of dynamism with one of them.
You can also decide to use front end libraries or frameworks like react, vue and angular. These tech tools enable you to create a portion of a website(called a component) once and reuse it on as many pages as you want. Anytime you make a change to that component, it automatically adjust itself on every other page it has been inserted.
I'm using Polymer 1.x and started using the Polymer Kit to build a current app. I know about the App-Elements, and currently I'm trying to achieve something like this:
Full:
Mobile:
So far I have something like this:
Do I need to use media queries to hide the tabs and show the logo?
On a side note, I'm really having a hard time understanding Polymer, because I don't know if the elements come with the predefined styles (as Bootstrap or Foundation would do) or you need to do some heavy-lifting in CSS (which is what I've been seeing). I would really appreciate if someone could show me a good tutorial (I've seen Polycasts and the Github) on how to fit things together!!
You can use iron-media-query to hide the tags.
All the polymer elements have predefined styles and have exposed certain mixins and variables for custom styling.
I would recommend going through polymer's documentation and element's documentation to best understand its usage as each element has its own set of properties and styling. Polycasts cover only a few topics and are good source of knowledge only if you are already familiar with polymer development.
I want to know if there is a way to create a form that will keep all styles of a webpage, while changing the content of the content of the page. Ex: When you submit a question to Stackoverflow, it keeps the all stylistic parts of the page, i.e. Header and sidebars, while changing the title and majority of page's content. Also if you can would a server-side languange, such as php, be best or would a web-side languange, such as Javascript, be best
You can do this by css also you can devide the page into many files
such as putting the header in another page (header.html) and include it in the main page using php (include_once('header.html'))
Style sheets (CSS) exist for exactly this task. Ideally, the HTML for a page contains only its content, while style sheets contain all presentation (the "look"/"format" of the page). Reusing the same style sheet(s) on most or all pages results in a consistent look across an entire website.
See http://www.w3schools.com/css/ for more general information and tutorials.
Edit If you're referring more to reusing "structural" markup across pages, that is accomplished using a template engine. Using templates things like primary navigation, sidebars, etc. can be defined in one file and used on any page that extends the base template. Many web frameworks have a template engine built-in (Django, for example has one I personally use and like).
This is handled using CSS. Basically, websites are built using HTML, CSS, and JavaScript.
HTML builds the structure of the website. It creates the basic building blocks of the site.
CSS takes care of how the website looks. It stylizes the building blocks.
JavaScript takes care of the functionality of the website. It can manipulate the building blocks in order to make something happen.
In order to maintain the same look of certain elements on a website, it is best to create a so called pattern library. A pattern library is a document consisting of pieces of code—these pieces can be reused throughout the website in order to maintain consistence. In this document, you specify the formatting of the essential elements (headings, body text, blockquotes, buttons, form elements etc. (Pattern libraries are sometimes also referred to as "style guides", however, style guides are usually visual documents, while pattern libraries are consisting of pieces of code.)
Of course you can specify the look of your website without using a pattern library, however, it might get a bit harder to maintain the same style throughout the whole website or keep the styling the same when handing the project over to another developer.
You can read more about pattern libraries in this post if you feel like it.
I have made a couple of simple Joomla websites before. Those are using a custom template made by myself. They are easy websites as they have a simple linear menu, all pages have the same layout, just some articles are changing between pages.
But in my new project, I have a ready html website that I have to convert to Joomla. The problem is, there is no one repeating menu and there is no consistent layout. To simplify a bit: there are 10 pages and they all have different layouts. Between pages background changes, menu position changes, menu content changes, content box positions change, everything changes. This means I'm not able to do this site as I've done before, using one template index.php which simply contained my repeating page structure.
I am dreaming of a way to simply change ready_page1.html to ready_page1.php, adding some modules inside the php (which are then available for online editing, which is the reason switching to Joomla). I would do this to each page. The custom menus inside each page I would "manually" point to the according php files instead of the old html files. Is this method possible somehow? I couldn't figure out how to do this.
I don't care loosing lots of Joomla basic functionality due to this crude method, I just want the simplest way to do this.
In the end, I just want the exact same website I already have on html, but I want some chosen rectangular areas in the html pages to be editable Joomla modules. The modules would have the pen icon for editing. That's it, no other functionality is necessary.
Sounds like the site you are converting is a usability nightmare. Consistency is part of giving the user a positive experience. That said, if you have to make it exactly the same, then the easiest way is to do it the right way to begin with.
First, you need to learn about page class suffixes. You can add those to a menu item so that you can control the CSS on a per page basis. This will allow you to change backgrounds and other elements on each page.
Documentation - http://docs.joomla.org/Page_Class_Suffix
Next, you will need to make a template so that each of the module positions is collapsible. If you plan out the positions, you should be able to use a single index.php for the entire site. We have a custom template that we use for every site we do and it rarely needs to be touched because all of the positions we would possibly want to use are already there, they just don't get used until a module is put in the position.
Documentation - http://docs.joomla.org/Collapsing_columns
You will also want to make sure you understand menu assignments. You should be able to assign the modules to the pages as needed to create the layout you want for each page. If you are using 2.5.x, then you can probably get by with the built in menu assignment features. If you are using 1.5.x then (you really should upgrade) you will probably want to use Advanced Module Manager as it makes menu assignments much easier and more flexible.
Documentation - http://docs.joomla.org/Help15:Screen.modules.edit.15#Menu_Assignment
Once you get a good grasp of how Joomla templates work and how they are supposed to be used you will find that you can basically do anything you want within the framework so you don't lose any functionality.
build your website and create those 10 pages (contents, heirarcy, and so on..).
then create your templates based on those html files. this is where you adapt the html into a joomla template. after this step, you should end up with at most 10 templates depending on your styles (crude but quick)
as far as i know and from the documentation, Joomla 1.7 supports "template per page" (see the screenshot). you can pick out which style will be applied to which item. it even applies to subpages. another documentation here
I've been using Dreamweaver to create my wireframes (tables).
Before I create my own css/html/icon framework I would like know if such a library already exists.
The ideal toolbox would include basic styles for all form elements, icons, css grid layout, sample standard ad sizes, and empty templates.
As far as I know, these all exist only separately. There are a few notable CSS frameworks, some with grid layouts, and CSS form styling is almost a separate discipline. As for web icons, take your pick!
The only place you're likely to find these all together (including plug-ins/add-ons) is in a full-blown web framework or CMS.
If you put such a package together for yourself, bear in mind that it will be useful to many others, make sure the HTML ad CSS validates, and choose css-based templates rather than table-based ones...