Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I was wondering if there are any kind of CSS libraries like a Yahoo CSS Library?
Basically I am looking for something akin to JQuery but for CSS instead of JavaScript.
There are CSS frameworks.
There's really not that much of a reason for a CSS library / framework (in one's opinion) as everything you'd be doing is specific to your application's style (Cascasing Style Sheets).
However, there is something I use alot (or the designers I work with), made by Eric Meyer called reset which is a nice tool (as it homongenizes the styles to be almost the same in all browsers), however it does force a rule upon every element on the page (which can slow stuff down sometimes). Here's the link - http://meyerweb.com/eric/tools/css/reset/
I guess you either mean CSS frameworks (I like blueprint) or something like Sass, which is supposed to make writing CSS easier.
I think Blueprint is the nearest you’ll get to a CSS library, outside of the YUI stuff.
There are also standalone grid systems that make laying out your page easier, e.g. 960.gs
Because CSS isn’t a programming language, there isn’t really much scope for abstracting out common tasks. It’s very difficult to really isolate one style from another.
What I have found useful is looking at the CSS in CSS frameworks like Blueprint, to see what they do, and how they do it. Then do a slimmed down version of that for whatever site I’m working on.
CSS is not executable code, so what do you want a library to do?
Using a CSS framework will only truly help if your mindset and needs align with those of the framework creator.
Personally, I think that something like SASS which allows you to generate whatever style of CSS you want, with nifty features such as variables for storing colors consistently, is the best thing to use for larger projects.
There are not really CSS frameworks. It's just a buzzword. A better name is "themes" or "look'n'feel".
jQuery has also several themes in its UI library and you can even roll your own.
To not reinvent the wheel, I would recommend the book Pro CSS and HTML Design Patterns.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 10 months ago.
Improve this question
I've started to look into modern popular css frameworks such as tailwind. The "paradigm" in these frameworks is writing all the css in the html essentially applying classes as properties. E.g. If I wanted a title to be have bold red text, I could write:
<h1 class="font-bold text-red-400">Title</h1>
But while this may make it easier to write CSS in the short term, it seems like a really awful strategy of going about writing CSS in the long term. What if I have 20 different titles and I decided that I wanted to make them blue instead of red? Then I will have to edit the html 20 times! If I instead just used the classic approach and wrote:
<h1 class="title">Title</h1>
...
<style>
.title{
font-weight: 700;
color: rgb(248 113 113);
}
</style>
I would only have to update the css once to make all the changes. Although it's a bit more verbose, this surely scales much better. In fact, if I remember correctly, wasn't inline css discouraged not too long ago? Wasn't this why elements like <center> were starting to be phased out? And tailwind is used on large websites---so there must be a reason why people prefer this method. Does it in some way scale in a way I am not understanding?
The only true benefit I can really see are offering an out of the box responsive grid, but everything else seems much more efficient to do the traditional way.
The main pro that people have for using something like tailwind is the utility class usage explains more about what has been done to an element, then a random class name could. This makes it easier to onboard new employees because they can just get a quick grasp of the utility classes, and then while looking through the HTML understand what all is being done to something, and make changes to specific items without worrying about changing something else unintended. The cons usually are what you're saying, it makes it really hard to make style changes to many things, makes HTML code look gross, and requires an extra layer of learning all of the utility classes.
In the end I've found that most people just use tailwind as a quick way to get something rolling, and build a prototype, but once something has become a larger project it's time to shift over to something better. Overall I've just found a pretty large hatred for tailwind across the internet.
This article by the creator of TailwindCSS talks about the cons of semantic CSS classes. One argument is that semantic classes are a lot harder to maintain that it seems to be and using utility classes such as in TailwindCSS is easier to maintain than it seems.
And as for the specific points you mentioned, Tailwind aims to take best advantage of the reusability of components in modern frameworks such as React and Vue, so you don't end up changing the css of 20 different titles, but just one title component that gets reused 20 times.
A difference between this approach and inline css is that using utility css classes means you have a pre-defined design system with consistent differences between classes, no magic numbers and so on.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I had a conversation with my CTO regaring using CSS Grid, and the question that I heard the most was “Why use grid, that’s not supported in old browsers if we have to write flexbox fallbacks anyway? Why don’t we just build with flexbox?”
And it got me thinking. A big advantage of CSS Grid for me is writing less code. But if I have to write fallbacks, I’m effectively writing grid code AND flexbox code, which is more work. So that argument kinda makes sense I guess?
What would you answer to that?
Here is some arguments why.
You could do a lot more with design. Think about all the workarounds you need to implement in order to have something simple as 100vh... Your designers will be happy if they have you on their team.
Lot less duct taping solutions, see above.
New features makes your code better, maintenance will be a lot better, you code in general will be more clean. This actually means less work in the feature.
Performance, browsers that support new features will have lot less code to use, this is not true ofc for every new feature out there.
More work with fallback solution, yes, that might be true. But if you are always writing the same fallback solutions to the same features then you are doing something wrong, search the web, there might be a solution already there, if not make your own internally and reuse it on other projects, thus you will have to make a fallback solution only once.
You want your developers happy, if there is a way to use new features (and there is almost always a way), you should use it. Motivation kind of a thing.
If NOT then those features will never get used anyway since people will stick the old ways thus there is no need for browsers to implement in the new versions because guess what no one is using those new features thus we don't need them. But we all know we need them.
New features will eventually becomes standard (if we actually use them), you want to have team that is already proficient in those new technologies, thus you can sell yourself better to the client.
As for grid css layout, check this one --> https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement
Also, this kind of question is better fit for the Quora or something similar, not stack.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm working on a little html/css framework that I can use for most of my websites, at least to have a basis to build on. Here's what I've been using so far:
CSS framework
Reset.css - I use the one by Eric Meyer, www.meyerweb.com.
Typography.css - All main typography styles for the site (from blueprintcss.org)
Forms.css - basic form styles (from blueprintcss.org)
Wireframe.css - Here I set up the wireframe for one, two and three columns plus a header and footer. I used the Holy Grail technique, and implemented it so that by setting a class of 'onecolumn', 'twocolumns' or 'threecolumns' to the container div I can switch between the three.
Basic techniques
Some techniques I have some pre-fab examples of for me to re-use in any website:
Suckerfish dropdown menus - Horizontal and vertical in various versions
Sliding Doors tabs - although I try to use CSS3 where possible
Scripting
jQuery - I try to use it as little as possible (that is, if there's css solutions at hand, like the Suckerfish dropdown menu vs. jQ menus)
Plugins
None, yet. I looked into css3pie yesterday and it looked real promising.
Yet to look into
What I haven't used so far but might be interesting is css and js minifiers. Also, currently I include the 5 css files mentioned above in the main.css with #import, maybe I should have them merge automatically before I upload?
Also there's CSS grid systems of course. I never got the hang of those, but maybe I should give it another try. I know the 960 grid is very popular, but I'm not sure if I want to use classes purely for markup (grid_4, column_5, etc.) To me it's a bit like <span class="red"> to make a text red, that's just as bad as using inline style.
Anyway, this is just a basic setup and there's plenty of problems in websites that are not yet incorporated in this framework. So, what should I really check out to improve my framework? (HTML5 and CSS3 welcome, no flash please :P)
Suggestions
I'll make a list here of suggestions made below that I'll check out.
HTML5 Boilerplate
IE 7/8/9.js
Modernizr
I highly recommend the HTML5 Boilerplate
HTML5 Boilerplate is the professional
badass's base HTML/CSS/JS template for
a fast, robust and future-proof site.
After more than two years in iterative
development, you get the best of the
best practices baked in: cross-browser
normalization, performance
optimizations, even optional features
like cross-domain ajax and flash. A
starter apache .htaccess config file
hooks you the eff up with caching
rules and preps your site to serve
HTML5 video, use #font-face, and get
your gzip zipple on.
Boilerplate is not a framework, nor
does it prescribe any philosophy of
development, it's just got some tricks
to get your project off the ground
quickly and right-footed.
The best thing you can do is use it. That's the only way you're ever really going to build a framework that does everything you're going to need. Afterall, you don't know everything it'll need until you actually need it.
Where I'm working we have our own PHP Framework and it's been a contsantly changing entity where bits get added when they are required because they weren't originally needed in the spec.
As long as you have something that works for your first project you're underway. Just try it out, add to it when you need something, and optimise where and when you can!
If you are looking into minifiers, you're probably willing to run your code through some sort of build script before testing and deploying. If that's the case, I'd suggest looking into LESS for your css: http://lesscss.org/docs
LESS is pure awesomeness.
I don't know how much client-side scripting your projects require, but if it's anything extensive you might want to look into using something like M4 or the C++ preprocessor to add support for includes, ifdefs, etc... this can help keep your code organized and allows you to maintain debug code that doesn't appear in the production build. This post sort of takes that idea to an extreme, but it might give you some ideas.
Out of curiosity, what server-side language are you using?
Drop Suckerfish.
With the growing number of touch-only devices (mobile phones, tablets), using hover-based UI elements will just piss off the users.
I can't believe I forgot (and nobody has mentioned) fontsquirrel. I've used it to embed a few fonts now and it really works like a charm.
From a performance perspective, I'd use Compass and SASS with the built in BlueprintCSS framework, it mainly takes care of all reset needs to render the same cross browser, you get to use mixins instead of inline classes for your grid. And most of all you end up with one tiny css file that loads real quick. I also use modernizr, html5boilerplate, css browser selector only with serverside php, faster rendering. If your torn between SASS and LESS, the blueprint integration with Compass+SASS is spectacular. Hope this helps!
why create one more when there are so many out there already.
I would rather suggest you to contribute to the frameworks you are referring if you feel something is wrong or missing. That way you will also help everybody who are already using it.
I agree with Alex here you should start with using it, this will make sure it has everything you want,
and let me know when it is ready for us to use ;)
The Blueprint CSS grid technique is better than the 960gs in my opinion. The thing I dislike about 960 is that the the gutters between columns are formed by two "half gutters" on the left and right of each column. It's bizarre; you wind up with half-gutters on the left and right of your layout.
There's also the CSS browser selector jQuery plugin. This uses a few simple selectors in your CSS to tell which browser to do what:
.ie .myClass
{
background-color: #f00;
}
.ff .myClass
{
background-color: #00f;
}
I use it on my website and it's a much better solution than having CSS hacks or Conditional Comments.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
Stylesheet languages like Sass and Less allow us to organize our stylesheets like real programming source code, in more modular and manageable ways than raw CSS ever could. Using these languages is still a young art, and I'm curious to learn how other developers use them in practice.
One of the neat features about the openness of the web is that we can learn from others by peeking at their HTML and CSS. However, these new stylesheet languages allow developers to keep their stylesheet source code private and only share the compiled CSS output. The standard compiler settings will often have the stylesheet source folder outside the public webroot.
If you use a CSS preprocessor to develop a commercial (closed-source) website, would you consider the stylesheet's source language (Sass or Less) equivalent to the CSS in terms of openness, or is it proprietary source code?
On the one hand, these languages "only" give us different syntax for writing stylesheets, so their function is the same as the CSS that's already publicly visible.
On the other hand, they could be thought of as "source code" and considered proprietary, in the same way as the Ruby or PHP that drives the site is used to generate HTML.
Looking forward to your thoughts.
Looks like you and I are the only ones following the css-preprocessing tag, I just found this and wanted to share some thoughts.
For the small company I work for, we use the same homebrew CMS to manage every site, and there is a lot of magic involved in creating the css files. I don't use LESS or SASS, but a combination of cssmin and my own code. There are theme settings in the CMS that can affect it, and there are other things like url rewrites that have to read settings from php config files. The output is always there for anyone to see, but I wouldn't consider the code that generates it "open source" any more than the code that generates the html output.
Our CMS is not open source, so our policy is that when and if (hasn't happened yet) a client decides to drop us and "wants his website", we generate a static HTML version for them with absolutely no php source code. So they would get the static version of the css/js as well as static html. They are paying for a service, and not so much a product. We don't sell the CMS, we sell our services building the site and access to those same tools. I'm not sure how well this would bode if it happened, but that's our current policy.
Anyways, this might not be exactly what you meant, but I'm looking forward to hearing more on this if anyone ever finds it.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
Does anyone know of a good online generator to take the source code of an HTML page and compress/minimize the entire page.
Meaning, compress/minimize all embedded CSS, JavaScript and obviously the HTML of that web page while also removing unneeded HTML/CSS/JavaScript comments, spaces, tabs, etc?
Juriy Zaytsev wrote an HTML minifier in JavaScript, which you can use online on this page: http://kangax.github.com/html-minifier/
As the warning says, it’s still an early alpha, so there might be bugs. Use with caution!
http://prettydiff.com/ - This is written in JavaScript so you can use it instantly in your browser.
There's an online compressor that does minimize all embedded CSS and JavaScript blocks and also the HTML. It produces a single line output code which renders as the original and respects the document structure.
It uses Yahoo YUI Compressor and Google Closure compiler for JavaScript.
Check it here: HTMLcompressor.com
This is the best minifier I found till date.
Check it here: Html, Javascript as well as CSS minifier
A duplicate of https://stackoverflow.com/questions/728260/html-minification ?
And if you do not really need an ON-Line tool, then PageSpeed plugin for Firefox and the Yahho compressor are both really good minifiers. Also the PageSpeed tool can give you hints what to change, and which change will give the biggest change in speed/size.
I came across a script that will minify your HTML, Inline CSS, Inline Javascript On The Fly.
Check here Dynamic Website Compressor
I recommend you to try WebMarkupMin Online.
These are the perfect minifiers:
For Javascript http://javascript-minifier.com/
For CSS http://cssminifier.com/
For PNG http://pngcrush.com/
For JPEG http://jpgoptimiser.com/
I use HTML JavaScript CSS Minifier for minify the entire HTML code (including CSS and Javascript).
You can also encrypt the Javascript parts on Javascript minifier encryptor to make it less readable but it increase the size of your file.