I am a beginner to Pure CSS framework. As per my requirement, I don't want to include normalize css in it. I guess normalize is available in one of the Pure CSS module (base). How can I do it?
Related
I am currently developing a web application. I am using Bootstrap-vue in frontend. Does Bootstrap has feature in which I can create on-the-fly class? Tailwind has it . I tried searching it in the internet but no luck.
Here is my case:
Color values are save in the database.
Every time the page loads, I will fetch those colors and create class based on their colors
Your help is much appreciated. Thanks in advance.
Bootstrap is not really an utility-based CSS framework, hence there is nothing similar to Tailwind because it's not the mindset of the tool.
Also, even if this kind of code exists in Tailwind, it can become funky pretty quick and the best thing is still to write some bare simple vanilla CSS code alongside your template to get what you want.
You won't get any performance benefit by using an arbitrary value anyway and hence it should be used for exceptional cases anyway, a CSS declaration will be far more cleaner.
Feel free to create global CSS variables in vanilla CSS for your use case.
I'm looking for hints to understand this concept. I can't wrap my head around it and it's a bit chaotic for me right now.
I'm working on a project that uses storybook, and I'm now importing old components into the new design system. I see that in the old components the component file always has a section where several classes are defined.
Now my question is: Why do we need CSS classes if we can pass custom parameters when writing the story in the .stories file?
This is probably a silly question but well, I'm stuck.
Thank you!
I develop my own vue components library, and this components have a lot of texts that needs to be localized. vue-i18n doesn't support this, because it should be attached to Vue (e.g. Vue.use(VueI18n)), but in case of component library, it will result in conflict.
I need to have independent translation files in my library, totally separated from my application (to prevent conflicts)
I'm struggling to find any answer to this question in other sources, and I hope someone can give me example for this case. Thanks in advance.
Well it really seems that vue-i18n is not tailored for use in component libraries for reasons you are mentioning (attaching itself into Vue.prototype + conflict with user's code).
I don't know what features of vue-i18n are you using but if it's just simple translation, it seems rolling your own custom solution with an option to plug in the i18n library of user's choice would be the best. It's not that hard. Most of the component libraries are going that way...
You can take a look at how "big guys" do it - in this case Vuetify.
Docs
Code
What is the most elegant way to get a riot based UI today?
i'd love the following points to be addressed:
A proper code-mapping for easy debugging
A good way to bundle the application (so far i used Webpack and JSPM)
It would be lovely if it would work elegantly with Typescript.
Is it best to use Tag files, or straight JS? If the later, would it be better to use a class that inherit from riot's tag class? If so, can i place the template code in a different file?
Future compatibility: i saw that there's going to be a change (that "export default" thing) - how would you recommend to write the code for the smoothest migration path?
If you have more items for consideration - please add them....
Thanks for asking these questions. I have tried to answer to all your questions hoping they could be useful also to other Riot.js users
A proper code-mapping for easy debugging
the riot compiler generates simply javascript code without modifying too much the structure of your original source code. Any modern browser should be able to provide with debugger breakpoints and console calls all the debugging tools you need. Check for example the stack trace of this error you don't need much more to figure out where it's coming from.
A good way to bundle the application (so far i used Webpack and JSPM)
In this repo we provide 3 different javascript bundle examples: rollup, webpack, riot-compiler. I personally prefer rollup but you can (and should) use whatever works best for you and your team.
It would be lovely if it would work elegantly with Typescript.
The riot public methods are already available as Typescript interfaces:
- https://www.npmjs.com/package/#types/riot
- https://www.npmjs.com/package/#types/riot-route
I am not a typescript user and that's why I will not invest time in making examples in a technology I don't use but PR are welcome
Is it best to use Tag files, or straight JS? If the later, would it be better to use a class that inherit from riot's tag class? If so, can i place the template code in a different file?
I recommend you to just use Tag files because riot was designed as component library and it embraces completely the philosophy of components composition vs class inheritance. If you have code you share across several components you can either use mixins or import it with your bundler directly in your tags see for example
Future compatibility: i saw that there's going to be a change (that "export default" thing) - how would you recommend to write the code for the smoothest migration path?
Riot 3 will be not compatible with Riot 4. (that will be a full rewrite) I can't recommend any best practice to make your code portable to Riot 4. Remember that Riot 3 will be still supported and your code will run even on IE9 for the next 10 years. Once riot 4 will be released and the API will be stable I can provide more hints about a migration path.
Can someone explain why I would want to use the less.js script along with its stylesheet? I don;t understand the purpose and its advantages. Thank you. Erik
Less.js is a CSS pre-processor, it means that you will be able to write your in style using the Less pre-processor languages in a *.less file, then Less.js will compile it into pure CSS.
CSS pre-processor comes with a lot of powerful features such as: variables, mixins, nested rules, operations, imports and a lot more.
With Less.js you have two options:
Running Less at client-side: write your styles in Less then include the JavaScript pre-processor: Less.js.
Running Less at server-side: write your styles in Less then run the pre-processor using Node.js or Rhino, and in other cases you may use some ports like DotLess.
If you have potentially large Web Interface Design (complex layout, sprites, multiple navigation, several forms, etc...) then you should consider using one of the popular CSS pre-processor like Less.js or Sass. They will help you a lot.
Keep in mind... there are big project build on top of CSS pre-processor, Twitter Bootsrap use Less and Compass is a great framework that will kill your aches related to cross-browser issues concerning inline-blocks, clearfix, box-shadow, etc...