XD, Styles, CSS, SASS - Githubissues

DarkMatterOregon / dark-matter-blazor-web

the dark matter site in blazor

MIT License

0 stars 0 forks source link

XD, Styles, CSS, SASS #4

Open markdav-is opened 4 years ago

markdav-is commented 4 years ago

we have design assets in DX and we are hoping to build Bootstrap Themes from them. bootstrap themes consist of css and sass files. check out this building for example: https://bootstrap.build/app

answer the following:

[x] what can we export from XD?
- [x] can you export sass variables from XD?
- [x] can you export css from XD?
- [x] can you export HTML from XD?
[x] can we lift components out with HTML/CSS?

here are some components:

bmckenzie93 commented 4 years ago

Adobe XD currently doesn't offer an option to generate CSS code or pre-processors like Less, Sass, SCSS, or Stylus. But there is a way how to do it with 'Avocode'

We can however export components as images, things like icons (png, jpeg, svg, pdf).

Screen Shot 2020-07-30 at 2 04 14 PM

Screen Shot 2020-07-30 at 2 07 12 PM

bmckenzie93 commented 4 years ago

Custom bootstrap theme using SASS:

1) download bootstrap sass files (multiple sass 'partial' files that all get imported into one main sass file, which then gets compiled into regular or minified css file)

2) copy everything from the '_variables.scss' bootstrap sass file into our own sass folder with our own '_customVariables.scss' file.

3) edit our own custom variables file to overwrite the default bootstrap values.

https://www.youtube.com/watch?v=6Ovw43Dkp44&t=785s

bmckenzie93 commented 4 years ago

I found an app for creating custom themes here https://pikock.github.io/bootstrap-magic/

markdav-is commented 4 years ago

thanks so much for this research. I have a good understanding of the tool and how it's mostly a manual process to get from XD to themes, but that's OK. generated code from tools is typicially pretty bad anyway.