CSS – Programming & Mustangs!

CSS: Rotate Image

If you want to rotate an image you can do this very easily.

Directly with Class:

.rotate {
	-webkit-transform: rotate(90 deg);
	transform:  rotate(90 deg);
	-ms-transform:  rotate(90 deg);
}

Jquery:

$("#myImage").css("-webkit-transform", "rotate(90 deg)");
$("#myImage").css("transform", "rotate(90 deg)");
$("#myImage").css("-ms-transform", "rotate(90 deg)");

CSS: Bootstrap Panel

In this tutorial I will show you how how to use bootstrap with React/Node to make a panel using just bootstrap.

You will need bootstrap and jquery.

npm install bootstrap@3.3.7 --save
npm install jquery@3.2.1 --save
npm install file-loader --save
npm install url-loader --save

You will also need to update webpack.config.js and add the following under “loaders”.

{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }

Next you need to require bootstrap and jQuery.

window.jQuery = window.$ = require("jquery");
require("bootstrap");

You will need to also require the bootstrap css.

require("bootstrap/dist/css/bootstrap.min.css");

The following is all you then need to display a css like panel.

<div className="panel panel-default">
	<div className="panel-heading">
		<h3 className="panel-title">Panel Title</h3>
	</div>
	<div className="panel-body">
		Panel Text
	</div>
</div>

CSS: FlexBox

I wanted to take a few minutes and just do a basic run through of the common uses of FlexBox. Just from the 30 minutes of doing a run through I found it to be extremely useful and easily configured.

For this example I will use the following html structure.

<div className="div-flex">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
</div>

If you want them to display like the following “12345678910” you style like the following: They all become flex items.

display: inline-flex;

flex-direction:

To make it look like this “12345678910”.

flex-direction: row;

To make it look like this “10987654321”.

flex-direction: row-reverse;

To put it from 1 to 10 below each other.

flex-direction: column;

To put it from 10 to 1 below each other.

flex-direction: column-reverse;

flex-wrap:

If you set nowrap then the flex items will not wrap to the next line.

flex-wrap: nowrap;

If you want the divs to wrap to the next line use wrap. You will notice how it wraps to the next line when it runs out of space.

flex-wrap: wrap;

If you want the divs to wrap to the next line but in reverse. You will notice how it wraps to the next line when it runs out of space. But more than that you will notice that it started at 10 instead of 1.

flex-wrap: wrap-reverse;

flex-flow:

Is used to combine flex-direction and flex-wrap. See below an example. What you will see is that 1 will be on the right and as the text wraps it will wrap to the right side not left.

flex-flow: row-reverse wrap;

justify-content:

You can use this to center justify content. The text will always be center.

justify-content: center;

You can use this to left justify content. The text will always be to the left. Unless you use one of the reverse options in flex-direction or flex-flow.

justify-content: flex-start;

You can use this to right justify content. The text will always be to the right. Unless you use one of the reverse options in flex-direction or flex-flow.

justify-content: flex-end;

If you want to set space between each element to use the width of the page or container element. Notice you have to set the width otherwise it doesn’t seem to work.

width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;

If you want to set space around each element to use the width/height of the page or container element. Notice you have to set the width/height otherwise it doesn’t seem to work.

width: 100%;
height: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;

Webkit:

If you want your flex code to work cross-browsers here are some of the commands using webkit and ms.

display: flex;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;

React Add CSS to Your Site

If you haven’t already done so please follow this tutorial in setting up your React/Python site.

Folder Structure:

You need to add file(s) to your existing structure.
Inside testApp create the following:
- folder: app
  - folder: home
  - folder: css
    - file: home.css

NPM:

We need to add style-loader and css-loader to our application.

npm install style-loader --save
npm install css-loader --save
npm install create-react-class --save

Webpack.config.js Setup:

Now that we have installed our loaders we need to setup webpack.config.js to use our new loaders. The below will go in the “loaders” array.

	{
		test: /\.css$/,
		loader: 'style-loader!css-loader'
	}

Things to note:

The ! in the loader section just means it applies to both.
The .css in the test area says any css file.

Home.jsx Modification:

We need to pull in our css file for home.jsx. Notice the “require” now in our home.jsx file and that we added a class to our div.

var React = require("react");
var ReactDOM = require("react-dom");
var createReactClass = require("create-react-class");

require("../css/home.css");

var Home = createReactClass({
	render: function() {
		return (<div className="div-hi">Hi</div>);
	}
});

ReactDOM.render(<Home />, document.getElementById("app"));

Home.css Setup:

Put anything you want in the css file as long as it matches the classname we set in home.jsx.

.div-hi {
	color: red;
}

Run:

We can now run the following to build and deploy our site. It will be available on http://localhost:5000/. Once you login you will be able to see our red “hi”. As long as you following the building a react python site creation.

webpack
flask run