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
1
vote
1 answer

How to customize HTML5 audio controls without using javascript (Pure CSS)

I need to customize my HTML5 audio control like this: Can any one solve my problem? Here is what I have so far: audio::-webkit-media-controls-panel { background-color:powderblue; } // audio::-webkit-media-controls-mute-button //…
Sakkeer A
  • 1,060
  • 1
  • 16
  • 39
1
vote
2 answers

SVG siren CSS animation

I am trying to replicate this siren in an SVG animation. Here is what I have created: svg { height: 200px; } #siren { animation: flash 1s linear infinite; } #line1, #line2, #line3 { stroke-dasharray: 10; animation: line-dash…
Jeremy Lynch
  • 6,780
  • 3
  • 52
  • 63
1
vote
1 answer

Responsive Menu with Dropdown Elements

Mostly I'm copying the demo code from the PureCSS "docs" for implementing their dropdown menu. I have created a CodePen, and will share code here as well. The problem is that in the vertical version, the submenu items are not being revealed on hover…
MikeiLL
  • 6,282
  • 5
  • 37
  • 68
1
vote
0 answers

Continuous Pure CSS Ticker

I've achieved a ticker with pure css, there is a small issue which i'm not able to rectify. I want the ticker to be continuous without any gaps. i.e after "item 2" scroll ends "item 1" should appear immediately. Currently if you notice in the…
Sunny
  • 45
  • 1
  • 6
1
vote
2 answers

Why my Pure.css submenu is not showing on click?

According to the Pure.css documentation, a dropdown menu should appear when I click on Option3, but it doesn't. Why is it? .custom-restricted-width { width: 150px; }
nalzok
  • 14,965
  • 21
  • 72
  • 139
1
vote
0 answers

I dont want normalize.css in Pure CSS framework. I guess normalize.css included in base module. How can I do it?

I am a beginner to Pure CSS framework. As per my requirement, I don't want to include normalize css in it. I guess normalize is available in one of the Pure CSS module (base). How can I do it?
P KN
  • 31
  • 1
  • 3
1
vote
2 answers

Comple positioning, need pure CSS solution

After two days of thinking and trying and experimenting with absolute positioning, inline/inline-block display, flex display and so on... I still did not find an answer to the question - "how to style a timestamp's label position, shown on the…
Mihail
  • 618
  • 5
  • 16
1
vote
1 answer

Yahoo PureCss Vertical Nav

Hi Im new to PureCss of Yahoo. Im trying to make a vertical navigation with collapsible items im wondering why ul in a li doesn't shows any display. No other css. PureCss of Yahoo only. this is my code:
0
votes
2 answers

social media in nav bar

I'm making a website for university, and I've become stuck; I'm trying to display the social media links in the same line as the navigation and the logo, but it just won't work; the navigation works, and the social icons work as links but just won't…
michael Derricott
  • 1
0
votes
0 answers

How can I create a complex, multi-level navigation menu using only CSS and without relying on JavaScript?

I want to create a multi-level navigation menu using only pure CSS, which also has a mobile menu option. I have attempted to create the menu and it is partially functional, but when I try to optimize it for mobile devices, the desktop menu design…
sbcharya
  • 1
  • 1
0
votes
1 answer

Flexbox Distribute items specific space

I have a situation of two columns inside a bootstrap row and I want to achieve the result depicted on the following image using only css/flexbox(not js at all): Result That means I want the space on the left column to be distrubted so that the two…
Tekimoto
  • 5
  • 2
0
votes
0 answers

A11y in pure CSS solutions based on `input:checked` pseudo selector

I came across pure CSS solutions based on the pseudo selector input:checked, for example https://webdevtrick.com/css-sidebar-menu/ https://webdevtrick.com/html5-css3-responsive-menu/ https://webdevtrick.com/pure-css-tabs-responsive/ This solutions…
nulll
  • 1,465
  • 1
  • 17
  • 28
0
votes
0 answers

CSS create new class definition using existing classes (from a library)

Suppose I am using a framework like Pure and I style divs like this:
This is something I need to repeat a few times in the html and also something I need to tweak from time to time. So it gets…
ahron
  • 803
  • 6
  • 29
0
votes
1 answer

sass increase variable only if html element has a class

Is it possible to use an html element class as a condition for if statement or relative way in sass css? In many cases in programming it is necessary to combine a loop and an if test to check if something is in the desired state, and if it is then…
Mironek
  • 11
  • 2
0
votes
2 answers

purecss - why divs have different width on firefox and chrome?

Using PureCSS I have noticed that elements with pure-button class differs in width based on browser. Using the following example:
zajer
  • 649
  • 6
  • 17
1
2
3 4 5