My team hates a convention that we need to use. We need to export all css in alphabetical order, but we can work in our SCSS and we don't need to share it, so what its matters is css being orderded.
There is a way in gulp (we work with gulp-sass) to reorder when css is processed?
Note: I think alphabetical order is horrible even to readibility, its better to group by type (eg: box-model properties, text properties, ...)
You need
gulp-csscomb
Probably with this option after you have your css:
.pipe(csscomb({"sort-order-fallback": "abc"}))
See sort-order configuration for csscomb
Related
Is it possible to output a selector that isn't compliant with CSS standards? For example, I want to use this selector:
Button < Icon {}
But sass complains because it doesn't know what to do about the <. I'm thinking there has to be a way to output the selector without it being parsed by sass.
Thanks
sass eventually will be parsed to css and < is not valid css operator. This < fake operator would be an attempt to select a direct Parent from a given child, like > selects a direct child from given parent. CSS doesn't allow that. As its name says cascading style sheets, you go top from bottom, you can only select children, siblings at best, but no parents.
Preprocessors let you write easier styling with function, mixins, cleaner syntaxes, but dont allow you to violate css basic rules, you cant go around it.
We are using Quill for basic formatting (Bold, Italic, Link, BlockQuote). However Quill.min.js is the largest file that we've in our page.
We are looking to cut the size of the file by including the necessary modules only (for e.g. remove Syntax and Formula).
What is the way to get them removed? Do we need to setup the environment as described in Development page? Would it be possible to comment or remove the codes in quill.js? Appreciate any guidance
You can use quill.core.js and quill.core.css instead which will not have extra modules like Syntax and Formula. These files are not minified for you however. If you want to customize further then you will have to build Quill yourself.
Is there a way to use sass/scss with Dojotoolkit ?
I've searched for any documentation, tutorial or references but couldn't find any.
It depends on what you really need to do.
Generally Dojo Themes like Claro are based on LESS CSS preprocessor, Dojo Flat instead use Stylus.
So if you need to modify or fork Dojo Themes you should stick to LESS or Stylus.
If instead you do not need to modify a Dojo Themes and just simply need add your CSS for anything else you could use with no problem SCSS/SASS.
I would suggest in that case to process your styles using a separate "tasks", example you could use gulp-sass or similar.
So I want to use Lazysizes (lazy loading responsive images). Included in my Grunt stack is Responsive Images Extender, which outputs responsive image code (srcset) from simply including an "img" tag with a "src" attribute. Lazysizes requires the "data-srcset" attribute in replace of the "srcset" attribute, however. I added a script to my page that changes the "srcset" attributes to "data-srcset" attributes, but this isn't ideal as images are are already downloaded at runtime. It would be ideal if I could change the tags with Grunt, as there is no advantage in changing them live.
This seems like a very common thing, but I cannot find a good way to do it. String replace doesn't seem like an ideal solution, since it can cause problems if I ever use "srcset=" in my code.
I gave the grunt-responsive-images-extender a major makeover and added the possibility to change the attribute name of srcset to anything you want (data-srcset in your case) via the srcsetAttributeName option.
There is a grunt tans called dom_munger. With dom_munger you can change HTML attributes and do a lot of interesting stuff; however I cannot find a way to change an attribute name to another thing. Perhapse you can have a better luck checking it.
I have been working on a MVC3 new project where I wanted to introduce the concepts of dynamic themes.
Instead of creating a bunch of .css files and dynamically linking to the
right one, I wanted to use a <style> section in master <head> section
that specifies the values to use for the selectors and their properties.
The values would be pulled from a database and written to header section in style,
look like this:
<head>
<style type="text/css">
.testClass { color:Purple;background-color:LightGreen; }
</style>
</head>
Not an answer on how to achieve this end, per se, as much as a suggestion that you reconsider. I have seen this approach taken firsthand several times over the years, and it invariably ends up first with writing a proprietary tool to edit the database themes and subsequently with an expensive rewrite to extract all the themes out of the database and into proper css files.
One typical reason to go down the path of putting styles in the database tends to be a desire to allow a given style to be "overridden" on a case-by-case basis - for instance, in an application service provider model, where one customer wants to change only one or two of the default styles. However, the "cascading" in "cascading style sheets" allows this exact behavior, without abandoning all the goodness of proper css and the associated tools - as long as you sequence the stylesheets in the correct order in the page head (e.g. "maintheme.css" first, then "customerX.css"), you only need to redefine the styles of interest in the customer's stylesheet and they will automatically override those in the main theme's stylesheet (assuming the css selectors otherwise have the same precedence).
A related, but slightly different reason given for going with database-driven stylesheets is to allow end users or business owners to edit the styles themselves. With a few exceptions, that sort of feature turns out to be less used and more difficult to maintain in practice than it seems when drawing it up. In this case, the number of styles being customized is theoretically quite small - presumably entirely constrained - and you'd be writing a proprietary tool to allow them to be edited, regardless, so again I would suggest simply writing out the customized styles to a css file on a filesystem, rather than a database (or as a blob to a CDN, etc.).