I'm using CSS modules with ReactJs (jsx). Is there a way to create a custom snippet within Emmet or Atom to use CSS modules instead of regular classes?
Example, currently Emmet works as follows:
.title expands to <div className="title"></div>
I want to be able to create a snippet similar to:
.styles-title expands to <div className={styles.title}></div>
This actually turned out to be rather tricky. Emmet and the Atom extension both allow for customization, but a security policy in Atom does not allow loading custom filters from outside the extension.
With some nudging in the right direction (see the GitHub issue linked above) I was able to write my own Atom extension that does this.
Related
I'm trying to navigate to the definition of external classes using VSCode, notably Bootstrap. Read on for more details.
I can use extensions like CSS Peek and CSS Navigation to navigate to internal classes inside my project just fine.
I can also see what external classes exist thanks to extensions like SCSS Everywhere.
However, I cannot navigate to those external classes. This is what I'd like to solve.
The use cases are:
to easily and quickly know what classes do without looking up documentation
avoid conflicts and side-effects by knowing what you are applying
to extend bootstrap classes using sass with #extends
Thanks
I would like to embed Cofoundry's built-in administration interface visual editor in other custom non-admin pages. The idea is not to use any of the fancy attributes like [HTML], but rather be able to load the editor using low level JavaScript and HTML instead of installing yet another editor myself and use that.
I suppose it is a standard HTML editor, so given the URLs for it in Cofoundry, I assume it would be possible to use the editor's own standard documentation for embedding the editor.
So, question, which editor is it - and what are the built-in URLs (paths) to it's components?
As of v0.9 Cofoundry uses TinyMCE as the HTML editor. You'd be better off using your own build of the editor than linking to the Cofoundry source as it's liable to change.
I am using React and I really like the fact to I can write inline style directly in my javascript file. However, autocomplete css doesn't seems to work in Atom editor.It work fine with ".css" file, not in ".js" file. Is there an Atom package that would enable this feature? thank you
The scope in which snippets are working is defined in the snippet file itself. There is currently no way to make snippets work in a “foreign” scope (see this forum post for reference.)
Your best option is probably adding the language-css snippets to your Atom snippets (Atom > Snippets) and edit their scope accordingly (e.g. source.css, source.js). Alternatively, you could do the same creating a new package.
No dust-me-spider. No firebug.
I have made a project and I want to export only the CSS which has been used in the project or page. I have tried, dust-me-spider and firebug, but these add-ons grab all the CSS of the project! I need to grab only the CSS which has been used and export it to another CSS file. Does any program exist for such a reason?
Its tricky because you can't know all of the javascript renderings on a page that would affect the css. I wrote my own plugin that i could run which would extract the visible css on the page and resort the css in order of cascading hierarchy. This is useful in that i can run it after any javascript action but it still requires investigation into the existing javascript. You are welcome to use it.http://stcreative.co.uk/tutorials/css_sorter/
I recently setup django-grappelli on my first django app. While I like the way it looks I want to customize the colors, and other CSS.
From my research, it looks like I will have to use Compass but I've never used Compass before and want to double check that this is the best method before I embark on that path!
Is Django-grapelli even the right choice for some one that wants to customize the color theme?
Things I tried
Modify the CSS in the Grappelli stylesheets but they are formatted in a way that makes it tedious.
Extend the style sheet but I am not sure where to do this for the admin.
Create a custom.css but could not figure out where to put the path
Thanks for your advice!
It seems to me like Compass is just a tool to write CSS. I've never used it, but at the moment I don't see how it could make modding the admin interface any easier than doing it manually!
Whenever I make changes to the admin (I've made changes to Grappelli, like you're trying to do), I always use what you've listed as number 2. I've never had any troubles! I can try to help you out, if you'd like to try again.
What I do first is go to my Python install directory and copy the Grappelli source from Lib/site-packages. I put this code in my project directory as a project-level app. So, if you're using Django 1.4, you'll have a folder that has your project folder as well as manage.py in it. Put the code there.
Then, using your favorite web developer tools (I prefer Chrome's), figure out which stylesheet you need to modify and which css file it's in. I do this by right-clicking the element and selecting Inspect Element. This brings up the dev tools, and at the right it tells you the css file its referenced from as well as which line its on. If you open up that css file in your favorite text editor and make changes to it, it should work!
Let me know if you're having any trouble with this. I can try to help you out further.
(and, P.S., I wasn't trying to be pedantic with a basic overview of the use of Chrome's developer tools. I was just trying to be helpful by not assuming anything. I hope you don't take it as an insult.)