Using Clojure Hiccup for crafting stylish information in a unique manner

I want to create CSS style using hiccup by specifying the "top" and "left" variables to position an element. Currently, my code looks like this:

(html [:div {:style (str "top" top ";left" left)} "some text"])

The code above is not very clean. It would be more convenient if hiccup could automatically generate the "style" attribute using standard CSS rules. In that case, I could rewrite the code as follows:

(html [:div {:style {:top top :left left}} "some text"])

Is there a library available that can handle this task? Or do I need to create my own solution?

Any advice from Clojurians would be greatly appreciated!

cssclojurehiccup

Answer №1

You have the option to create a function that can accomplish this task, and it will require slightly less typing compared to using map. Here is an example:

(defn customStyle [& details]
  {:style (.trim (apply str (map #(let [[key value] %]
                                   (str (name key) ":" value "; "))
                                (apply hash-map details))))})

By using this function, you can write code like this...

(html [:div (customStyle :top top :left left) "some text"])

Here is an output sample generated by the function...

user=> (customStyle :top 32 :left 14)
{:style "top: 32; left: 14;"}

Answer №2

How about this:

(defn customStyle [styles]
  (str/join ";" (map #(str (name %) ":" ((keyword %) styles)) (keys styles))))

(customStyle {:margin      "30px"
              :background  "#4e7c51"
              :color       "black"
              :font-size   "x-large"
              :font-weight "normal"})

Answer №3

Although I'm still diving into Clojure, the idea of a 'transformation' approach reminiscent of Enlive seems like the ideal solution for such requirements - https://github.com/cgrand/enlive

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Efficiently Minimize Bootstrap Components Upon Clicking the Link

I've successfully created a navigation menu that expands and collapses without using a dropdown feature. However, I'm encountering an issue where I can't seem to toggle the div when clicking on a menu link. I attempted to use JavaScript to c ...

javascripthtmlcsstwitter-bootstrapnavigation

"Discover the secrets of flipping a webpage just like turning the pages of

I recently designed a basic website with 4 separate pages. The homepage includes navigation links for each page, such as - Page1 page2 Page3 Page4 My goal now is to create a feature where clicking on any of these links will open the corresponding page wi ...

htmlcss

Move a div to line up with a table row when clicked using jQuery

As I mentioned in a previous post, my experience with jQuery is limited and I apologize for that. The task I am attempting to accomplish seems relatively straightforward. Here's an overview of the situation: I have a table enclosed within a div. Each ...

jquerycssmodel-view-controller

Attempting to align three divs to the left, center, and right by utilizing Bootstrap CSS

I've been attempting to align three divs horizontally by floating them to the left, center, and right. Here is my code so far: HTML //to be centered div <div style="float:center"> <form> </form> <form> </ ...

htmlcsstwitter-bootstrap

The function is not being called as expected when using `onclick` or `eventListener('click')`

I'm in the process of developing a login form for my website that will offer 2 options - "login" and "signup". The concept is similar to mini tabs and iframe windows. Essentially, I have two divs side by side for "login" and "signup". When the user cl ...

javascripthtmlcss

Logo-enhanced Navigation Bar in Bootstrap

Hey everyone, I've been experimenting with Bootstrap headers that include a logo before the "Brand" text. I'm facing an issue where the navbar doesn't resize properly, as shown in the screenshot below: - The navbar doesn't adjust to t ...

htmlcsstwitter-bootstrap

Using animate.css and jQuery for sequential animations

Is there a way to make them fadeInUp one after the other? Check out the demo http://jsfiddle.net/uz2rm8jy/4/ Here is the HTML structure: <div class="c one"></div> <div class="c two"></div> <div class="c three"></div> ...

javascriptjquerycss

How to place a child <div> within a parent <div> that is fixed on the page

I am currently working on creating a modal window using HTML/CSS. My goal is to have the modal window fixed in position relative to the browser window, with a white background. Inside the modal, there will be an image at the top and a div element at the bo ...

htmlcss

Personalized design for Sweet alert 2

I am trying to customize a sweetAlert2 by defining a className, but it seems that the styling is not applying to the sweet alert. I have tried calling the class name "styleTitle" and various other names, but nothing seems to work. Could the issue be with t ...

javascriptcssvue.jssweetalert2nuxt.js

Troubleshooting problem with customized Bootstrap 5 form-switch functionality

Currently, I am developing a website utilizing Bootstrap 5. However, I have encountered a problem with form switches when using a customized version of Bootstrap 5.1.3 Interestingly, when I include Bootstrap 5.1.3 via CDN, the form switches display correc ...

csssasssafaribootstrap-5

The CSS pseudo-element ::before is neutralizing the effect of ::

Here's an HTML code snippet: <h1>Example title</h1> This is the corresponding CSS code: h1::first-letter{ display:none; } h1::before{ content: url(http://icons.iconarchive.com/icons/ariil/alphabet/32/Letter-E-icon.png); } I&apo ...

htmlcss

Is it possible to protect assets aside from JavaScript in Nodewebkit?

After coming across a post about securing the source code in a node-webkit desktop application on Stack Overflow, I began contemplating ways to safeguard my font files. Would using a snapshot approach, similar to the one mentioned in the post, be a viable ...

javascriptcssbinaryfont-facenode-webkit

Is there a way to position the tooltip above the sorter icon in Ant Design (antd) component?

I'm currently working on creating a table with sorter columns using the antd framework. Can anyone guide me on how to position the tooltip above the sorter icon? Below is a snippet of my UI. https://i.sstatic.net/fGoqA.png Specifically, I included t ...

javascriptcssreactjsantd

Give a CSS Element a specific class

Can all h3 elements be styled with the class responsive-heading using only CSS? Take a look at the CSS snippet provided for more clarity: h3 { .responsive-heading } /* The responsive-heading class is defined in another CSS file and includes: .respons ...

javascripthtmlcss

Spacing between posts using CSS and jQuery

Currently, my code is creating a random number of new articles within the body of my webpage. I have successfully implemented different colors for each article, but I am encountering an issue with padding. Being new to web development, I am attempting to s ...

javascriptjquerycsshtml

Can I use the mouseover event on an image to display a sibling div?

Hi everyone! I'm fairly new to web development and I could really use some advice. I'm trying to implement a mouseenter event on an img tag to show a sibling div, but I'm encountering some strange behavior. The mouseenter event seems to be w ...

javascripthtmlcss

Utilizing flex-box for smooth transitions in React Router with react-tranisition-group

Currently, I am working on implementing transitions for my react-router page using react-transition-group. All of my page content is wrapped inside a container, and I have applied flex-box to center the container. Unfortunately, I am facing issues with g ...

cssreactjsreact-transition-group

What is the best way to align the inner content to the left and right within a border-radius shape?

.intro h1{ font-family: 'Cambria'; font-size: 16pt; font: bold; text-align: left; } .intro p{ font-family: 'Calibri'; font:italic; font-size: 12pt; padding: 0px 690px 0px 20px; text-align: left; ...

htmlcsswebscope

How can I remove the blue highlight on text fields in a Chrome Extension?

I am currently developing a Chrome extension that allows users to edit a small text field. However, I am encountering an issue with the blue highlight that appears around the text field when clicked - I find it quite bothersome. Is there a way, possibly t ...

htmlcssgoogle-chrome-extensiontextfieldhighlight

Show a notification on the screen if the source of the iframe is blank

Is there a way to show a message "Please click on a match to get started" when no match link has been clicked? For example, when the iframe does not have an src attribute. My backend is built on Django. Below is the HTML code snippet: </form><b ...

htmljquerycssdjangoajax