I am trying to get the css files for Semantic-UI buttons (Amazon Theme). I tried to follow their instructions on how to build themes which is way beyond my skill level and got me lost. I will really appreciate any sort of help to get these buttons (Amazon Theme) css file.
1- Is there a simple way ?
2- Are they ready available with the desired theme?
http://semantic-ui.com/elements/button.html
2-- Precompiled non-default (packaged) themed components are neither available on Semantic UI's official site nor in the dist folder on their github repo.
However you can cheat your way to the precompiled Amazon buttons, because they are available as resources on the Theming Demo site.
Open this site, which looks like github, except that it has a paint bucket icon next to the notification icon in the top right. Click this paint bucket icon, and a theming sidebar will appear on the left. You'll have to select your desired theme for the resources to load, but then you can grab them via the browser's Developer Tools Sources or Network tab.
1-- If you'd like to give another chance to the build process, here's how:
Prerequisites: Install NodeJs with Npm and Gulp (run npm i -g gulp in command line).
Download (and unpack) the Semantic UI sources
Navigate to the folder you extracted or downloaded the Semantic-UI sources, and do the followings in command line:
Run npm install.
When asked, choose Automatic (for installation)
and then choose Yes (for removing setup files)
and then No (for building Semantic now)
Edit the ./src/theme.config file, and change #button: 'default'; to #button: 'amazon';
Run gulp build
After the build is done, you should find the compiled css files in the ./dist folder, and your custom Amazon button.css in the ./dist/components folder.
Related
I want to integrate some build tools like NPM and Grunt whilst i'm working on my Wordpress theme. Eg...I'll write some Sass to compile it down to an .css file.
Where do the build files like grunt file and node_modules folder live within the wordpress theme?
There's documents on how to do it but not many documents on how it is structured.
How do you structure build tools to work with a wordpress theme?
I usually compile my own version of css from scratch when doing a client website - using built in tools suggested by either bootstrap, bulma or uxkit. For bulma you have a nice introduction on how to compile their framework
https://bulma.io/documentation/customize/with-node-sass/
In my workflow - I don't know if that would be optimal for everyone - I put wordpress files on the same level as node_modules folder but compile straight to wordpress theme folder, so my build command is as follows:
"css-build": "node-sass --omit-source-map-url src/scss/app.scss ../wp-content/themes/labaza/app.css",
So in this case when you take your files from local machine to server you just overwrite theme folder, and need to make sure that you're not uploading any node_modules.
Hope that helps - but as I wrote it's only my idea based on how I like to work.
I'm following an aurelia tutorial with Visual Studio 2015 and ASP.NET core where I installed NPM and run JSPM init, but after successfully creating all the files I can't find the jspm packages or config.js file in my Solution explorer.
UPDATE 1 The hidden folders and files are now showing up, but I have to right click on the main directory and chose the option to add to existing item. As you can see from the image I have a lot of files and folders, how can I speed up the process? Is there a way to just add all files to the project at the same time instead of manually?
Note: The config.js and jspm packages are on my physical directory so I know they exist, but how can I make them show up on my solution explorer menu?
STEPS:
I opened cmd prompt and entered: jspm init + npm install jspm --save-dev and selected yes on everything except on the configuration file part I entered: wwwroot and enter yes on everything, then selected babel.
Please let me know what I should do to make the files show up on the solution explorer or at least point me in the right direction. Thank you.
Originally VS projects did not automatically include new files that were added to the Project directory manually outside of Visual Studio.
However, I find that with VS2015 Update 3 and a new AspNet Core project they do "automagically" show up.
Not sure if maybe you're on a slightly older build, etc. but you could try the older approach as follows:
Select the Project in the Project Explorer (you currently have a solution-level item selected in that screenshot) and then you will see a new icon appear in the row of icons across the top of the Solution Explorer. This is the "Show All Files" icon/button.
Clicking it will show items that are in the physical directory but are not part of the VS Project. You should be able to right-click the file an choose include in project (or at least you used to be able to do this in older projects, etc. as stated).
I'm using the accordion, tooltips and transition components of UI Bootstrap.
I can create a custom build with the online tool on the UI Bootstrap website, which will create a minified and non-minified JS file containing only the components I selected, without overhead.
However, I don't want to use the online tool to compile my custom version of UI Bootstrap, instead I want to compile my own version locally, preferably using the tools I already use; Bower, Grunt and NPM.
So my question: How can I create my own version of UI Bootstrap locally?
bower install angular-ui-bootstrap, and then calling Grunt build in bower_components/angular-ui-bootstrap creates a UI Bootstrap build that includes all modules, there's probably a way to do the same with only a subset of the modules, but I could not figure this out.
It can be done by using the following command
grunt build:moduleName1:moduleName2:moduleName3....:moduleNameN
For example if you require the build to contain only tabs and buttons module , then the grunt command will be like
grunt build:tabs:buttons
The generated files will be present in dist folder
For the list of module names , check all folder names in src folder
The documentation for this is sparse , but if you check the Gruntfile.js , where they register the build task , they mention about how to build modules selectively
It is not as easy as I expected (and as it should be).
Take a look at the Gruntfile.js of the project. You will see that they do quite a lot. Converting HTML and CSS to JS, concating all the scripts in such way they are loadable by others. Moreover the file is quite difficult for orientation; it even includes custom tasks.
To mimic its behaviour I suggest this: Download it via Bower as you normally do. Copy its node dependecies to your package.json dependencies. Then copy the Gruntfile.js, change he routes, and try deleting some parts of the code until you reach a point when you cannot remove more lines without breaking it. It is not a nice way, it should be however successful.
If one had a lot of time, the build script is a good candidate for a deep refactoring. Moving custom tasks to standalone files (or projects), documenting the flow, and maybe implementing standard tasks for some steps (e.g. CSS minification).
I have installed two Bootstrap add-ons in my Meteor App and neither one work properly.
First I installed tsega:bootstrap3-datetimepicker and it works when I click inside the element but until I do that it appears at the very bottom of the page waiting for me to pick a date. It also doesn't display the glyphicon on the form.
Now I installed bootstrap-combobox and it doesn't work at all. It just appear as an ordinary input field with none of my four options showing.
Here is where I installed the files that came with these two add-ons:
/myapp/client/ bootstrap-datepicker.js bootstrap-combobox.js
/myapp/client/css/ bootstrap-combobox.css datepicker.css
What can I do to see what I could have done wrong with Bootstrap? This is what I followed during install:
meteor add less
meteor add nemo64:bootstrap
At the beginning of his tutorial he shows all the installed files in a /lib directory. I have no /lib directory after install.
You create /lib directory yourself, as well as /server and /client, at start of application /lib is what Meteor reads first, therefore every collection and allows to them should be placed in there, but you can check details here http://docs.meteor.com/#structuringyourapp .
And about bootstrap-3 - try to add whole package to meteor, in lib you add packages that aren't on Atmosphere platforms - https://github.com/oortcloud/unofficial-meteor-faq#how-can-i-use-someone-elses-javascript-in-my-meteor-project
meteor add mizzao:bootstrap-3
I am using bootstrap in Meteor and found that there is a modified flat design here: http://designmodo.com/demo/flat-ui/. Among the files seems to be a modified set of Bootstrap files. Is it possible to somehow use those css and js files to override the default bootstrap files to get the Flat-UI in a meter app? Thank you!
it's quite simple:
unzip the contents of the flat-ui-master.zip from the flatui site, then follow these steps:
create these folders in your app root: /client/stylesheets
copy the contents of the .zip into /stylesheets
remove the index.html and README.md files as they might cause your app to crash, and are not needed
meteor automatically takes care of the rest.
Although manually insert files works, I'm using meteor package jss:flat-ui
meteor add jss:flat-ui
it will automatically add flat-ui and twbs:bootstrap.
Note that, it might be better to remove any bootstrap package before installing this, I've been in a project that has mizzao:bootstrap installed and the login ui not working, so I remove mizzao:bootstrap and reinstalled flat-ui to make it work.
You can use whatever css you want to, Meteor don't care.
I wouldn't add the bootstrap meteor package though, I'd just download the css files you want and place them in your project. That way you know exactly what files are used and can easily make changes.
Here's some info on how to structure your app: https://github.com/oortcloud/unofficial-meteor-faq#where-should-i-put-my-files
I created a shell script to generate a custom bootstrap Meteor package from either a precompiled distribution, or from your own clone of the Bootstrap Git repository.
You can find it here, along with usage information: https://github.com/wojas/meteor-package-bootstrap
Just unpack the ZIP file containing the files and run this command from inside the theme folder:
/path/to/meteor-package-bootstrap.sh $your_meteor_project/packages/bootstrap