I want this:readthedocs
Instead of this: material
I haven't seen anything that would help with this in the material for mkdocs nav setup
There's a stack of good looking themes available for MkDocs.
Choose between the built in themes: mkdocs and readthedocs. Select one of the third-party themes listed on the MkDocs Themes wiki page, OR build your own.
Mixing layouts from different themes has a learning curve.
Asa first step you'll need to install and try the ReadTheDocs-Dropdown.
Related
I got stuck.
Planning to build a page with a grid which show you avaialble information about each of the square.
As example, in real estate niche, let's take this example.
Having 'a lot' of lands divided by parcels, and once you hover on each parcel, it gives you different details and the form.
I'm stuck at how to build and render the lot page on the web?
Few of the libraries I'm planning to use are Popper JS.
something similar i would like to build
Example from the screenshot: https://anonym.to/?https://crminvermid.com/sistemas_active/crm/if/indexBase.php?id=G08xwkfJW8P52&rd=&rg=&clvde=zXDV09Lh7zD6
I'm trying to understand how to best work with Angular-material theming:
Google's giving out a wide range of color palettes,
And also provides guides on how to easily switch between palettes.
I've seen this question, And found a bunch of tools to generate a palette around a main color (tool1, tool2)
Although when getting a custom design from a designer, where different colors were picked, I find it difficult to implement design colors as a complete theme, as there are too many variables to take into account (such as hover shades, ink-ripple shades etc.).
My question is:
Can I as a developer create a well enough eye pleasing theme from
every design that is delivered to me (either by JS theming, or CSS
overrides), or are there any restrictions to take into account?
Should the designer take some guidelines into account when
creating the design?
Should we give away flexibility in design by going with one of
Google's pre-defined palettes?
**
Edit - 05/2017:
I've decided to completely turn off theming since I couldn't fully understand how to customize it to our needs.
Im now injecting variables through webpack into SASS files and the outcode is much more sane.
**
No, not currently. "Well-pleasing" is a broad, opinion-based term that is not decided by logical algorithm. I actually have tried to do exactly this for months before I finally learned enough about UI design to know it wouldn't work.
Google's material design guideline is all that's needed for a designer to create a Material Theme. It's not that long and a typical designer can skim through it in about an hour.
No. Google's pre-defined palettes are meant to be used by programmers to quickly create sites with acceptable interface. Unless you work specifically for Google, there's no reason to limit the designer's palette. They are totally fine as guidelines, though. See Dark Material UI, a design concept based on Material Design but doesn't adhere to many part of the guidelines (for example it uses colors not included in Google's color palettes)
The approach that we use is simply changing the href of css file in your html head section. In this case you have standalone css file for every theme, and when you need to switch, you simply modify href.
No need to use additional markup as google recommends, because it will be to complicated to switch between themes, especially if there lots of themes.
You can look at an example here:
http://docs.telerik.com/kendo-ui/styles-and-layout/how-to/change-themes-on-the-client
There is a live example available. And material theme as well.
I need to add two sidebar drawers(left side and right side) for my design using Google MDL.But mdl layout doesn't support for add two sidebar drawers.How can i do this ?.
First of all, having two sidebars drawers is a bad idea usability-wise:
You should consider the following options as per the Material Design Guidelines on top-level view strategies:
Focus on a single view with embedded navigation
Use tabs to switch between a small number of equally important views
Manage more complex structure through a left navigation drawer.
If you have multiple views that would require you to do this, your better of considering tabs.
See UX designers: Side drawer navigation could be costing you half your user engagement
.....if your app has multiple views that users will engage with somewhat equally, then side navigation could be costing you a great deal of your potential user engagement, and interaction with those part of the app accessed via the side menu.
Was researching 2 drawers myself when I came across this question. This is possible, and a good design in certain applications and is actually in the roadmap for material design lite version 2. Please read the Github thread here https://github.com/google/material-design-lite/issues/1597
There are 2 hosted examples of this in action the best is in use in Rich Media Gallery filter option, that is a Google Material Design Showcase.
http://richmediagallery.com/tools/template-database
The other example is a fiddle
I am working with ExtJS 4.1.1a and I am trying to create a new theme for both a "tabbedPane" and a normal Panel with and "Accordion" layout. I am having trouble changing the colour of the headers for each. That is to say the tabs and the background for the tabs as well as the header background and font colour for the accordion panel. You can see the current setup at http://robroscoe.ca. I am trying to get the headers for both to be black background with white text and maybe the selected or active tab to be the mat purple that is used in the breadcrumb portion in the navigation bar.
It should be noted that I am attempting to set everything up within ExtJS's SASS preprocessor and any assistance in modifying this instead of the CSS directly would be very much appreciated.
If you haven't yet, you should really start by familiarizing yourself with the approach to theming in ExtJS 4 - http://docs.sencha.com/ext-js/4-1/#!/guide/theming
Once you have a good understanding of the process, the easiest way I've found to theme specific components is by looking through the documentation. With the newer documentation, a lot of the CSS mixins are included along with the API for the components, so it makes it pretty simple to figure out how the default styles are being applied, and then go from their to override/create your own. Here's an example of the Ext.tab.Tab CSS mixin: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Tab-css_mixin-extjs-tab
In the past I have used a lot of ExtJS to make dashboards. One of my favorite features is the full-screen viewport with border layout which helps you to split up a dashboard into panels on the left, right, top and bottom, without creating scrollbars everywhere. see e.g. these examples.
Is there a JS library or jQuery plugin that does just this? I am making a dashboard and want to split the screen into panels, but ExtJS is a bit bloated and overkill only to use for the boarder layout.
Ext JS is a great solution for this but if you are looking for something else then the jQuery UI Layout Plugin may be the option you want.
Example:
http://layout.jquery-dev.net/demos/simple.html
Project Home Page:
http://layout.jquery-dev.net/
Twitter Bootstrap provides help for the layout but you have to follow a certain design and am not sure it manages fullscreen apps with no scroll.
I think it's worth a look though.
You may look at Dojo which now integrates well with jquery and has nice widgets (tabs placed on the left for example, grids) and a good layout system.