I'm using compass.app from compass.handlino.com and I'm wondering if it's possible to use the Susy responsive grid system without have to use the command line.
I chose Compass.app because it allows me to use SASS and SCSS and watch files without using the command line, so i'd like to know if its also possible to use Susy.
I've searched everywhere and I haven't been able to find a concise answer. Can I use Susy with Compass.app for windows, and if so How?
Thanks
Yes, you can use compass.app or fire.app create a susy project:
Create Project > susy > project
Screenshot:
http://d.pr/i/t4XN
or add #import "susy"; in your scss file directly.
Related
The website has a blog and I want to make a font a bit larger. How do I find the right CSS to change?
I used to do it in WordPress. You would just go inspect element, find .body and change font-size to 16px or whatever you want.
In Magento2 everything is in line 2.
Answer: You need to install gulp. After you install gulp you have to find where he stores his CSS. After that you need to run gulp so he can process it and viola.
The answer to your question is :
You should not edit/modify files within pub/* or vendor/* directory.
Pub is for deployment and vendor is for default structure, which you
override via your template or custom modules. Instead:
create a new theme inside app/design/frontend/{vendor}/{yourTheme}/. You can use Blank or Luma
theme. You can also create new theme which inherites from Blank
(inheritance is defined within theme.xml). If you are already using
some theme then skip this step.
edit .less within your theme so the changes stay visible and don't get replaced when clearing the cache or upgrading the system.
Use grunt to compile your .less into deployment files.
You can also setup sourcemaps to pin point your styling within the theme .less files so you can be more productive.
See here: https://magento.stackexchange.com/a/96480
Personally i would advise you not to modify an installed theme, because after an update you will probably need to do it again.
If you know some CSS it should not be hard to make it in another theme.
Does it help ?
Solution: You need to install gulp. After you install gulp you have to find where he stores his css. After that you need to run gulp so he can process it and viola.
I would like to have SVG's written inline in the CSS. In other projects I did this using https://github.com/haithembelhaj/sass-inline-svg in the grunt task. Works fine and I would like to use this solution in a project (Angular), which is built with Webpack.
Important is, that i have to change the colors (stroke, fill) via CSS.
Does anyone know if & how I get this in or if not, if there is an equivalent solution as Webpack plugin?
At first, I don't care much about my project's package.json, with the time flow, it become more and more complex and dirty. it's hard to handle manually.
so, is there any plugin or tool to beautify my package.json file?
The easiest would be to use your editor/IDE JS/JSON formatter. For Sublime Text 2/3 that would be https://packagecontrol.io/packages/JsFormat
Alternatively, you can use an online tool like https://jsonformatter.curiousconcept.com/
The easiest way to code in JS is by using Visual Studio Code (IDE). It has all the formatting tools required to Parse JSON properly, auto indent the code and IntelliSense which help in writing JS easy are already present in it .
I've created both a Basic Express 3 project and a Starter Express 3 project in Visual Studio 2015 Community Edition and I notice that, although the .styl file is where I'm supposed to write my styles, there's no syntax support / IntelliSense / coloring.
Web Essentials 2015.1 is installed but doesn't seem to bring anything extra to the table in this regard.
Can I either
make this Stylus support work out of the box for the templates or
disable this particular css preprocessing altogether in favor of simple css?
because as it stands now, this is killing productivity.
Removing the .styl file will break the file watch and will avoid the preprocessor compiling a css file based upon the .styl file.
You can now simply use standard css or add e.g. a LESS file instead.
It was a straightforward answer to a straightforward question, but one that might prove useful to someone.
I've been playing with haml and sass and generating a flat site with staticmatic from the command line.
Has anyone been using an ide for this?
I have the Apatana studio (RadRails) plugin installed and it has haml & sass highlighting out of the box. For this site I just want a lightweight script project (no rails).
What type of project would I use, and how would i add something so i could for example, right click the project folder in order to run
staticmatic build [my-project]
(or other) to generate the site from the haml + sass?
I like staticmatic as I can use ruby libraries as helpers.
Happy to take suggestions about any editor. But i am also keen to stick with one editor for everything. (also WTB auto complete).
Cheers
You can run rake tasks from the RadRails IDE, though I didn't manage to get it work. Ruby is probably right choice for the project type. I don't like IDEs because they complicate and slow things down. So my choice is normally Textmate + terminal.
Take a look at Rakefile in this project: https://github.com/adamstac/staticmatic-bootstrap
This isn't exactly what you're asking for...but take a look at a tiny script that I wrote. It will watch directories of your choosing for changes in SCSS and HAML and compile them to html and css. You could make some minor edits to watch.rb if desired, run this in a terminal, and have the site generated without even having to run a command.
PS - if you decide to try this out, you'll need the fssm gem from github or rubygems.org.
A Ruby or Web project type would be most fitting, though I don't think it would matter which in this case.
You can achieve custom commands a number of ways...
You can write up a Rake task in the project Rakefile as Heikki suggested, and then right click and use the Rake menu (as of Studio 3.0.2) to launch that task, or run it inside the embedded Terminal view.
You can write/edit a custom ruble and add a command for launching staticmatic. See http://wiki.appcelerator.org/display/tis/Executing+an+External+Command
You can go the Eclipse route and create an "External Tool Launch configuration" under Run > External Tools. External Tools configuration... > Program. There you can set up a launch to execute some program (say the ruby interpreter or staticmatic script itself) and pass in the argument. Then you can use the run drop-down menu.