Stack Overflow
Stack Overflow

Questions tagged [pure-css]

It is a CSS with a minimal footprint. Pure is ridiculously tiny. The entire set of modules clocks in at 4.0KB* minified and gzipped. Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components.

It is a CSS with a minimal footprint. Pure is ridiculously tiny. The entire set of modules clocks in at 4.0KB* minified and gzipped. Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. Pure is responsive out of the box, so elements look great on all screen sizes. By using Grids, Menus, and more, it's easy to create beautiful responsive layouts for all screen sizes. Pure has minimal styles and encourages you to write your application styles on top of it.

62 questions
5
votes
6 answers

How can I make the edit icon styling using only pure CSS?

I want to design the above image using pure CSS. So far, I am able to only design without the edit icon. Following is the HTML and CSS I have come up with so far:
Keith M
  • 421
  • 1
  • 8
  • 18
5
votes
1 answer

CSS :target on hover not on click

I've got a slider, and it's working great. BUT, I've got one little problem. I want to change the slider image when I hover over one of the
  • s, and not when I click on them. Is this possible? I've found this link, but maybe there's some new style…
    • Refilon
    • 3,334
    • 1
    • 27
    • 51
    3
    votes
    0 answers

    Add different animation-delays to 20 divs in CSS

    I need to apply different animation-delay values for 20 divs. The CSS I have below works but I wanted to know if there was a more efficient/shorter way of writing this in Pure CSS. The animation-delay needs to decrement by 0.5s for each div. …
    626
    • 1,159
    • 2
    • 16
    • 27
    3
    votes
    1 answer

    pure-u-1-7 not working when combined with sm,md,lg,xl

    Your page title …
    Anbhu
    • 101
    • 1
    • 6
    2
    votes
    2 answers

    How to use the Pure CSS?

    I wanna create a 404 error webpage using the code provided here: https://codepen.io/SofiaSergio/pen/RMjyRL As the author mentioned, this is pure CSS. Howsoever I'm not sure if the usage of Pure CSS is same as standard CSS. I created an HTML and CSS…
    Majid
    • 421
    • 6
    • 19
    2
    votes
    0 answers

    Overlay text from corner to corner of div content box

    I am trying to build a content box where I can overlay some text. I am working to build out a new feature. While it is in development I want to actually show some of the changes that will be coming on the page. Thus I would like to put it all in a…
    Ben
    • 251
    • 1
    • 8
    • 23
    2
    votes
    1 answer

    Purecss Roadmap and Project Status

    Does anybody know the project status of the Purecss framework? From their blog and github it appears to be a dead project.
    SemanticUI
    • 899
    • 2
    • 10
    • 19
    1
    vote
    3 answers

    On remove "required" label not working properly

    Codepen: link .body { position: relative; font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; } .wrap { position: absolute; right: 0; top: 40%; width: 350px; left: 0; margin: 0 auto; } /* select starting stylings…
    Sid Sss
    • 129
    • 2
    • 13
    1
    vote
    1 answer

    Can I use svg as button with an effect in the outline of the shape?

    I'm a beginner and i was just wondering if I can use SVG icons as buttons like make hover for them and active ? and if there is a way to make a border for them but around the shape straight not the box of the shape and fill the shape with a…
    Marwan Mostafa
    • 13
    • 3
    1
    vote
    3 answers

    circular progress bar for 4 steps of form

    Looked for circular progress to indicate on which step the user is out of 4. Like 1st form out of 4, 2nd form out of 4, 3rd form out of 4, 4th form out of 4 Below are screen shot of what is expected. I got few example which had two div inside it.…
    Tushar
    • 4,280
    • 5
    • 24
    • 39
    1
    vote
    2 answers

    Two full height column layout with sticky footer using pure CSS

    I am struggling which seems to be a rather simple challenge. I need to design simple layout which requirements are: pure CSS (no flex-box, no grid, just CSS - no libraries) fixed body/wrapper width (1024px, centered) fixed column width columns…
    adorek
    • 9
    • 4
    1
    vote
    1 answer

    How to get Rails 6 working with PureCSS and WebPacker

    I am trying to upgrade a Rails 5 app that used PureCSS for stylesheets to Rails 6 with Webpacker and nothing I do can make this work other than a brute force approach. I have these lines in application.html.erb <%= stylesheet_pack_tag…
    Craig Miles
    • 447
    • 4
    • 18
    1
    vote
    0 answers

    Unexpected execution delay for onclick event on a simple burger menu link in Chrome browser

    I am setting up a project using the pure css library, and I want to use their responsive side-menu example (the issue is directly visible on this website). I just found out the issue occurs in Chrome browser but not in Firefox. When the viewport…
    Sbu
    • 910
    • 11
    • 22
    1
    vote
    1 answer

    Pure CSS Radio Buttons show / hide a separate DIV layer

    I want to have the user select a radio button to show a text field using pure CSS. I styled the radio buttons but I haven't been able to get them working. I'm sure it can be done, I think I am just not typing the CSS correctly. Can someone show…
    Derek Holliday
    • 89
    • 1
    • 12
    1
    vote
    2 answers

    Using NPM for CSS files in a Node project

    Usually when I build a webpage, I include some library like bootstrap from CDN. Now I want an offline webpage (in reality I'm using electron.. but same thing) in a Node environment. I chose Pure as my framework. So I have my Node project with…
    jozenbasin
    • 2,142
    • 2
    • 14
    • 22
    1
    2 3 4 5