I need to integrate my web application inside another(main app). I don't use the bootstrap library but the main app does. I however don't want my already-styled controls to be affected by the bootstrap of the main app. How can I prevent bootstrap from applying its styles on my controls?
You can't really. If the CSS overwrites the styling of basic elements the only way for you to not be affected by them is to override the changes (each and every attribute) on your portion of the ui and below.
It is in my humble opinion, one of the weakest points of CSS today that you have no way to block the cascading when desired.
Related
I was looking at the source code for the header on the Polymer website so I could build a similar one for my app.
They use iron-selector for the menu items.
But on their documentation page for responsive-navigation-pattern they use paper-tabs for the same kind of header implementation with tabs.
What is the difference between iron-selector and paper-tabs and which one should I use if I want a similar header for my app?
The <iron-selector> element manages item selection and has no template or styling (i.e., it doesn't look like the top nav on Polymer's site out of the box). If you want a barebones control, where you could fine-tune the styling of the selected items yourself, this element would be ideal.
The <paper-tabs> element also manages item selection, but includes its own styling (which follows material design) and navigation controls to access the tabs out of view. If you prefer a responsive control that uses material design and other customizable styles, this might be a better choice.
The <iron-selector> on the main page of the Polymer site is styled similarly to the <paper-tabs> element's default style, and since that's the look you're after, I recommend <paper-tabs> mainly because it achieves your goal with less effort required.
I have a website that uses Bootstrap. Technically, I'm using Bootstrap 4 at the moment. I want to leverage Accelerated Mobile Pages (AMP) in the publicly-facing parts of my page. However, I have several errors that I can't seem to shake. This has me wondering, can I even use Bootstrap with an Accelerated Mobile Page?
Am I even allowed to use JavaScript in Accelerated Mobile Pages? Bootstrap has JavaScript for the hamburger menu on mobile phones. Yet, when I run the validator, I see errors like:
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'.
The attribute 'rel' in tag 'link rel=' is set to the invalid value
The tag 'script' is disallowed except in specific forms.
So, back to my question. Is it possible to have a Bootstrap 4 site that uses Accelerated Mobile Pages?
Thanks!
Right now you cannot use bootstrap with AMP because it inserts a lot of unnecessary CSS and AMP is optimized for performance, but you can use font-awesome in AMP HTML by including it like so:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
See the original issue on github: https://github.com/ampproject/amphtml/issues/2413
Try this bootstrap 4 CSS prepared for AMP project:
https://github.com/jupeter/bootstrap/blob/v4-dev/dist/css/bootstrap-amp.min.css
This project is based on orginal bootstrap 4 fork.
All components loaded in the CSS file are placed:
https://github.com/jupeter/bootstrap/blob/v4-dev/scss/bootstrap-amp.scss
If you need add custom components, you can add in the "scss/bootstrap-amp.scss" file and recompile using:
$ npm run amp-css
Disclosure: As #Filnor notice, it's forked and modified by me.
You can create a custom bootstrap version from: Customize Bootstrap
Uncheck unnecessary properties and export it. It must be less than 50kb. Remove every "!important" rule and put it in your site as inline css.
I was wondering this too. On the github page for the AMP project it states that
It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. These restrictions are enforced with a validator that ships with AMP HTML. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML.
So you cannot use custom JS like you are used to doing. Instead you have to build out the pages the AMP way and use custom elements as specified by them.
To get rid of error with maximal size of author's CSS, you can also do following steps when you want to use AMP and Bootstrap together:
put your entire css and bootstraps' css into one css file, lets say entire.css
Download and install https://github.com/purifycss/purifycss
use purify: purifycss entire.css yourpage.html --min --info --out minified.css
if minified.css is smaller than 50k then you can put content of this file in <style amp-custom>
if not, you can use on of online css minifiers / compressors.
EDIT:
There is unfortunately one problem that is hard to workaround. Bootstrap uses in many places !important keyword, which is restricted by AMP. The AMP validator shows this errors first when you got with custom CSS below 50kb.
As per the AMP specification you can only use inline css with a total max size of 50kb. You can use bootstrap css and components with AMP if those components do not rely on bootstrap.js since AMP dosent allow 3rd party JS as of now.
Plus, you need to remove !important wherever it is used in bootstrap css as AMP restricts the use of !important in inline css.
I know this question is old but recently (in 2021), I've found BootAMP
https://www.jssaints.com/bootamp (Bootstrap like CSS framework for AMP HTML).
Using it, it is easy to add AMP HTML support by migrating from Bootstrap to BootAMP
https://www.jssaints.com/bootamp/docs/introduction
They also provide few ready-made AMP-HTML templates
https://www.jssaints.com/bootamp/boilerplate
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 have been tasked to alter the design of a web application build around/utilizing jQuery Mobile, so that it fits a desktop browser better. I don't want to just remove all jQuery Mobile right away, but rather do the transition over time. The whole web application is using one page with a bunch of subpages, so I've made a new page using the same subpages for the desktop version, since this allows me to use different css files for the page.
My problem is that all the css I apply to the 'non-mobile' pages, gets overridden by jQuery Mobile (a bunch of css files). As I said I don't actually want to just remove these css files all at once, since I would be left with a raw html page without pagetransitions between subpages etc. - I might even want to keep some of the jQuery css in the long run, like the header for instance.
The main problem I see right now, is that a lot of the elements gets given class attributes like ui-btn, ui-select etc. without me actually declaring that in the html. This means that even thought I have a css file that defines how a button should look, jQuery Mobile somehow adds ui-btn and a bunch of other things to the class attribute at runtime - ultimately overriding my .button class or ending up with some sort of mix.
My question is quite generic, as I have a LOT of code and have no idea what to reference; how do I make sure my elements only gets styled by the classes I specifically assign?
Essentially I want to keep my jQuery Mobile, but have stuff like ui-btn as a standard css class selector (instead of this magical thing that ALL buttons apparently inherit from by default), so I would have to actually declare class="ui-btn" for the element to inherit that styling.
Let me know if this is unanswerable without some code references, I was just hoping for some general and generic tips :)
Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as soon as it loads (long before the document.ready event fires). These enhancements are applied based on jQuery Mobile's default settings, which are designed to work with common scenarios. If changes to the settings are needed, they are easy to configure.
When jQuery Mobile starts, it triggers a mobileinit event on the document object.
Try finding out where that happens in your code, and possibly stop it from happening in the case where you're in a desktop browser.
EDIT: It is most likely done in your jquery-mobile.js file, and usually scripts are linked as follows:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
Try altering this order, so your custom scripts are loaded after jquery-mobile.
link you css files after JQuery mobile files and use !important on your css to force the browser to use them like:
color: red !important;
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.