Bookmarks tagged with #css.
Show all
Show all
DasSur.ma – Layers and how to force them
The answer is will-change: transform. Or is it? TL;DR: Unless you will change transform , don’t use will-change: transform. Use will-change: opacity or backface-visibility: hidden, as their side-effects are less disturbing on average.
Tags:
#css
Saved
on: 2018-04-20
5 Takeaways From Using Tailwind CSS In Real Projects | Nick Basile
Over the last few months, I've had the pleasure of writing a few blog posts covering how to build some simple components with Tailwind CSS.
Saved
on: 2018-03-16
A Book Apart, Get to Know Rachel Andrew
Up next our Meet the Authors series, Rachel Andrew with some advice on getting started in design and development. ABA: In your opinion, what should someone consider before starting out in the development/design field?
Saved
on: 2018-01-19
An Event Apart News: CSS Grid Layout by Rachel Andrew—An Event Apart video
Saved
on: 2017-12-28
How Stripe Designs Beautiful Websites - Lee Robinson
Jeden z największych rejestratorów domen w Polsce. Dla naszych 110000 klientów utrzymujemy ponad 410000 domen. — Zarejestruj swoją domenę » Najniższe ceny utrzymania domen dla klientów hurtowych.
Saved
on: 2017-12-04
An Introduction to Scrollama.js
Scrollama is a modern and lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events. Using IntersectionObserver abstracts element-in-view detection and removes the need to monitor scroll events, which contribute towards a sluggish experience.
Saved
on: 2017-11-29
Eric's Archived Thoughts: Generating Wireframe Boxes with CSS and HTML5
I was recently noodling around with some new layout ideas for An Event Apart’s speaker pages (e.g., Chris Coyier’s or Jen Simmons’) and wanted to share the ideas with other members of the team.
Tags:
#css
Saved
on: 2017-11-28
Flexbox and Grids, your layout’s best friends
It took more than six years to have CSS Grids implemented across all browsers. Throughout its history, the spec has always been surrounded by controversy. In 2011, it was met with skepticism as the Microsoft Developer Team announced prefixed support for IE10.
Saved
on: 2017-11-07
Web Typography: Designing Tables to be Read, Not Looked At · An A List Apar
Good designers spend a great deal of time sweating over typography. They agonise over typefaces, iterate through type scales and meticulously apply white space, all in the service of the reader.
Saved
on: 2017-11-02
From Bootstrap to CSS Grid – Times Open
Despite many clever hacks and creative workarounds, there hasn’t been a simple answer for creating layout on the web. From misusing tables, to over-engineering simple floats that push around content, developers have consistently struggled to translate designs to code.
Saved
on: 2017-10-26
Don't Overthink It (Flexbox) Grids | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Four years ago I posted “Don’t Overthink it Grids” and it resonated with quite a few people. Even back then, I thought we might have been at Peak Grid.
Tags:
#css
Saved
on: 2017-10-17
Rebuilding slack.com – Several People Are Coding
In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes. Rebuilding our marketing website was a massive project that took careful coordination across a variety of teams, departments, and agencies.
Saved
on: 2017-10-13
10 SASS (SCSS) mixins you should be using in your projects | Engage
Writing in SCSS lets you use features that don't exist in CSS yet like variables and nesting. The biggest feature though, in my opinion, is mixins. I'm not going to go into depth of what they are, or how they work, as there are other articles out there in the wild for that.
Tags:
#css
Saved
on: 2017-09-21
Penthouse 1.0 — Official Release!?? – Jonas Ohlsson Aden – Medium
Penthouse is the first and best free critical css generator out there, helping you improve your speed index — time to first render. So, what’s new in 1.0?
Tags:
#css
Saved
on: 2017-09-18
The Critical Request | CSS-Tricks
Serving a website seems pretty simple: Send some HTML, the browser figures out what resources to load next. Then we wait patiently for the page to be ready. Little may you know, a lot is going on under the hood.
Saved
on: 2017-08-02
Dev.Opera — Responsive Images: Use Cases and Documented Code Snippets to Ge
We're excited to announce the launch of Opera One for iOS, our redesigned, AI-powered browser for iPhone. Opera is appealing the EU Commission’s decision not to designate Microsoft Edge as a gatekeeper, and requesting to keep freedom...
Saved
on: 2017-04-21
Grid Garden
Reset 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Grid Garden is created by Codepip • YouTube • Twitter • GitHub • English English Español Français Deutsch Nederlands Italiano Português(BR) Português(PT) Català Svenska Norsk Suomi Polski Slovenčina Magyar Română Shqip Български Eesti L
Saved
on: 2017-04-05
2016 Favorites | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! As the year closes, it’s good to reflect on all of the things we as a community have built, contemplated, and contributed to.
Saved
on: 2017-03-27
Case Study: My First Practical CSS Grid Layout - Cloud Four
Like a lot of my peers, I’ve been watching the astonishingly rapid adoption of CSS Grid Layout with great anticipation thanks to the amazing work of people like Rachel Andrew, Jen Simmons and Chris House to demonstrate, document and evangelize this game-changing set of new design tools.
Saved
on: 2017-03-27
On-Demand CSS Animations Library
Animista collects some Personal Data from its Users. BuySellAds Personal Data collected: Cookies and Usage Data.
Tags:
#css
Saved
on: 2017-03-17
The Complete Guide to CSS Grid | Codrops CSS Reference
CSS Grid is a two-dimensional layout system created specifically to tackle grid-based user interfaces on the web. Grids are fundamental to the design of layouts.
Saved
on: 2017-03-02
A Complete Guide to Flexbox | CSS-Tricks
The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).
Saved
on: 2017-02-06
CSS Grid – Table layout is back. Be there and be square. | Web | Google
If you are familiar with Flexbox, Grid should feel familiar. Rachel Andrew maintains a great website dedicated to CSS Grid to help you get started. Grid is now available in Google Chrome. But alas, screens commonly have a second dimension we need to worry about.
Saved
on: 2017-02-01
Print styles – A List Apart Sidebar – Medium
That sets the margins of printed pages in inches (I could’ve used centimetres but the numbers were nice and round in inches). The orphans: 4 declaration says that if there’s less than 4 lines on a page, shunt the text onto the next page.
Saved
on: 2016-12-28
Flexbox Froggy - A game for learning CSS flexbox
Reset 1 2 3 4 5 6 7 8 9 10 Flexbox Froggy is created by Codepip • YouTube • Twitter • GitHub • Settings Language Want to learn CSS grid? Play Grid Garden.
Saved
on: 2016-12-22
GitHub's CSS Performance // Speaker Deck
A talk on some problems solved related to CSS Performance at GitHub. The talk was given at CSS Dev Conference in Honolulu, HI 2012. I recorded the presentation from my laptop and posted it here https://vimeo.com/54990931
Saved
on: 2015-11-12
google/material-design-lite · GitHub
An implementation of Material Design components in vanilla CSS, JS, and HTML. Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn't rely on any JavaScript frameworks or libraries.
Saved
on: 2015-07-06
oak.is / Animated SVGs: Custom easing and timing
The chart above is an animated SVG featured on Sprout. This chart, and one other animation on Sprout, were initially GIFs. By using animated SVGs instead of GIFs we were able to reduce our page size from 1.6 mb to 389 kb, and reduce our page load time from 8.75 s to 412 ms.
Saved
on: 2015-06-29
Tips for Writing Modular CSS Matt Lambert
No matter how much you love CSS, no one enjoys writing or maintaining style sheets that are 2000+ lines of awesomeness. The smart way to approach your CSS is from a modular stand point.
Saved
on: 2015-05-26
Documentation - Materialize
We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.
Saved
on: 2015-04-24
flexbox in 5 minutes
Pola Gacor Olympus menjadi perbincangan hangat di kalangan pemain slot online. Bagi yang belum tahu, pola ini dipercaya mampu meningkatkan peluang menang, bahkan hingga mencapai perkalian x500 di slot Gates of Olympus.
Tags:
#css
Saved
on: 2015-03-03
Trello CSS Guide
Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets “I perfectly understand our CSS. I never have any issues with cascading rules.
Tags:
#css
Saved
on: 2015-02-12
How to Scale SVG | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Amelia Bellamy-Royds. Amelia has lots of experience with SVG, as the co-author of SVG Essentials and author of the upcoming Using SVG with CSS3 and HTML5.
Saved
on: 2015-01-11
min
Min supports IE5.5+, FF3+, Opera 9+, and Safari 4+, the best browser support of any CSS framework by far. Unfortunately, IE5.5 does not support border-radius and as such does not have rounded button corners. That said, IE5.
Tags:
#css
Saved
on: 2014-09-15
CSS Shapes Editor for Chrome
CSS Shapes allow web designers to wrap content around custom paths, but authoring them is not trivial. None of the traditional tools used in web design currently export code for CSS Shapes and the syntax conversion workflow is unwieldy and time-consuming. It wouldn't help too much even if they did.
Saved
on: 2014-09-03
uncss: Find Unused CSS
You know what's better than adding features to a website or app, from a code perspective? Removing stuff you don't need. Whether it be code, images, or dependencies, getting rid of the crap stale code is like the first sip of a big glass of wine after a long day of stressful work.
Saved
on: 2014-05-20
Jeet Grid System | Smart CSS preprocessor grids
Specify an initial ratio, either as fractions or decimals, then pass the parent container's context ratio to maintain consistent gutters as you nest. Specify a ratio to make your offset have a margin-left. Make it negative to give it a margin-right instead. e.g.
Saved
on: 2014-05-06