Change Css class properties with jQuery. Level Up Your CSS Animations with Cubic Bezier. Transitions and animations are making waves across web development, and rightfully so.
They are awesome, easily useable (and abusable), and have the ability to take your front end components and interfaces from good to great. The anatomy of declaring transitions and animations are similar, and only two things are required: Logic in Media Queries. Just in case you have brain farts about this constantly like I do.
If That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside. And The keyword and. Or Comma separate. Linting HTML using CSS. When HTML is written incorrectly, nothing much happens.
Because of this, it's easy to have invalid, unsemantic, or unaccessible bits in markup without it being obvious. There are many ways we can lint our HTML to discover and fix these issues, for example using the W3C Markup Validation Service. Another thing we can do, which can be more easily integrated into a development workflow, is to use some slightly advanced CSS selectors to highlight potential problem areas. Here are a few things we can use CSS selectors to help us catch out. Inline Styles. Methods for modifying objects in OOCSS – Oliver Joseph Ash. There are two ways of implementing object modifiers in CSS: extending objects in the CSS, or deferring the work to your HTML and concatenating classes there instead.
In this article, I introduce the purpose of a modifier in OOCSS, and then I investigate the advantages and disadvantages of using both methods, as well as claims that @extends can sometimes be a fools gold. What is a Modifier? For those who are new to the idea of OOCSS, let’s take a look at a simple example of where we might apply the priniciples of object modifiers. Here we have a widget object, the purpose of which is self-explanatory. widget has some padding, but say for example that the design I was working on occasionally demonstrated the need for a widget with a border. A DRY method would be to extend and then modify my widget object, so I don’t end up doing something like this: Our new widget-alt object (short for alternative widget) has a border, but duplicates the padding of widget. Extending silent classes in Sass – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts.
Written by Harry Roberts on CSS Wizardry.
This is a shorter, tip-style post that covers a little thing I like to do when writing Sass. It’s something that I’ve been asked about in workshops, and something I hope to bring to the new version of inuitcss. When writing Sass, specifically any objects or abstractions, I write it like this: The reason for the solid and the silent class is simple: I only use the silent class as the subject of an @extend. Oliver J Ash wrote a great post that I would really recommend you read; it will give this post a lot more context. In short, a common problem with @extend is that it will indiscriminately extend every instance of a matching selector that it finds. You might expect, or want, to see some output like this: However, anyone who’s used Sass’ @extend directive before will know that what you actually get is this: What Sass has done is it’s extended every instance of .foo that it could find.
How I helped the NHS rapidly build a brand new product. We’d write: Smarter CSS builds with Webpack. Nobody writes CSS in one big file any more.
You, the savvy CSS developer, well-versed in SMACSS, SUIT and BEM, are writing small, isolated modules in separate files. stylesheets/ config/ colors.sass media_queries.sass modules/ btn.sass dropdown.sass header.sass utilities/ align.sass clearfix.sass When it comes to building a single bundle.css file to send down to your users, you're manually specifying all of the individual files that you know your app needs. If you're using a preprocessor like Sass, you might be using its @import statement: @import "vendor/normalize" @import "config/colors"@import "config/media_queries" @import "modules/btn"@import "modules/dropdown"@import "modules/header" @import "utilities/align"@import "utilities/clearfix" If you're working with Rails or Middleman, you might be using Sprockets' //= require directives:
How to structure a Sass project. One of the most useful features of Sass is being able to separate your stylesheets into separate files.
You can then use the @import directive to include the source of your individual files into one master stylesheet. But how should you structure your Sass projects? Is there a standard way of separating out your CSS files? Basic directory structure I like to layout my Sass projects like this: