Are there any CSS frameworks out there along the lines:
Takes CSS "as it should be" as input, maybe with some additional functionality
Outputs cross-browser CSS, with all IE6 hacks in place, using JavaScript and ImageMagick when necessary.
If you're more comfortable with programming, and don't want to deal with CSS hackery, you could always try a preprocessor framework like Compass which is built on SASS. Bootstrap (built on LESS) and Stylus are also worth looking at.
Have you looked into jquery ui?
Related
We can use sass variables to store some styles and we can nest via sass. Yes they are good
but we can achieve those by ordinary css3? We can use classes and CSS selectors instead of nesting.
Is there anything in sass that we can only achieve via sass like that?
I'm eager to see the advantages thank you.
Is there anything in sass that we can only achieve via sass?
Since SASS compiles into CSS, by definition, there is nothing that can be achieved only via SASS.
SASS is merely a heavy layer of syntactic sugar on top of CSS.
mixins, loops, operators, import, modularity there are lot of features in sass which make it powerful.
There are pitfalls too, overnesting rules and inheritance. If not written properly then 10kb code will easily double to 20.
I went through an machine test where I was allowed to convert a PSD template into a HTML using vanilla css and modular css.
I tried searching for both but couldn't find something related to vanilla css.
However searching more deep I got a very good result with modular css. Here is the link.
Any thought will be greatly appreciated.
There is no difference between them rather than how you structure your css.
Think of modular css as a style of writing vanilla (i.e. normal) css.
In modular CSS, the CSS is grouped by modules. Robin Rendle wrote a good article about these css modules.
It's merely a set of guidelines, on how to approach your css architecture and name your classes.
The reasoning is pretty simple, if you use smacss, for instance, anyone that joins your team can learn the smacss principles and start working on all of your projects.
Have a look at BEM, SMACSS, ITCSS, or OOCSS.
When you're in flow, it's hard to stop yourself and make sure all the css properties you are using have the right compliance.
Is there a way to analyze css files, and see where I could have used compass mixins to maximize browser compatibility?
SassMeister is a playground that specializes only in Sass-related stuff.
http://sassmeister.com/
Of course, SassMeister lets you choose the syntax you feel more comfortable with and you even can choose the output style (expanded, compressed, and so on). Most importantly, because SassMeister is specific to Sass, it allows you to import Sass libraries (Compass extensions actually). You can even propose your own extensions if you think they should be added.
SASS has Compass (a community maintained library of sass mixins/methods).
Does LESS have any supporting libraries that can compare to Compass? Listing anything would be helpful!
Another great mini-library...
Bootstrap
by Mark Otto, Designer at Twitter
Bootstrap is a super awesome pack of
mixins and variables to be used in
conjunction with LESS, a CSS
preprocessor for faster and easier web
development.
Demo/Site: http://getbootstrap.com/
Mixins: https://github.com/twbs/bootstrap/tree/master/less/mixins
Github/Source: https://github.com/twbs/bootstrap
There are less elements, but it's hardly a collection. I agree it would be nice to have something like this.
Take a look at my compless repo. There I try to implement some features of Compass using less. Mixins are divided into categories in a way how it done in Compass' reference. Patches are welcome! :)
Here are another couple of choices: lesshat and clearless
Also, this blog post compares 3 less libraries: less elements vs bootstrap vs lesshat.
From the post, it seems like both bootstrap and lesshat beat less elements,
however depending what you need you would choose between bootstrap and lesshat.
Bottom line, if you’re looking to completely redefine and systematize
the way that you build websites, check out Bootstrap. However, if
you’re just a LESS user looking for some mixins, I definitely
recommend checking out LESS Hat.
PS:
If you're just look looking for some basic mixins, and for you - a whole library is overkill - then maybe this post from css-ticks is more for you.
I just launched {lessins}, it is a library of common mixins, similar to bootstrap.less or less elements, but with a focus exclusively on mixins (the others include some unecessary variables, that seem remnants of other projects.)
I have also organized the mixins into bundles. Check it out: https://github.com/jdmiller82/-lessins-
Old question, but right now Lots of Love for Less (3L) is far more complete and generic than Preboot née Bootstrap!
Try Preboot. It is a pretty cool LESS library from a member of Bootstrap team.
This is an old question but let me share this recently made Bootstrap3-LESSHAT Boilerplate.
The Boilerplate has the LESS Hat Mixin Library (counterpart of Compass) set up as well as the Font Awesome Iconset.
There's a new library called more-or-less which is similar lesshat but a lot faster since it does not use inline-javascript.
Just like lesshat it allows to use endless layers for e.g box-shadow or background-image.
It basically has all of the lesshat mixins plus a few other helpful functions.
.for()
.find()
.in()
.join()
.repeat()
requires Less 1.7.0 or later
Ok, so Less.js has come along, and it seems that my dreams of creating a CSS framework (especially a 'grid' system), with an 'abstracted' CSS language might be about to come true.
That is, 960 and Blueprint are great and all... but it so irked me to put style information in HTML markup, such as:
class="article grid_4 pull_2"
or whatever the syntax was :)
So, now it seems that we can do it this way:
.article {
.grid_container();
.grid_four();
.pull_two();
.last();
}
Weeeeeee!
So, I'm about to get stuck into developing this for myself -- but I'm sure there are some brainiacs out there that have already done it -- so before I get into any heavy lifting...?
Any leads?
Kindly
Daryl.
This is the CSS framework you're looking for - http://semantic.gs/
The Semantic Grid System - Page layout for tomorrow.
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
All without any ugly .grid_x classes in your markup. Oh, and did we mention it's responsive?
Brought to you by LESS.js and the creator of 1KB Grid.
I checked out less , it was a push between that and the new sass (scss) syntax, but what made me choose sass is that it has a way to turn css into scss code.
The round trip was something I definitely wanted. Once that happened, then Compass presented itself. I was going to try using something to code everything in python, but it makes perfect sense to me to preprocess the css, especially since I'd like to use HTML5, and if the spec changes, then I can tweak the generation.
BTW folks, I've started that framework I was talking about.
http://github.com/DarylAntony/lesser
I'm having fun with it.