Looking at the Material Components Web documentation, I see inter alia #use "material/chips/styles"
When I visit app.scss – adopt-a-pup I see #import statements such as #import "#material/chips/mdc-chips";
I understand that #use is the newer modular way. Which sass approach should I use?
Could the glitch demos be out of date? Is there an example reference anywhere that makes use of both, say, mdc-chips and mdc-select?
You definitely should use #use. adopt-a-pup is very outdated. It references MDC 0.41.0, while current version is 13.0.0.
Unfortunately MDC examples are very scarce and documentation at material.io is outdated sometimes. I recommend using docs on their github repo, it is the most current.
Also some time ago I put together these two starter kits. They might be of some help in terms of examples how to use MDC:
Material Design Layout Kit for Angular
Basic Material Starter Kit
Related
I am newbie with nativescipt-vue. I need to connect identity server with nativescript-vue. I found a plugin in this repo. But its developer gives only angular example. Can I use this plugin with nativescript-vue. Do you have any suggestion? Thank you in advance.
Good news: Most of 'things' developed on the top of NativeScript are interoperable, meaning that you can swap frameworks as desired.
Bad news: There is some problems of doing so. I've looked into the repository that you reported on the question and I saw that you have to deal with some Interfaces there.
export class AuthComponent implements OnInit { //...
Dealing with interfaces in NativeScript is a little bit confusing since you have to deal with classes in both NativeScript and Java in the same script.
The lack of documented behavior of this keyword, for example, can lead to some undesired behaviors. I am dealing with this problem right now. So, be careful.
Please provide us some parts of the code that you want to transpile to NativeScript-Vue.
Also, I highly recommend you to study how NativeScript works before understanding how NativeScript-Vue works. You are probably accessing the NS docs way more than NativeScript-Vue docs in a near future (assuming that you are already familiar with Vue).
I am new to React and I just stumbled to amazing Blueprint components. However, I am unable to use it and I am confused by the installation guide. Its quite different from what I am used so far.
Can anyone explain me how to use Blueprint without Typescript?
You can simply ignore the Typescript parts. Since you are writing a React app, it needs to be compiled through Babel anyways.
I never used Typescript before and also just started to use blueprint a few days ago and was able to use the JSX components completely without any Typescript knowledge.
Just start using it like any other React components you write - or use DIVs with the blueprint CSS classes directly when necessary. Its up to you.
I am using Zurb's Foundation framework, and I would like to know how I can edit the default values of the SASS variables. I searched all over the internet but I was not able to find anything that could help me.
Please check this documentation on their site.
Under Available SCSS Variables section, SCSS variables are provided but I don't know where to place them after altering the values. I did not find much help by Googling because Foundation is not that old.
After creating a Foundation project, look for a "_settings.scss" partial that will contain all those variables.
Scroll down on this page: Zurb Foundation 4—Sass Documentation to where it says "Foundation Global Settings and Mixins" for the code in that file.
You should be looking into Sass that is already explained on their site and can be found here. I suggest you start reading the documentations for V3, Foundation 3, as those docs explain better how you can harness the power of Sass with Foundation. You can start reading here then do further reading here. Honestly, Zurb does a fantastic job of documenting their Foundation framework and all you need to know, 99% if not all, are already on their documentation pages.
jOk, there are global variables you can configure (_settings.scss), there are also default (!default) variables at a module level, you can find documentation of in the online docs, i.e. for buttons http://foundation.zurb.com/docs/components/buttons.html (scroll to bottom).
Because these variables are assigned with SASS's !default it is possible to override this in the global scope, but you must make the new variables available before the styles are declared. As in, the variables must appear in the cascade before the buttons do.
First of all many thanks for the incredible source of information that you are providing to people like me.
I am visiting this site very often and most often finding the answer I need, but this is this is the first time I post a question, so please accept my apologies if I don't fully conform to rules.
Here is my issue:
I am "playing" with Dart Editor and Polymer to try to understand if I could use these technologies in my job moving forward
I was able to import the Polymer Core and Paper components in Dart Editor and to install polymer.dart
I was able to create a simple web page with a "core-selector" and to add some Dart code to handle a click on this component
I can't find how to listen using Dart code for component-specific event ("core-activate" & "core-select" here) and how to read component-specific attributes ("selected" & "multi" here)
I don't seem to be able to find good examples showing how to use "standard" polymer components in a web app created Dart Editor
I could find material on how to create my own polymer components using polymer.dart but I would just like to use standard components
I understand both Polymer and Dart are young but I can't imagine the clever brains at Google not having a solution or plans on this.
Regards and many thanks again.
Sebastien
The problem is not that Polymer and Dart are young. Dart is quite mature, Polymer is not even beta but also not so young anymore. The problem are the core- and paper-elements. They are very new and developed in JavaScript and the Polymer.dart team just created a code generator that wraps the JS core- and paper-elements in Polymer.dart elements. This process is only available since a few days and there are several issues which are yet to be solved.
I think you should provide a concrete example in your question of what you can't get working. Basically Polymer.dart core- and paper-elements work exactly as other Polymer.dart elements. So it's hard to know what to explain.
I've been looking around at some CSS frameworks and I really like the look of the Groundwork CSS framework because it has a nice responsive layout. However I downloaded the source code and I'm a bit lost. I'm used to using Twitter Bootstrap and and I really love it's documentation (the instructions on scaffolding are helpful to beginners), bit I don't really know how to use Groundwork.
How do I get started with using the Groundwork CSS framework?
Groundwork, like Bootstrap, is a web-development framework, not just a set of CSS docs. They both include a set of style-sheets, java-script files, misc icons etc, and one or more HTML docs to bring it all together.Installation is simple; download the framework, rename the folder to "MyCoolNewSite", start editing.
As Michal stated, the "index/html" doc that comes with the framework has lots to look at to help you get started. They also have what looks to be pretty solid documentation on their site, starting here: http://groundwork.sidereel.com/?url=grid
The site has now changed to: http://groundworkcss.github.io/