Is there an existing Material Design Lite template that provides a rendering similar to Google Developer Console Help?
You'd do best to learn the Materials Grid, and check out some of the individual components. Everything else will flow from there.
The example you have should work fine. Just adjust the columns to allow for your sidebar. See Layouts
The primary content can be housed in a card, which will provide all the spacing and margin you are looking for, as well as have a configurable shadow (e.g mdl-shadow--2dp) See Cards
You can compare against the Text-Heavy Webpage Template for how to nest elements within cards.
Related
I am starting to build my angularjs material mobile site. I am taking an existing desktop site already built and making it responsize for mobile.
I added the following tag in my header HTML code:
<meta name="viewport" content="width=device-width, initial-scale=1">
Upon refreshing im noticing that everything now appears to be zoomed in and font size had increased. Ive been adding style tags to reduce the font size manually but its getting really teidous and this site needs to adjust to tablets as well.
Cant seem to find any documentation that shows best practices on how to handle this. Am I suppose to play with the intial-scale value in my meta tag and lower it until I find a sweet spot that would work ith all my devices? Or am I suppose to play with the CSS and lower the font size of all components manually?
I am a bit confused on what best practices are for this. The AngularJS Material website has no mention of viewport issues. Would anyone be able to assist or provide some insight?
AngularJS Material works with breakpoints, as most style frameworks do.
You can find a reference for the breakpoints here: https://material.angularjs.org/1.1.5/layout/introduction
If you are new to responsive design, then you should start by some basics, as in what actually is a viewport, what does it mean?
The browser's viewport is the area of the window in which web content
can be seen. This is often not the same size as the rendered page, in
which case the browser provides scrollbars for the user to scroll
around and access all the content.
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
In your meta tag, you define the viewport behavior, and what you defined is pretty much the standard to go by.
The reason why your font-sizes are changing is most likely because the app had initially styled them one way without a defined viewport, and now that your viewport has been defined, you're seeing a different scaling.
Now, another very important point I noted in the beginning is breakpoints, what are breakpoints and how do we use them? And to address a part of your own question, what's the best practice?
If you are familiar with classic CSS, then breakpoints can be referred to as media queries.
Media queries are useful when you want to modify your site or app
depending on a device's general type (such as print vs. screen) or
specific characteristics and parameters (such as screen resolution or
browser viewport width).
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Media queries are used to define style changes, based on a given device width (and/or height). In most cases, you go by the width definition alone (it's also what you'll see as referred units in various style library docs, such as AngularJS Material).
The exception to only defining media queries by width, is when you want to be very specific towards tablets. This is because bigger tablet sizes collide with desktop breakpoints, which is usually standardized to begin at 960px (sometimes you'll see 958px or 959.8px).
Now, what is considered best practice?
The best practice for responsive design is commonly referred to as the "mobile first" approach/design. You start by designing for the lowest screen resolution you want to support (280px for very outdated devices, 320px by today's standards) and work your way up.
Mobile-first design is a key ingredient to successful product design.
Designing for the smallest screens first, and then working your way up
empowers designers to focus on the core functions of their product.
When you focus on the core of your product and strip away the rest,
you are able to pinpoint the most important UX components of the
product.
Source: https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-first-design/
Extra: https://anglestudios.co.uk/blog/why-mobile-first-web-design-is-becoming-more-important/
You can find various articles on the mobile approach very quickly by doing a very simple Google search query if you want more references etc.
My advice, would be to familiarize yourself by using the defined breakpoints in AngularJS Material, and use the same breakpoints in your own custom CSS if you want to apply more custom styling that's not easily achievable by native uses of AngularJS Material.
This way, you'll learn the basics, get familiar with the concept, and then, in the future, you can start thinking about incorporating things like NativeScript with Angular, which is what you'd ideally be using in a mobile app development environment.
Today we’re happy to announce an exciting new way to build web and
mobile apps with Angular and NativeScript.
First, some background: since the beginning of Angular, you could use
NativeScript with Angular to build mobile apps.
NativeScript is an open source framework for building truly native
mobile apps with JavaScript. It lets you use your existing Angular
skills, and as a result you get a native UI & performance on iOS and
Android.
Source: https://blog.angular.io/apps-that-work-natively-on-the-web-and-mobile-9b26852495e7
Link to NativeScript, here.
Happy Learning & Coding!
I read elevation section in the material design docs and there are various issues for the implementation.
I try understand, how this elevation can be implemented (html+css+js).. I have little experience with html+css , so I will be glad of any hint that will clarify the issues.
It is especially unclear how the list item is excluded from the list and expanded to the full screen while the other elements remain in place.
It is also unclear how the animation is implemented first elevating then expanding.
May be this will be useful for someone
Container transform spec
Material elevation
Performant Expandable Animations
requestAnimationFrame boilerplate with tutorial
Google Material Design Easings and spec
bezier-easing by JavaSctipt
How to create card tile scrolling grid like google plus, with three columns? I am using Material UI, but I cannot find such a functionality? I have tried standard Material ui grid, but it is not working.
What you're looking for is called a masonry grid. It's currently impossible to do so in pure CSS, even with the new grid layout mechanism ([1], [2]).
Material UI doesn't offer an out-of-the-box solution for masonry grids.
You might be interested in some of the many JavaScript libraries which arrange elements this way using a custom script. The most popular one which immediately comes to mind is Masonry Desandro. An alternative is Isotope, a payed library for commercial use, which also has a mode for masonry layout.
I am trying to create grid with advanced features(filter, re-sizable, scrolling, fixed header, row formatting, cell formatting) using angular js. I have read the following grids documentation.
ng-grid
ng-table
smart-table
And, ng-grid has many features and perfect for our requirements. but I want the following 2 options also. is it possible to achieve from ng-grid?
Formatting
We have number of columns in my grid (approx 40). Most of the column data need to be formatted in cell. for eg: Adding link, change date format, Reducing length of the content with tooltip..etc., Here, I can not do this stuff inside views. But this one is handled perfectly in ng-table.
If I can not do this in view, then my javascript (using callbacks) code is going to be increased. I don't want this way because angular perfectly do dynamic views.
Also, I want Header formatting, filter formatting, row formatting should be done inside views.
Responsive using Bootstrap
Our application should work in all devices. but ng-grid not working as responsive if I view my application in tablet devices.
I'm working on the following grid angular grid - has the features you mention. Similar to ui-grid in it's basic interface, but approaches things differently, including how the grid is customized. You can add css styling at the column and cell level, as well as providing your own custom cell renderers for complete control.
Asik,
The project Angular-UI renamed the ng-Grid to UI-Grid and the website changed to http://ui-grid.info.
Now it's pure AngularJS, without jQuery, use Bootstrap 3 LESS and it's full features that fill your requirements.
Take a look in the page of Tutorials to check the power of features.
need high quality datagrid with:
pagination
CRUD - adding/deleting/updating rows by users
other nice options such as filters, optionmenu, toolbar, etc.
there seems to be several very good options in Javascript (Ext-jS, several Jquery plugins/widgets (JQGrid, Datatables, at least 6 more good open source components...) which are very well designed, implemented, documented and professional grade (and free).
however, everything i've seen to add above features to flex/AS seem to be hacks...
(there is one solution - flexicious - it isn't anywhere as good as some of the Javascript datagrids - not free either)
can someone point me to any good solutions in Flex/AS (like Javascript Datatables or JQGrid) ?
thanks.
You seem to want the world for free (AKA: Well designed, implemented, documented, and professional grade). Why would anyone go through that trouble when Adobe provides one in the Flex Framework?
Have you looked at the Flex DataGrid? How about the Advanced DataGrid? Those are your only two free options.
Pagination is a bit tricky. It depends what you actually need. If you tie it to a backend service such as LiveCycle or dbHibernate, then I understand the Flex DataGrid will do "Lazy Loading" which, basically, loads up the data as the user scrolls. To me that is good user experience for pagination. However, if you want a row of numbers, similar to what you might find on a traditional web page, you'd be stuck implementing that yourself.
Updating rows is supported through the use of itemEditors. Deleting rows can be done very easily. Creating rows is a bit more complex if you want to do it "in the grid" otherwise it's just a form you have to create.
Filters (and sorting) are almost trivial if you use a collection class as your dataProvider.
I'm not sure what you want in an option menu or a toolbar, but you can create a context menu in an itemRenderer with Flex for an option menu. And you can tie a menu control to the DataGrid.
You mentioned Flexicious, which is a commercial option.
Have you checked out ElfGrid, which is also a commercial option.