Sign Up Now!

Sign up and get personalized intelligence briefing delivered daily.


Sign Up

Articles related to "css"


Show HN: Visual CSS Grid Editor

  • The latest release of our visual web editor Pinegrow comes with a set of powerful tools for working with CSS grid layouts.
  • In our example, we use the row and column placement for the underlying image and named areas for all other elements.
  • In that way we only need to deal with overriding grid definitions and only deal with placement of any elements that can’t use named areas and tracks, for example because of overlapping with other elements.
  • That means that we can use the CSS Editor or the code view to work with the whole set of grid properties alongside the visual grid tools.
  • And, with a couple of extra CSS rules, Bootstrap containers, rows and columns can even be used as a fallback layout for browsers that don’t support the CSS grid.

save | comments | report | share on


Universal next gen css-in-js library in under 1kb

  • Scoped style aims to be a universal library that you can use to style your components while still maintaining a small footprint.
  • It has currently been tested with react, preact and hyperapp.
  • You can use the full power of css just as you are used to.
  • The project is on github.
  • Contributions are highly welcomed.
  • An experienced software engineer who enjoys working on interesting and challenging projects.Open to new opportunities.
  • We’re a place where coders share, stay up-to-date and grow their careers.
  • We strive for transparency and don't collect excess data.

save | comments | report | share on


Universal css-in-js library in under 1kb

  • Scoped style aims to be a universal library that you can use to style your components while still maintaining a small footprint.
  • It has currently been tested with react, preact and hyperapp.
  • You can use the full power of css just as you are used to.
  • The project is on github.
  • Contributions are highly welcomed.
  • An experienced software engineer who enjoys working on interesting and challenging projects.Open to new opportunities.
  • We’re a place where coders share, stay up-to-date and grow their careers.
  • We strive for transparency and don't collect excess data.

save | comments | report | share on


Using CSS grid, flexbox and multi-columns layout to recreate the Daily Prophet

  • And since I started learning CSS grid, I decided to implement it again by using the two layout modules along with the multi-columns layout.
  • However if you’re working with other languages that uses a different writing mode like Hebrew and Arabic which are written right to left then your flex items would start at the right.
  • I make use of CSS grid when dealing with two-dimensional sections (both row and column, for example the main stories section).
  • Instead of writing grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; which is very repetitive, you can use the repeat() function so repeat(6, 1fr) will repeat the specified width 6 times thus producing the same result.
  • For some sections that only contains text separated by columns, instead of using grid or flexbox I decided to use another existing layout module called multi-columns layout to produce the same effect.

save | comments | report | share on


A few lines of CSS code can send your iPhone crashing

  • A security researcher has found out that due to a vulnerability in WebKit (a rendering engine used by Safari browser), it takes only a few lines of CSS code to crash an iPhone or an iPad. The code itself is not too complex and uses multiple nested elements like <div> tags inside a CSS effect called backdrop-filter, used for color shifting behind the element.
  • Sabri Haddouche – the man who found the vulnerability – posted a video on Twitter showing off the script causing an iPhone to crash, along with the code itself.
  • “Anything that renders HTML on iOS is affected, ”Haddouche said.
  • Haddouche also added that a tweaked version of CSS code can affect MacOS as well, making more Apple products vulnerable.
  • This is not the first incident of a piece of code or text can crash your iPhone.

save | comments | report | share on


Making Ant Design CSS Optimization to Work on CodeSandBox

  • Ant Design provides a way to optimize components & CSS imports using their custom babel plugin (babel-plugin-import) via react-app-rewired without having to eject a create-react-app generated site.
  • Everything works fine locally but CSS is not applied on CodeSandBox. This is how it looks locally with the rewired site.
  • Let’s run the same code (shared via GitHub) on CodeSandBox. If you comment out the CSS import, CSS is not imported any more.
  • So let’s see how to make CSS work locally & on CodeSandBox. The trick is to dynamically import the CSS file by checking if it’s running in production or development mode.
  • If replace previous static imports with dynamic versions, CSS will work on local machine as well as on CodeSandBox (with Ant Design’s optimizations applied in production mode).
  • After deploying it on Netlify, you can see babel-plugin-import working via create-app-rewire with reduced CSS size.

save | comments | report | share on


Component Libraries with Stencil.js - Getting Started

  • We're not interested in building an entire app or PWA using Stencil (although you definitely can!) so we're going to choose the component option.
  • This will structure it so we can build a reusable component library for distribution.
  • Other important directories to note are www, which is where your compiled components go when you're developing, and dist, which is where your actual distribution is after running a production build.
  • This file defines your Stencil build and its various options.
  • Finally there's src/components.d.ts which is a file you won't ever modify yourself.
  • It's a file generated by stencil at build time that keeps all your library's TypeScript definitions up to date.
  • You'll notice a my-component directory in there by default, with three files inside.
  • The main file is my-component.tsx.
  • By default you have CSS files, but you can use CSS preprocessors such as SASS.

save | comments | report | share on


New CSS Attack Restarts an iPhone or Freezes a Mac

  • A new attack has been discovered that will cause iOS to restart or respring and macOS to freeze simply by visiting a web page that contains certain CSS & HTML.
  • Depending on the version of iOS being used, it could cause a respring, which is a UI restart, or a kernel panic that causes the device to reboot.
  • Haddouche has told BleepingComputer that he has created an additional attack using HTML, CSS, and JavaScript that will totally freeze macOS computers, but has not released it as it persists after reboot and essentially bricks the computer.
  • When a user visits a page hosting this specially crafted CSS & HTML, depending on the iOS version, the device will quickly use up all available resources.
  • For those who want to see the CSS & HTML that causes this attack, the researcher has posted it on his GitHub page.

save | comments | report | share on


I created a copy of Red Onion's Daily Prophet using CSS Flexbox

  • The page layout seems very complicated when you first look at it but what I found is that it’s easier if I start looking at each section as a box.
  • This is what the page looks like in boxes.
  • In order to display each child in it’s own block, you can use the flex-direction property as column.
  • The original page is using Headline One HPLHS for the story headlines but I can’t find the exact font on Google fonts so I decided to use serif instead since it looks appropriate for newspaper headlines as well.
  • My goal is to learn how to use flexbox not making a pixel perfect replica of a page.
  • Seeing the page sections in terms of boxes is a very helpful approach but it also made me think in heights.

save | comments | report | share on


Friday Frontend: The Web Is Super Flexible Edition

  • There’s folks creating amazing illustrations & animations with pure CSS, an article showing 5 distinct (and valid) ways to set up an accordion semantically, and some very exciting new tooling for utilizing CSS Shapes.
  • Since many new features actually have multiple ways to invoke them, it’s not enough to just check if the browser has support for the feature, you need to check for the exact syntax you use.
  • Very interesting article that looks at the performance impact of anonymous functions as event listeners inside React components.
  • If you’re already super comfortable with the event emitter pattern and passing data up and down the component tree you probably won’t get much new, but if you’re newer or not sure about how you’re approaching it this is a good read.

save | comments | report | share on