495 Matching Annotations
  1. Last 7 days
  2. Jun 2022
  3. May 2022
    1. ```css .long-text { margin-bottom: 10px; }

      .clamp { -webkit-line-clamp: 5; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; } ```

      ```js import { LoremIpsum } from "https://cdn.skypack.dev/lorem-ipsum@2.0.3"; import classnames from "https://cdn.skypack.dev/classnames@2.3.1"; import * as lodash from "https://cdn.skypack.dev/lodash@4.17.21";

      const getText = (paragraphs) => { const lorem = new LoremIpsum(); return lorem.generateParagraphs(paragraphs); };

      const ReadMoreText = ({ text }) => { const [clamped, setClamped] = React.useState(true); const [showButton, setShowButton] = React.useState(true); const containerRef = React.useRef(null); const handleClick = () => setClamped(!clamped);

      React.useEffect(() => { const hasClamping = (el) => { const { clientHeight, scrollHeight } = el; return clientHeight !== scrollHeight; };

      const checkButtonAvailability = () => {
        if (containerRef.current) {
          // Save current state to reapply later if necessary.
          const hadClampClass = containerRef.current.classList.contains("clamp");
          // Make sure that CSS clamping is applied if aplicable.
          if (!hadClampClass) containerRef.current.classList.add("clamp");
          // Check for clamping and show or hide button accordingly.
          // Sync clamping with local state.
          if (!hadClampClass) containerRef.current.classList.remove("clamp");
      const debouncedCheck = lodash.debounce(checkButtonAvailability, 50);
      window.addEventListener("resize", debouncedCheck);
      return () => {
        window.removeEventListener("resize", debouncedCheck);

      }, [containerRef]);

      return ( <> <div ref={containerRef} className={classnames("long-text", clamped && "clamp")} > {text} </div> {showButton && ( <button onClick={handleClick}>Read {clamped ? "more" : "less"}</button> )} <br /> ); };

      const App = () => { const text = getText(2); return <ReadMoreText text={text} />; };

      ReactDOM.render(<App />, document.getElementById("App")); ```

    1. To select an element tag or attribute defined in a specific namespace, you declare a namespace prefix with an @namespace rule, then use it in your selector. The namespace is separated from the tag name with a | (vertical bar or pipe) character; if there is no tag name in the selector, use a universal * selector:

      ```css @namespace svg "http://www.w3.org/2000/svg";

      a { / These rules would apply to any a elements. / text-decoration: underline; color: purple; } svg|a { / These rules would apply to SVG a elements, but not HTML links. / stroke: purple; } svg| { / These rules apply to all SVG-namespaced elements, but not HTML elements. */ mix-blend-mode: multiply; } ```

    1. ```css .dont-break-out {

      / These are technically the same, but use both / overflow-wrap: break-word; word-wrap: break-word;

      -ms-word-break: break-all; / This is the dangerous one in WebKit, as it breaks things wherever / word-break: break-all; / Instead use this non-standard one: / word-break: break-word;

      / Adds a hyphen where the word breaks, if supported (No Blink) / -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;

      } ```

    1. Say hello to the sassy new Media Queries!

      js const html = document.getElementsByTagName('html')[0]; const toggleTheme = (theme) => { html.dataset.theme = theme; } html <script> // If `prefers-color-scheme` is not supported, fall back to light mode. // In this case, light.css will be downloaded with `highest` priority. if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') { document.documentElement.style.display = 'none'; document.head.insertAdjacentHTML( 'beforeend', '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">' ); } </script> <!-- Conditionally either load the light or the dark stylesheet. The matching file will be downloaded with `highest`, the non-matching file with `lowest` priority. If the browser doesn't support `prefers-color-scheme`, the media query is unknown and the files are downloaded with `lowest` priority (but above I already force `highest` priority for my default light experience). --> <link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)"> <link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: light)"> <!-- The main stylesheet --> <link rel="stylesheet" href="/style.css">

      html <img src="./sun.svg" data-light-src="./sun.svg" data-dark-src="./moon.svg" alt="light theme" id="theme-selector" onclick="switchTheme(this)">

    1. The only catch with this method is, it will also invert all the images in your application. So we will add the same rule to all images to reverse the effect. css html[theme='dark-mode'] img{ filter: invert(1) hue-rotate(180deg); } and we will also add a transition to the HTML element to make sure the transition does not become flashy!

      css html { transition: color 300ms, background-color 300ms; }

    2. html[theme='dark-mode'] { filter: invert(1) hue-rotate(180deg); }

      Ultimate CSS to turn on dark mode

  4. Apr 2022
    1. css .hoverClassColor:hover { color:var(--hover-color) !important; } js render() { return <a className={'hoverClassColor'} style={{'--hover-color':'red'}}>Test</a> }

    1. Setting "img max-width:100%" is a technique employed in responsive/fluid web site design so that images re-size proportionally when the browser is re-sized. Apparently some css grid systems have started setting this style by default. More info about fluid images here: http://www.alistapart.com/articles/fluid-images/
    1. Now, our img element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the max-width: 100% directive forces the image’s width to match the width of its container.
  5. Mar 2022
  6. Feb 2022
    1. Class selectors


  7. Jan 2022
    1. When you give an element a width of 100% in CSS, you’re basically saying “Make this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.” So, if you have a parent container that’s 400px wide, a child element given a width of 100% will also be 400px wide, and will still be subject to margins, paddings, and borders — on top of the 100% width setting.
    1. Add a ::after which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj

      .grid {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
      .grid::after {
        content: "";
        flex: auto;
  8. Dec 2021
    1. .container {
        width: 100%;
        height: 100vh;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: y mandatory;
      .item {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        scroll-snap-align: start;
        width: 100%;
        height: 100vh;   


    1. Stick to the bottom?!


      But you can also use it to stick elements to the bottom. That means that the footer can be defined to have a sticky position, and it will always appear to stick to the bottom when scrolling down. When we reach the end of the sticky container, the element will stop in its natural position. It’s better to use it on elements whose natural position is the bottom of the sticky container.

      Full Example:

      • HTML
        <main class="main-container">
        <header class="main-header">HEADER</header>
        <div class="main-content">MAIN CONTENT</div>
        <footer class="main-footer">FOOTER</footer>
      • CSS
           position: sticky; 
           bottom: 0;
        Live CodePen Example
    1. If you want to define a theme color for light and dark mode, your best bet is to define both colors and use the first meta tag as a fallback for browsers that don’t support the media feature.

      <meta name="theme-color" content="#319197" media="(prefers-color-scheme: light)">
      <meta name="theme-color" content="#872e4e" media="(prefers-color-scheme: dark)">
    1. <!-- HTML -->
      <div class="text-container">
      /* CSS */
      section {
        width: 100vw;
        height: 100vh;
        background: #000;
        &:nth-child(odd) {
          background: #fff;
      .text-container {
        position: fixed;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        mix-blend-mode: difference;
        h1 {
          font-size: 150px;
  9. Nov 2021
    1. Front end framework is a combination of two separate words, Front end + Framework. Front end is the visual site of any web application or a website, it is that part of the website with which a user interacts, note that backend is that part that involves API calls, database connectivity, authentication and so on, and a framework in literal sense means an essential supporting structure of an object, the object is a website in this case.

      What's Front End Frameworks? Here's the complete guide to understand the best front end frameworks.

    1. We also need at least something in our CSS that can be set from outside. CSS custom properties are a great fit for this!
  10. Oct 2021
    1. We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components.

      (The English here sounds awkward.)

      Gyuri Lajos, in the Stop Reset Go team, recommended using Materialize CSS.

      If it is based on Google’s Material Design, there are a lot of resources available to explore the possibilities. If I was building a Progressive Web App, this might be the place to start.

      The project appears to be at an early stage of development, with a 1.0.0 release.

    1. Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology.
  11. getuikit.com getuikit.com
    1. A lightweight and modular front-end framework for developing fast and powerful web interfaces.

      So far, this is one of the most complete web design frameworks that I have encountered. The list of components is extensive.

  12. Sep 2021
  13. Aug 2021
    1. The most likely cause of this problem is having set the height of an element to be 100% of the page somewhere in your CSS. This is normally on the html or body elements, but it could be on any element in the page. This can sometimes be got around by using the taggedElement height calculation method and added a data-iframe-height attribute to the element that you want to define the bottom position of the page. You may find it useful to use position: relative on this element to define a bottom margin or allow space for a floating footer.
    1. With JavaScript, you can actually calculate the width of the scrollbar and whether it’s visible by comparing two properties—window.innerWidth and document.body.clientWidth. If these are equal, the scrollbar isn’t visible. If these are different, we can subtract the body width from the window width to get the width of the scrollbar:const scrollbarWidth = window.innerWidth - document.body.clientWidthWe’ll want to perform this both on page load and on resize, in case someone resizes the window vertically and changes the overflow. Then, once we have the scrollbar width, we can assign it as a CSS variable:document.body.setProperty("--scrollbarWidth", `${scrollbarWidth}px`)

      missing feature: vw/vh can't be used "directly" because doesn't account for scrollbars

  14. Jul 2021
  15. Jun 2021