Questions tagged [sass]
Sass is a CSS preprocessor which enables advanced features not available in normal CSS.
1
vote
0answers
30 views
Sliding marker on link hover and click with jQuery
The code I'm bringing forward is for a vertical menu, where I needed a marker to do the following:
When hovering over a link the marker should slide down next to it.
When not hovering over a link the ...
3
votes
1answer
27 views
Sass styling with React components
I have put together a piece of what can be a much larger frontend in Reactjs.
I just put together the component that renders to the user a list of airports and hotels as well as a header component.
...
2
votes
1answer
59 views
React board game app
I was told to code a board game app using React for a job interview.
They told me they chose other candidates to move forward with, so I was wondering on what I could improve.
The full code can be ...
2
votes
1answer
34 views
Rendering three vertical dots using SCSS
I have a pretty simple question but I can't seem to find a solution for it. I have the following SCSS code (can be found below) which works fine, but I think it could be simplified to get rid of the ...
3
votes
0answers
38 views
SASS script to generate Pygments / Rogue stylesheet output
I've written some SASS code to generate a Pygments syntax highlighter style sheet (which are, by extension, compatible with Rouge). Such a stylesheet is normally generated by the ...
0
votes
0answers
591 views
React Grid-List View
React Grid-List View
React v16.3
Font Awesome 5
This program uses the React Context API to produce a responsive grid or table list using Zen Design styles and Font Awesome icons.
Notes:
Zen ...
2
votes
1answer
36 views
2
votes
2answers
242 views
SASS mixin for a font-awesome before/after usage
In my SASS I use font-awesome declarations all over the place. I'm in love with it. I've created a SASS mixin for the usage:
I started with the following:
...
8
votes
1answer
348 views
Lightweight Angular tooltip component
I made a small Popup component to show different error/success...etc. messages.
Template:
...
2
votes
0answers
127 views
Compiles SCSS Code to CSS in the browser
First of all, thanks for reviewing my code. I am half-way done through a GitHub Project I call ScriptSass, that parses SCSS Code using Javascript into regular CSS. Now, I have reluctantly added an ...
1
vote
0answers
637 views
Sass Collapsible sidebar in Bootstrap 4
I am creating a static site in HTML and CSS. I'm using Sass for the CSS. The whole repository can be found here on Bitbucket.
I wanted feedback on the way I've done the sidebar. The code is split ...
3
votes
0answers
116 views
CSS animation of ravens flying in a circle
I just made a little experiment on codepen with this animation.
But I get some performance issues: sometimes it's not as smooth as it should be.
Does someone know some practice I could use to ...
2
votes
1answer
195 views
SASS/SCSS mixin for button states
I have created several mixins for a button to attempt to reduce duplication and contribute to the overall improvement of performance. I am looking for guidance on how to tighten this up so it is as ...
1
vote
0answers
183 views
Animated Ticker with JavaScript and Sass CSS
I've made this animation using JavaScript and Sass CSS.
Relevant is the code inside the IIFE. Because that's what I like to keep and develop further. Perhaps use it for future projects. Everything ...
1
vote
1answer
100 views
Website using HTML/CSS/SASS/Bootstrap/JQuery
I'm learning Sass and responsive websites, I've made this simple portfolio website with the help of a bootstrap template (freelancer) and I'd like to know if I'm doing SASS correctly and ways to ...
0
votes
2answers
107 views
Simple SASS & BEM module for social feed widgets
I've been messing around with SASS and BEM for the last few months. I recently starting 'thinking' in modular in terms of building out my applications (for re-usability and simplicity).
I am coding ...
1
vote
0answers
56 views
Animated Ajax loader: Ascending air bubble
This week I've had an idea for an Ajax loader animation: An air bubble ascending in a glass tube.
Something like shown here: https://en.wikipedia.org/wiki/Spirit_level#/media/File:...
1
vote
1answer
75 views
Control element with JavaScript and SASS: move options between two select-elements
Who has to use enterprise software like for example Microsoft Access knows that control: There a two select lists. The one list offers possible options. With a button you can add one or multiple ...
4
votes
0answers
45 views
Polyfill for a legacy system: Attach “labels” to their corresponding checkboxes
I had to do some maintenance programming on a legacy software recently.
Most of the system's logic is done with Java and PL SQL.
The Java creates some special kind of XML. These XML is then ...
3
votes
0answers
49 views
jQuery Mobile Menu plugin
I would like some opinions on this Mobile Menu plugin I wrote for work. We develop custom WordPress themes, nothing too advanced or anything. I would like if anyone could just take a look and provide ...
1
vote
0answers
142 views
Line Graph animation with SVG and ES6 template strings
I've made this animation which shall be incorporated in the header of a webpage.
Demo with compiled Sass and uncompiled ES6 code:
...
1
vote
1answer
2k views
“Spinning wheels” - Animated spinner with SVG and Sass-CSS
I've made this little animation using SVG, CSS-keyframes and a bit of Sass.
...
1
vote
1answer
319 views
“Star Field” Animation with JavaScript and Sass-CSS
I've have make this animation on the weekend as a "just for fun" thing. And for to play with various techniques I've seen in others code.
I think it works quite alright.
Nevertheless I would ...
1
vote
1answer
521 views
Responsive SASS header
I'm currently working on an header for some homepage. It should be responsive. When enough width is available a floating header is displayed (logo on the left / menu on the right). With less and less ...
2
votes
1answer
8k views
React beginner exercise: Build a base arithmetic calculator
Exercise assignment:
Build a calculator with React which can add, subtract, multiply and divide.
See image below for reference
Give it whatever design and colors you want
Each text ...
6
votes
3answers
231 views
Toggle menu under specified screen width
I've created a simple toggle menu in jQuery, which is capable of specifying a breakpoint, but I'm afraid my code is too complicated. How can I make it simpler?
I also have a question about ...
2
votes
0answers
37 views
Styling different icon positions in boxes with Sass
I've been learning Sass recently and I've made a small project to master key concepts. I've tried to use placeholder to make different styles of boxes. I have a few questions:
is the project ...
3
votes
2answers
4k views
Tooltip-overlay following the mouse pointer
The purpose is to attach a tooltip-element to arbitrary HTML-elements.
The tooltip appears when the user hovers an element. Follows the mouse-pointer while moving over the element.
...
1
vote
0answers
236 views
Use checkbox to display side menu with only CSS
I am trying to improve a website to be as accessible as possible to screen readers and people who want to disable JavaScript (not necessarily both at the same time) so I use a checkbox with a label to ...
1
vote
1answer
43 views
Showing the current view-position within the web page
I've made this coding for large web pages with lots of text, images etc. If the user scrolls down or up it shows where the current view approximately is. In relation to the overall document height.
I'...
1
vote
0answers
370 views
“Moving gradient”-animation with CSS-keyframes and Sass
I've made this animation using Sass and CSS-keyframes.
I'm bit worried about my usage of position relative / absolute.
Can one expect that it works in all browser reliable? Or to I have to expect ...
0
votes
1answer
66 views
Excerpt from a grocery shopping site using SASS [closed]
I am a UI/UX designer. I am working on the HTML of a website, using Sass/scss+bootstrap 3 project. It's my first project in sass/scss.
Now my developer's feedback is: HTML code is not up to mark. ...
0
votes
1answer
30 views
HTML-formular with animated input-elements
The idea is to improve the usage of larger formulars. Done by adding a little animation to the input-elments.
When one of the textboxes is clicked or focussed via tab appears a colored border. ...
1
vote
0answers
29 views
Sass-Mixin for to attach a text-shadow animation upon HTML-elements
I've make these mixins by using SCSS-Sass. Any hints and tipps concerning improvements are welcomed.
...
1
vote
0answers
33 views
Fake closure to provide variable scoping in SASS
For some time I've wanted a way to provide private scope to variables, functions, etc. that needed to be used across multiple separate selections. As far as I'm aware there is no official solution for ...
2
votes
0answers
130 views
Animation with JavaScript and Sass : Neon light banner
After reading a bit about CSS3-text-shadows and seeing a few advanced examples I had the idea for a "neon light"-banner. Next idea was to animate it.
Finally it has become a mixture between a Sass-...
1
vote
1answer
151 views
SASS + Compass - File Structure and @Import order [closed]
I recently started using SASS and Compass in my projects. So far I am using the file structure shown below.
...
0
votes
2answers
54 views
Styling the font size in a nav bar
The font size scales up/down based on the size of the browser to fit the nav bar buttons (using @media).
...
1
vote
1answer
702 views
Flexbox & BEM 'table'
Using SCSS and React, I have made a little table (not an HTML table), which is responsive based on variable-width cells. That is to say, each cell whose width is not variable has a ...
4
votes
1answer
133 views
Render SVG background with Gradient
I'm new to and still fairly confounded by SVGs. I'm feeling pretty happy with the following hobbled together SCSS code demonstrated here:
...
3
votes
1answer
35 views
SASS mixin to define modifier classes for various screen sizes
I wish to make a mixin to produce the following result of modifier classes:
...
3
votes
1answer
805 views
Simple modals in vanilla JS
Recently I was looking for some really simple modal/popup solution in vanilla JS, but nothing popped. So I wrote mine component. It works great so far, have all the options I need, but I don't know if ...
3
votes
0answers
400 views
Gulp file for Jade, SASS, Optimize-html, jekyll and more
I have the following gulpfile which I use for development. It used to be a simple gulpfile with just jade compiling, sass, jekyll-rebuild, etc. but then I decided to add HTML Optimization my gulpfile ...
1
vote
0answers
38 views
Filtering potentially malicious user-defined CSS property values using ScssPhp
I have a script that allows stylesheet customization on a per-property basis. For example, I expose the "background-image" property for people to enter their own SCSS values to be entered in the mixin....
2
votes
1answer
457 views
Simple recipes web app with Redux
I have completed a coding challenge from Free Code Camp. The challenge's user stories are as follows:
I can create recipes that have names and ingredients.
I can see an index view where the ...
4
votes
3answers
2k views
Animated SVG pie chart with custom properties
I've made a small js/css/html module which purpose is to fill a pie chart up to a given percentage. Basically it could be used for instance as a filling pie chart that keep tracks of the amount of ...
3
votes
0answers
38 views
A 'top 100' app that displays list of users ordered in two different ways
I built a small app that gets data from a remote json file and displays it in a list of users. In each list item, an image of the user, their name, and their points tallies are shown.
The list is ...
1
vote
1answer
41 views
Pattern that adds a different value to the same attribute for many classes
The purpose of this question is to get some advice for improving the following code in order to make it less repetitive.
...
5
votes
2answers
163 views
Start of a responsive website for a legal firm
Please have a look at the HTML/CSS/JS (there is very little JS at the moment) and give me some feedback as to how my code looks to you, what level of skills it looks like I have and how I can improve. ...
-1
votes
1answer
88 views
Reduce repetition in SCSS for panels of various colors
I have the following SCSS and I'm curious as to how I can improve it, and reduce the amount of repetition...
I plan on adding more colors, but I don't wish to keep copy/pasting the same block over ...
